Artikel ini merangkum beberapa teknik CSS umum untuk meletakkan dasar dalam rekonstruksi situs web. Saya harap Anda dapat mempelajari sesuatu yang bermanfaat.
1. Gunakan singkatan css
Menggunakan singkatan dapat membantu mengurangi ukuran file CSS Anda dan membuatnya lebih mudah dibaca. Untuk aturan utama singkatan CSS, silakan lihat "Sintaks Dasar CSS".
2. Definisikan satuannya dengan jelas kecuali nilainya 0
Lupa mendefinisikan satuan dimensi adalah kesalahan umum di kalangan pemula dalam CSS. Dalam HTML Anda cukup menulis ;100, tetapi dalam CSS Anda harus memberikan satuan yang tepat, seperti: " lebar:100em. Hanya ada dua pengecualian di mana Anda dapat membiarkan satuan tidak ditentukan: tinggi garis dan nilai 0. Jika tidak, Semua lainnya nilai harus diikuti dengan 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#content { /* deklarasi */ }
fieldset.details { /* deklarasi */ }
dapat ditulis sebagai
#content { /* deklarasi */ }
.details { /* deklarasi */ }
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;
}