Teks asli |. melalui: 9 Tips untuk File CSS yang Lebih Kecil & Dioptimalkan
Pengarang|Penulis: Stefan Vervoort
Terjemahan|Trans: Luc
Karena file CSS dimuat di bagian atas halaman web, setiap pengunjung mendownload file ini. Kami akan mengoptimalkan file dan gambar PHP, tetapi sering mengabaikan file CSS. Hari ini kita harus memikirkan masalah ini dan melakukan sesuatu untuk mengatasinya.
Dimungkinkan untuk mengoptimalkan CSS menggunakan pengoptimal CSS, tetapi menurut saya efisiensi dan daya akan ditingkatkan jika Anda menulis kode menggunakan teknik yang disebutkan di bawah.
Mengoptimalkan file CSS juga dapat menghemat lalu lintas dan meningkatkan kecepatan pemuatan halaman.
1. Komentar Komentar sangat berguna ketika menulis CSS agar rekan kerja yang bekerja sama dapat memahami arti dari kode tersebut. Ada banyak cara untuk membuat anotasi, Anda dapat menggunakan cara berikut:
/*-----*/
/*-----Komentar-------*/
/*-----*/
Anda juga dapat menggunakan metode berikut:
/*Komentar*/
Ini menghemat 20 karakter, dan dengan asumsi ada 15 komentar, ini menghemat 300 karakter.
2. Kode warna yang disingkat Kode warna ditentukan dengan kode HEX, yang berisi 6 karakter, namun dalam beberapa kasus, 3 karakter dapat digunakan sebagai gantinya. Lihatlah contoh berikut:
div{ warna: #ffffff; } /* Kode pendek: warna:#fff;
div{ warna: #ff88ff; } /* Kode pendek: warna:#f8f;
div{ color: #f8f7f2; } /* Tidak ada kode pendek yang memungkinkan */
3. Menggabungkan elemen. Misalnya, jika ada sekumpulan elemen seperti h2, h3, dan h4, dan semuanya memiliki atribut yang sama dan hanya beberapa atribut yang berbeda, maka Anda dapat menuliskannya sebagai berikut:
h2, h3, h4 {
bantalan:0;
margin:0;
warna:#333;
spasi huruf:.05em;
spasi kata: 0,1em;
}
h2{ ukuran font:1.2em;
h3{ ukuran font:1.1em;
h4{ ukuran font:1em }
Ini menggabungkan elemen dengan atribut yang sama sambil mendeklarasikan atribut ukuran font yang berbeda. Dapat menghemat banyak ruang.
4. Bila nilainya 0, Out Px/Em/% dihilangkan.
0 tidak memerlukan tanda Px, Em dan persen. Ketika nilai Anda adalah 0 (yang saya asumsikan akan Anda gunakan), menghilangkan unit akan menghemat karakter dua kali lebih banyak.
div{ bantalan: 0px 5px 5px 10px }
/* Singkatan: bantalan: 0 5px 5px 10px */
5. Penggabungan atribut. Beberapa atribut seperti padding, margin dan border dapat ditulis secara terpisah. Misalnya: padding-atas, padding-kanan, padding-bawah dan padding-kiri.
Jika memungkinkan, gabungkan keduanya agar lebih mudah ditulis dan menghemat ruang.
div{
padding-kiri:0 ;
padding-atas:50px;
padding-bawah:23px;
bantalan-kanan:4px; }
/* Singkatan: padding:50px 4px 23px 0;
Jika nilai atas dan bawah sama serta nilai kiri dan kanan sama, Anda dapat menulis:
div{
padding-atas:5px;
bantalan-bawah:5px;
padding-kiri:0 ;
bantalan-kanan:0px; }
/* Singkatan: padding:5px 0; */
6. Pilih Kelas/ID dengan bijak
Nama Kelas dan ID yang dipilih harus sesingkat, mudah dipahami, dan bermakna mungkin.
Hindari memilih nama seperti "HeaderMiddleLeftCategories", gunakan "h-cats" sebagai gantinya. Ini menghemat banyak karakter.
7. Bersihkan file CSS untuk menghemat ruang. Saat membangun situs web dengan CSS, kode tertulis mungkin berfungsi atau tidak, dan memakan banyak ruang. File CSS harus diperiksa seluruhnya untuk menemukan kesalahan dan kode yang tidak valid untuk menghemat ruang.
8. Hapus titik koma dari atribut terakhir di pemilih. Ini adalah trik yang saya temukan menggunakan kompresor CSS. Lihat contoh ini:
tubuh{
latar belakang:#ccc;
warna:#333; }
/* Kode pendek: warna:#333 */Lihat, saya menghapus titik koma terakhir. Efeknya mungkin tidak terlihat jelas, tetapi sedikit bertambah. 50 penyeleksi berarti 50 karakter.
9. Hapus spasi dan gerbong yang tidak berguna Anda mungkin ingin menghapus semua spasi dan gerbong karena hanya memakan satu karakter. Namun masalahnya adalah hal ini merusak struktur CSS dan mengurangi keterbacaan.
Saya biasanya tidak melakukan ini ketika mengoptimalkan file CSS karena struktur lebih penting bagi saya. Berikut komprominya, gunakan file di website yang tidak mengandung carriage return dan spasi. Menyimpan file yang berisi carriage return dan spasi secara lokal membuat pengeditan menjadi sangat nyaman.
Kesimpulan Jika Anda ingin mengoptimalkan file CSS sepenuhnya, saya sarankan menggunakan kompresor CSS, sehingga Anda dapat mempelajari sendiri keterampilan di atas dan meningkatkan kecepatan penulisan dan kualitas kode CSS.
Jika Anda memiliki tips lain, silakan tinggalkan pesan.