Singkatan CSS dapat secara efektif mengurangi ukuran file CSS

Metrik utama kegunaan situs web adalah kecepatan, atau lebih tepatnya, seberapa cepat suatu halaman muncul di jendela browser pengunjung. Ada banyak faktor yang mempengaruhi kecepatan, termasuk kecepatan server web Anda, koneksi Internet pengunjung Anda, dan ukuran file yang harus diunduh browser. Meskipun Anda tidak dapat mengontrol kecepatan server dan koneksi Anda, Anda dapat mengontrol ukuran file yang membentuk halaman web situs Anda.
Untuk membuat situs web lebih cepat, pembuat web secara rutin mengompresi dan mengoptimalkan setiap file gambar di situs web mereka, sering kali mengorbankan kualitas gambar untuk mengurangi ukuran file hingga beberapa poin persentase. Karena style sheet CSS adalah file teks biasa dan ukurannya relatif kecil dibandingkan gambar, pembuat web jarang mempertimbangkan untuk mengambil langkah untuk mengurangi ukuran file style sheet CSS mereka. Namun, dengan menggunakan singkatan CSS dan trik sederhana lainnya, Anda dapat mengurangi sebagian besar ukuran style sheet Anda. Dalam pengujian ad hoc informal pada stylesheet saya sendiri, saya mengurangi ukuran file sekitar 25-50%.

Menggunakan sifat CSS yang disingkat

Properti singkatan CSS adalah nama properti khusus yang digunakan untuk menggantikan beberapa kumpulan properti terkait. Misalnya, properti padding adalah kependekan dari padding-top, padding-right, padding-bottom, dan padding-left.

Menggunakan properti singkatan memungkinkan Anda mengompresi beberapa pasangan properti/atribut menjadi satu baris kode dalam stylesheet CSS. Misalnya, perhatikan kode berikut:


Menggantinya dengan beberapa properti singkatan dapat mengurangi kode menjadi berikut, efek sebenarnya dari keduanya persis sama:


Perhatikan bahwa properti yang disingkat juga memiliki beberapa properti, yang masing-masing berhubungan dengan properti biasa yang digabungkan menjadi properti yang disingkat. Properti dipisahkan oleh spasi.
Jika properti memiliki nilai serupa, misalnya untuk pengukuran linier properti margin, urutan properti yang mengikuti properti yang disingkat menjadi penting. Urutan atribut dimulai dari atas (batas atas kosong) dan berlanjut searah jarum jam di sekeliling kotak.
Jika semua properti dari properti singkatan sama, Anda cukup membuat daftar properti tunggal dan menyalinnya empat kali di depannya. Oleh karena itu, dua properti berikut ini sama:


Demikian pula, Anda dapat merepresentasikan pasangan properti atas/bawah dan kanan/kiri menggunakan dua properti yang mengikuti properti margin atau spasi.


Urutan atribut tidak penting jika nilainya berbeda. Oleh karena itu, properti seperti warna batas, gaya batas, dan lebar batas dapat mengikuti properti garis dalam urutan apa pun. Mengabaikan atribut sama dengan menghilangkan properti umum terkait dari aturan gaya.
Di bawah ini adalah daftar properti singkatan CSS dan properti umum yang diwakilinya.

Latar Belakang: lampiran latar belakang, warna latar belakang, gambar latar belakang, posisi latar belakang, pengulangan latar belakang
Batas: warna batas, gaya batas, lebar batas
border-bottom (batas bawah): warna batas bawah, gaya batas bawah, lebar batas bawah
border-left (batas kiri): warna batas kiri, gaya batas kiri, lebar batas kiri
border-right (batas kanan): warna batas kanan, gaya batas kanan, lebar batas kanan
border-top (batas atas): warna batas atas, gaya batas atas, lebar batas atas
isyarat (isyarat suara): pra-isyarat, pasca-isyarat
font: font, ukuran font, gaya font, berat font, varian font, tinggi garis, penyesuaian ukuran font, peregangan font
gaya daftar: gambar gaya daftar, posisi gaya daftar, tipe gaya daftar
margin (kosong): margin atas, margin kanan, margin bawah, margin kiri
outline: warna outline, gaya outline, lebar outline
padding: celah atas, celah kanan, celah bawah, celah kiri
jeda: jeda setelah, jeda sebelumnya

Kurangi ruang putih

Cara lain untuk mengurangi ukuran stylesheet CSS adalah dengan menghapus sebagian besar spasi yang tidak perlu dari dokumen. Dengan kata lain, masukkan setiap aturan yang dipecah ke dalam satu baris kode, yaitu menghapus baris baru dan indentasi yang awalnya dimasukkan ke dalam kode untuk memisahkan setiap properti/atribut ke dalam baris terpisah.
Misalnya, contoh kode berikut memiliki konten yang identik, tetapi contoh kode kedua jauh lebih halus:


hapus komentar

Menghapus komentar dari kode CSS Anda adalah cara lain untuk mengurangi ukuran file. Meskipun komentar berguna untuk membaca kode, komentar tersebut tidak membantu browser menghasilkan halaman web Anda. Banyak pembuat web yang terbiasa mengomentari setiap baris kode, atau setidaknya setiap pernyataan aturan. Komentar murah hati seperti itu jarang diperlukan dalam stylesheet CSS karena sebagian besar properti dan properti CSS mudah dibaca dan dipahami. Jika Anda menggunakan nama yang bermakna untuk kelas, ID, dan pemilih lainnya, Anda dapat menghilangkan sebagian besar komentar sambil tetap menjaga kode Anda tetap dapat dibaca dan dipelihara.


Menggunakan properti steno, menghapus spasi yang tidak berguna, dan menghilangkan komentar dapat sangat mengurangi ukuran file style sheet CSS Anda. Hal ini pada gilirannya akan memberikan kontribusi yang kecil, namun berpotensi terlihat, terhadap tujuan keseluruhan untuk mempercepat situs Web Anda.