L'approccio html5 alla prototipazione css veloce
oppure: i <style>tag non sono più solo per la testa!
Hacking CSS
Supponiamo che tu stia eseguendo il debug e desideri modificare il tuo css di pagina, in modo che una certa sezione appaia solo meglio. Invece di creare i tuoi stili in linea nel modo rapido, sporco e non mantenibile, puoi fare quello che faccio in questi giorni e adottare un approccio graduale.
Nessun attributo di stile in linea
Non creare mai il tuo CSS in linea, con questo intendo: <element style='color:red'>o anche <img style='float:right'>È molto conveniente, ma non riflette l'effettiva specificità del selettore in un vero file CSS in seguito, e se lo mantieni, rimpiangerai il carico di manutenzione in seguito.
Prototipo con <style>invece
Dove avresti usato i CSS in linea, usa invece gli <style> elementi in-page . Provalo! Funziona bene in tutti i browser, quindi è ottimo per i test, ma ti consente di spostare con garbo tali CSS nei tuoi file CSS globali ogni volta che vuoi / devi! (* tieni presente che i selettori avranno solo la specificità a livello di pagina, anziché la specificità a livello di sito, quindi fai attenzione a non essere troppo generici) Proprio pulito come nei tuoi file CSS:
<style>
.avatar-image{
float:right
}
.faq .warning{
color:crimson;
}
p{
border-left:thin medium blue;
// this general of a selector would be very bad, though.
// so be aware of what'll happen to general selectors if they go
// global
}
</style>
Refactoring inline css di altre persone
A volte non sei nemmeno il problema, e hai a che fare con il CSS in linea di qualcun altro e devi riformattarlo. Questo è un altro grande uso per la <style>pagina in, in modo che sia possibile rimuovere direttamente i CSS inline e posizionarli immediatamente sulla pagina in classi o ID o selettori mentre si esegue il refactoring. Se stai abbastanza attento con i tuoi selettori mentre procedi, puoi quindi spostare il risultato finale nel file css globale alla fine con solo un copia e incolla.
È un po 'difficile trasferire immediatamente ogni bit di CSS nel file CSS globale, ma con <style>elementi in-page , ora abbiamo alternative.