Pendekatan html5 untuk prototyping css cepat
atau: <style>tag tidak lagi hanya untuk kepala lagi!
Peretasan CSS
Katakanlah Anda sedang debug, dan ingin memodifikasi page-css Anda, buat bagian tertentu hanya terlihat lebih baik. Alih-alih membuat gaya Anda segaris dengan cara cepat dan kotor dan tidak dapat dipelihara, Anda dapat melakukan apa yang saya lakukan hari ini dan mengambil pendekatan bertahap.
Tidak ada atribut gaya inline
Jangan pernah membuat inline css Anda, yang saya maksud: <element style='color:red'>atau bahkan<img style='float:right'> itu sangat mudah, tetapi tidak mencerminkan kekhususan pemilih aktual dalam file css nyata nanti, dan jika Anda menyimpannya, Anda akan menyesali beban pemeliharaan nanti.
Prototipe dengan <style>gantinya
Di mana Anda akan menggunakan inline css, alih-alih gunakan di halaman <style> elemen . Coba itu! Ini berfungsi dengan baik di semua browser, sehingga sangat bagus untuk pengujian, namun memungkinkan Anda untuk memindahkan css seperti itu ke file css global Anda kapan pun Anda mau / perlu! (* ketahuilah bahwa pemilih hanya akan memiliki kekhususan tingkat halaman, alih-alih kekhususan tingkat situs, jadi waspadalah karena terlalu umum) Sama bersihnya seperti pada file css Anda:
<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 orang lain
Kadang-kadang Anda bahkan bukan masalah, dan Anda berurusan dengan inline css orang lain, dan Anda harus memperbaikinya. Ini merupakan kegunaan lain untuk<style> halaman in, sehingga Anda dapat langsung menghapus inline css dan langsung meletakkannya di halaman dalam kelas atau id atau selektor saat Anda melakukan refactoring. Jika Anda cukup berhati-hati dengan penyeleksi saat menjalankannya, Anda dapat memindahkan hasil akhir ke file global css di bagian akhir hanya dengan salin & tempel.
Agak sulit untuk mentransfer setiap bit css segera ke file global css, tetapi dengan <style>elemen dalam halaman , kami sekarang memiliki alternatif.