1. Gunakan singkatan css
Menggunakan singkatan dapat membantu mengurangi ukuran file CSS Anda dan membuatnya lebih mudah dibaca. Untuk aturan utama singkatan CSS, silakan merujuk ke "Ringkasan Sintaks Singkatan CSS Umum", yang tidak akan dijelaskan di sini.
2. Definisikan satuannya dengan jelas kecuali nilainya 0
Lupa mendefinisikan satuan dimensi adalah kesalahan umum di kalangan pemula dalam CSS. Di HTML Anda cukup menulis lebar=100, tetapi di CSS Anda harus memberikan satuan pasti, seperti: lebar:100px lebar:100em. Hanya ada dua pengecualian ketika satuan tidak dapat ditentukan: tinggi baris dan nilai 0. Selain itu, nilai lain harus mengikuti satuan. Hati-hati jangan sampai menambah spasi di antara nilai dan satuan.
3. Peka huruf besar/kecil
Saat menggunakan CSS di XHTML, nama elemen yang ditentukan dalam CSS peka huruf besar-kecil. Untuk menghindari kesalahan ini, saya sarankan menggunakan huruf kecil untuk semua nama definisi.
Nilai class dan id juga peka huruf besar-kecil dalam HTML dan XHTML. Jika Anda harus menulis huruf besar-kecil, harap konfirmasikan dengan cermat bahwa definisi Anda dalam CSS konsisten dengan tag di XHTML.
4. Batalkan batasan elemen sebelum kelas dan id
Saat Anda menulis untuk mendefinisikan kelas atau id suatu elemen, Anda dapat menghilangkan kualifikasi elemen sebelumnya, karena ID tersebut unik di suatu halaman dan dapat digunakan beberapa kali di halaman tersebut. Tidak masuk akal bagi Anda untuk mengkualifikasi suatu elemen. Misalnya:
div#konten {}
fieldset.detail {} }
dapat ditulis sebagai
#isi { }
.detail {} }
Ini menghemat beberapa byte.
5. Nilai bawaan
Biasanya nilai default padding adalah 0, dan nilai default warna latar adalah transparan. Namun nilai defaultnya mungkin berbeda di berbagai browser. Jika Anda takut konflik, Anda dapat menentukan nilai margin dan padding semua elemen menjadi 0 di awal style sheet, seperti ini:
* {
margin:0;
bantalan:0;
}
6. Tidak perlu berulang kali mendefinisikan nilai yang dapat diwariskan
Dalam CSS, elemen anak secara otomatis mewarisi nilai atribut elemen induk, seperti warna, font, dll., yang telah ditentukan di elemen induk, dapat langsung diwarisi di elemen anak tanpa definisi berulang. Namun perlu diketahui bahwa browser mungkin menimpa definisi Anda dengan beberapa nilai default.
7. Prinsip pertama terkini
Jika ada beberapa definisi dari elemen yang sama, definisi terdekat (tingkat minimum) akan diprioritaskan. Misalnya, ada potongan kode ini
Update: Lorem ipsum dolor set
Dalam file CSS, Anda telah mendefinisikan elemen p dan pembaruan kelas
P {
margin:1em 0;
ukuran font:1em;
warna:#333;
}
.memperbarui {
berat font: tebal;
warna:#600;
}
Dari kedua definisi ini, class=update akan digunakan karena class lebih dekat dari p. Anda dapat melihat "Menghitung kekhususan pemilih" W3C untuk mempelajari lebih lanjut.
8. Beberapa definisi kelas
Sebuah tag dapat mendefinisikan beberapa kelas secara bersamaan. Misalnya: Pertama kita mendefinisikan dua gaya, gaya pertama memiliki latar belakang #666; gaya kedua memiliki batas 10 px.
.satu{lebar:200px;latar belakang:#666;}
.two{batas:10px padat #F00;}
Di kode halaman, kita bisa memanggil seperti ini
Efek tampilan terakhir adalah div ini memiliki latar belakang #666 dan batas 10 piksel. Ya, hal ini mungkin dilakukan, Anda dapat mencobanya.
9. Gunakan pemilih turunan
Pemula CSS tidak tahu bahwa penggunaan sub-selektor adalah salah satu alasan yang mempengaruhi efisiensinya. Subselektor dapat membantu Anda menyimpan banyak definisi kelas. Mari kita lihat kode berikut:
Definisi CSS untuk kode ini adalah:
div#subnavul {}
div#subnavulli.subnavitem {}
div#subnavulli.subnavitem a.subnavitem {}
div#subnavulli.subnavitemdipilih {} }
div#subnavulli.subnavitemdipilih a.subnavitemdipilih { }
Anda bisa mengganti kode di atas dengan cara berikut
Definisi gaya adalah:
#subnav {} }
#subnavli { }
#subnav a {} }
#subnav .sel {}
#subnav .sel a {} }
Gunakan subselektor untuk membuat kode dan CSS Anda lebih ringkas dan mudah dibaca.
10. Tidak perlu menambahkan tanda kutip pada jalur gambar latar belakang
Untuk menghemat byte, saya sarankan untuk tidak mengutip jalur gambar latar belakang, karena tanda kutip tidak diperlukan. Misalnya:
latar belakang:url(gambar
margin:0 otomatis;
}
Tapi IE5/Win tidak dapat menampilkan definisi ini dengan benar. Kami menggunakan trik yang sangat berguna untuk menyelesaikannya: gunakan atribut text-align. Seperti ini:
tubuh {
perataan teks:tengah;
}
#membungkus {
lebar:760 piksel;
margin:0 otomatis;
perataan teks:kiri;
}
Aturan text-align:center; badan pertama mendefinisikan bahwa semua elemen badan di IE5/Win berada di tengah (browser lain hanya memusatkan teks), dan text-align:left; kiri.
15. Impor dan sembunyikan CSS
Karena browser lama tidak mendukung CSS, pendekatan yang umum adalah menggunakan teknik @import untuk menyembunyikan CSS. Misalnya:
@impor url(main.css);
Namun, metode ini tidak berhasil untuk IE4, yang membuat saya pusing beberapa saat. Kemudian saya menulisnya seperti ini:
@import main.css;
Dengan cara ini CSS bisa disembunyikan di IE4. Haha, juga menghemat 5 byte. Jika Anda ingin mengetahui penjelasan detail sintaks @import, Anda dapat melihat di sini "diagram filter css centricle"
16. Optimasi untuk IE
Terkadang, Anda perlu menetapkan beberapa aturan khusus untuk bug browser IE. Ada terlalu banyak peretasan CSS di sini. Saya hanya menggunakan dua di antaranya, terlepas dari apakah Microsoft lebih baik di versi beta IE7 yang akan datang. Dengan dukungan untuk CSS, kedua metode tersebut yang paling aman.
1. Metode anotasi
(a) Untuk menyembunyikan definisi CSS di IE, Anda dapat menggunakan pemilih anak:
html>tubuh p {
}
(b) Cara penulisan berikut hanya dapat dipahami oleh browser IE (tersembunyi dari browser lain)
* html hal {
}
(c) Terkadang, Anda ingin IE/Win aktif tetapi IE/Mac disembunyikan, Anda dapat menggunakan trik garis miring terbalik:
* html hal {
deklarasi
}
2. Metode komentar bersyarat
Metode lain, yang menurut saya lebih teruji waktu daripada CSS Hacks, adalah dengan menggunakan atribut pribadi Microsoft komentar bersyarat (komentar bersyarat). Dengan menggunakan metode ini Anda dapat menentukan beberapa gaya secara terpisah untuk IE tanpa mempengaruhi definisi style sheet utama.
17. Tip Debugging: Seberapa besar lapisannya?
Saat men-debug kesalahan CSS, Anda harus seperti mesin tik dan menganalisis kode CSS baris demi baris. Saya biasanya menentukan warna latar belakang pada lapisan yang dimaksud sehingga jelas berapa banyak ruang yang digunakan lapisan tersebut. Beberapa orang menyarankan penggunaan border, yang secara umum mungkin dilakukan, namun masalahnya adalah terkadang border akan memperbesar ukuran elemen, dan border-top dan boeder-bottom akan merusak nilai margin vertikal, sehingga lebih aman menggunakan background.
Properti lain yang sering menimbulkan masalah adalah outline. Garis luar terlihat seperti boeder, namun tidak memengaruhi ukuran atau posisi elemen. Hanya sedikit browser yang mendukung atribut outline, satu-satunya yang saya tahu adalah Safari, OmniWeb, dan Opera.
18. Gaya penulisan kode CSS
Saat menulis kode CSS, setiap orang memiliki kebiasaan menulisnya masing-masing mengenai indentasi, jeda baris, dan spasi. Setelah berlatih terus-menerus, saya memutuskan untuk mengadopsi gaya penulisan berikut:
pemilih1,
pemilih2 {
properti:nilai;
}
Saat menggunakan definisi gabungan, saya biasanya menulis setiap pemilih pada barisnya masing-masing sehingga lebih mudah ditemukan di file CSS. Tambahkan spasi di antara pemilih terakhir dan kurung kurawal {. Tulis juga setiap definisi pada barisnya masing-masing. Titik koma harus ditempatkan tepat setelah nilai atribut.
Saya terbiasa menambahkan titik koma setelah setiap nilai atribut. Meskipun aturan mengizinkan bahwa titik koma tidak perlu ditulis setelah nilai atribut terakhir, jika Anda ingin menambahkan gaya baru, sering kali Anda lupa menambahkan titik koma dan tanda titik koma. menyebabkan kesalahan, jadi Anda tetap menambahkannya.
Terakhir, kurung kurawal penutup } ditulis pada satu baris tersendiri.
Spasi dan jeda baris membantu membaca.
