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. Mendefinisikan satuan dengan jelas, kecuali nilainya 0.
Lupa menentukan satuan ukuran adalah kesalahan umum di kalangan pemula CSS. Dalam HTML Anda cukup menulis lebar = "100", tetapi dalam CSS Anda harus memberikan satuan yang tepat, seperti: lebar: 100px lebar: 100em. Hanya ada dua pengecualian jika unit tidak 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. Sensitivitas Huruf
Saat menggunakan CSS di XHTML, nama elemen yang didefinisikan 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 kualifikasi elemen sebelum class dan id
. Saat Anda menulis untuk mendefinisikan class atau id untuk suatu elemen, Anda dapat menghilangkan kualifikasi elemen sebelumnya, karena ID unik di suatu halaman, dan class s dapat digunakan beberapa kali di halaman tersebut. . Tidak masuk akal bagi Anda untuk mengkualifikasi suatu elemen. Misalnya:
div#content { /* deklarasi */ }
fieldset.details { /* deklarasi */ }
Dapat ditulis sebagai #content { /* deklarasi */ }
.details { /* deklarasi */ }
Ini menghemat beberapa byte.
5. Nilai default
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 mendefinisikan nilai yang dapat diwariskan berulang kali.
Dalam CSS, elemen turunan secara otomatis mewarisi nilai atribut dari elemen induk, seperti warna, font, dll., yang telah ditentukan di elemen induk, dapat langsung diwarisi di elemen anak, dan tidak perlu diulang definisinya. Namun perlu diketahui bahwa browser mungkin menimpa definisi Anda dengan beberapa nilai default.
7. Prinsip terdekat-pertama.
Jika ada beberapa definisi dari elemen yang sama, definisi terdekat (tingkat minimum) akan diutamakan
Dalam file CSS, Anda telah mendefinisikan elemen p dan kelas "pembaruan"
P {
margin:1em 0;
ukuran font:1em;
warna:#333;
}
.memperbarui {
berat font: tebal;
warna:#600;
}
Dari dua definisi ini, class="update" akan digunakan karena class lebih dekat dari p. Anda dapat melihat "Menghitung kekhususan pemilih" W3C untuk mempelajari lebih lanjut.
8. Definisi beberapa kelas
Sebuah label 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 <div class="one two"></div> 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 menggunakan pemilih turunan adalah salah satu alasan yang mempengaruhi efisiensinya. Subselektor dapat membantu Anda menyimpan banyak definisi kelas. Mari kita lihat kode berikut:
<div id="subnav">
<ul>
<li class="subnavitem"> <a href="#" class="subnavitem">Item 1</a></li>>
<li class="subnavitemselected"> <a href="#" class="subnavitemselected"> Butir 1</a> </li>
<li class="subnavitem"> <a href="#" class="subnavitem"> Butir 1</a> </li>
</ul>
</div>
Definisi CSS untuk kode ini adalah:
div#subnav ul { /* Beberapa gaya */ }
div#subnav ul li.subnavitem { /* Beberapa gaya */ }
div#subnav ul li.subnavitem a.subnavitem { /* Beberapa gaya */ }
div#subnav ul li.subnavitemselected { /* Beberapa gaya */ }
div#subnav ul li.subnavitemselected a.subnavitemselected { /* Beberapa gaya */ }
Anda dapat mengganti kode di atas dengan metode berikut<ul id="subnav">
<li> <a href="#"> Butir 1</a> </li>
<li class="sel"> <a href="#"> Butir 1</a> </li>
<li> <a href="#"> Butir 1</a> </li>
</ul>
Definisi gaya adalah:
#subnav { /* Beberapa gaya */ }
#subnav li { /* Beberapa gaya */ }
#subnav a { /* Beberapa gaya */ }
#subnav .sel { /* Beberapa gaya */ }
#subnav .sel a { /* Beberapa gaya */ }
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 menambahkan tanda kutip pada jalur gambar latar belakang, karena tanda kutip tidak diperlukan. Misalnya:
latar belakang:url("gambar/***.gif") #333;
Dapat ditulis sebagai background:url(images/***.gif) #333;
Jika Anda menambahkan tanda kutip, ini akan menyebabkan beberapa kesalahan browser.
11. Penyeleksi grup (Pemilih grup)
Ketika beberapa tipe elemen, kelas, atau id memiliki beberapa atribut yang sama, Anda dapat menggunakan penyeleksi grup untuk menghindari beberapa definisi berulang. Ini dapat menghemat beberapa byte.
Misalnya: untuk menentukan font, warna dan margin semua judul, Anda dapat menulis:
h1,h2,h3,h4,h5,h6 {
keluarga font:"Lucida Grande",Lucida,Arial,Helvetica,sans-serif;
warna:#333;
margin:1em 0;
}
Jika ada elemen individual yang perlu menentukan gaya independen saat digunakan, Anda dapat menambahkan definisi baru atau menimpa definisi lama, misalnya:
h1 { ukuran font:2em }
h2 { ukuran font:1,6em;
12. Tentukan gaya tautan dalam urutan yang benar.
Saat Anda menggunakan CSS untuk menentukan beberapa gaya status suatu tautan, perhatikan urutan penulisannya. Urutan yang benar adalah: :link :visited :hover :aktif. Huruf pertama yang diekstraksi adalah "LVHA", yang dapat Anda ingat sebagai "LoVe Hate" (suka atau benci). Mengapa begitu didefinisikan? Anda dapat merujuk pada "Kekhususan Tautan" Eric Meyer.
Jika pengguna Anda perlu menggunakan kontrol keyboard dan perlu mengetahui fokus tautan saat ini, Anda juga dapat menentukan atribut :focus. Efek dari atribut :focus juga bergantung pada posisi di mana Anda menulis. Jika Anda ingin elemen fokus menampilkan efek :hover, tulis :focus sebelum :hover; Anda meletakkan :fokus Setelah :hover.
13. Clear float.
Masalah CSS yang sangat umum adalah ketika floating digunakan untuk penentuan posisi, lapisan di bawahnya ditutupi oleh lapisan mengambang, atau sub-lapisan yang bersarang di lapisan melebihi cakupan lapisan luar.
Solusi yang biasa dilakukan adalah menambahkan elemen tambahan di belakang lapisan mengambang, seperti div atau br, dan mendefinisikan gayanya dengan jelas: keduanya. Cara ini agak dibuat-buat, tapi untungnya ada cara yang baik untuk mengatasinya. Silakan merujuk ke artikel ini "Cara Menghapus Float Tanpa Markup Struktural" (Catatan: Situs ini akan menerjemahkan artikel ini sesegera mungkin).
Kedua cara di atas bisa mengatasi masalah floating overflow dengan sangat baik, namun bagaimana jika Anda benar-benar perlu menghapus layer atau objek yang ada di dalam layer tersebut? Cara sederhananya adalah dengan menggunakan atribut overflow. Metode ini pertama kali dipublikasikan di "Simple Clearing of Floats" dan telah dibahas secara luas di "Clearance" dan "Super simple clearing float".
Metode mana yang jelas di atas yang lebih cocok untuk Anda bergantung pada situasi spesifik dan tidak akan dibahas di sini. Selain itu, beberapa artikel bagus telah memperjelas tentang penerapan float. Disarankan agar Anda membaca: "Floatutorial", "Containing Floats" dan "Float Layouts"
14. Pemusatan horizontal (centering)
Ini adalah teknik yang sederhana, namun patut dikatakan lagi, karena saya melihat terlalu banyak pertanyaan pemula yang menanyakan hal ini: Bagaimana cara memusatkan CSS secara horizontal? Anda perlu menentukan lebar elemen, dan menentukan margin horizontal, jika tata letak Anda terdapat dalam lapisan (wadah), seperti ini:
Anda dapat menentukannya agar terpusat secara horizontal seperti ini:
#membungkus {
lebar:760px; /* Ubah ke lebar lapisan Anda*/
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:760px; /* Ubah ke lebar lapisan Anda*/
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:
@import 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 teknik CSS (peretasan) di sini. Saya hanya menggunakan dua di antaranya di versi beta IE7, kedua metode ini adalah yang paling aman.
1. Metode anotasi (a) menyembunyikan definisi CSS di IE. Anda dapat menggunakan pemilih anak:
html>tubuh p {
/* Isi definisi */
}
(b) Cara penulisan berikut hanya dapat dipahami oleh browser IE (tersembunyi dari browser lain)
* html hal {
/* deklarasi */
}
(c) Terkadang, Anda ingin IE/Win aktif tetapi IE/Mac disembunyikan, Anda dapat menggunakan trik "backslash":
/* */
* html hal {
deklarasi
}
/* */
2. Metode komentar bersyarat Metode lain, yang menurut saya lebih dapat diuji 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. Seperti ini:
<!--[jika YAITU]>
<link rel="stylesheet" type="teks/css" href="ie.css" />
<![endif]-->
17. Keterampilan 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 mempunyai kebiasaan penulisan masing-masing untuk 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.