Minifikasi CSS: Tip dan Alat

Belajar menulis CSS yang bersih dan optimal membutuhkan banyak latihan dan keinginan yang tidak disadari dan kompulsif untuk membersihkannya. Menjaga CSS Anda tetap rapi bukan hanya tentang kebutuhan psikologis Anda yang gila akan kebersihan, namun, terutama untuk situs yang lebih besar, ini akan membuat halaman dimuat lebih cepat. Waktu muat yang lebih cepat berarti peningkatan kegunaan dan kepuasan pengguna yang lebih tinggi.

Banyak orang mengalami histeria kode. Ini bukanlah hal yang buruk.

Artikel ini akan merangkum teknik yang dapat Anda gunakan untuk mengoptimalkan CSS Anda, serta beberapa alat kompresi online dan desktop yang dapat mengompresi kode Anda secara otomatis.

Untuk mengompres atau tidak

Sebelum kita membahas cara mengompresi CSS, penting untuk dicatat bahwa sering kali ada keseimbangan antara kompresi dan keterbacaan kode. Banyak pembuat kode bangga dengan pengaturan CSS mereka yang bersih dan tidak ingin kode mereka dijalankan melalui kompresor untuk menghapus komentar dan jeda baris. Sebagai seorang desainer, Anda harus menganalisis tujuan dari kode yang Anda tulis. Jika Anda membuat website kecil yang hanya membutuhkan beberapa baris CSS, mungkin tidak perlu melakukan kompresi tambahan. Demikian pula, jika Anda menulis kode yang perlu dibagikan dengan tim terbuka, memasukkan komentar tambahan dan jeda baris dapat menghemat banyak waktu kolega Anda dan mendapatkan ucapan terima kasih yang tulus. Namun, jika Anda mendesain situs web besar yang membutuhkan banyak CSS, Anda pasti ingin memperhatikan ukuran file Anda dan menjaganya sekecil mungkin.

Mungkin perlu waktu untuk menemukan kombinasi sempurna antara kompresi dan kemungkinan, namun keduanya layak untuk ditelusuri dan mencapai keseimbangan di antara keduanya dapat membuat pekerjaan Anda jauh lebih mudah. Pada saat yang sama, jelas bahwa kompresi tidak serta merta menyebabkan penurunan keterbacaan. Ada banyak teknik yang tersedia untuk mengompresi kode sehingga menghasilkan kode yang lebih baik dan terorganisir.

Oleh karena itu, mari kita mulai dengan melihat beberapa teknik untuk menjaga file CSS tetap minimal.

Definisi gaya kosong

Mari kita mulai dengan yang sudah jelas. Jika Anda memiliki gaya kosong, buang saja. Jangan membuat alasan bahwa Anda mungkin membutuhkannya nanti dan Anda tahu itu berantakan. Jangan menambahkannya kecuali Anda memiliki alasan yang sah.

singkatan

Singkatan CSS adalah cara menggabungkan beberapa baris CSS menjadi satu baris. Membiasakan diri menggunakan semua trik singkatan yang Anda tahu dapat mengurangi jumlah baris kode yang akhirnya Anda tulis secara signifikan. Berikut ini contohnya:

Versi panjang:

 #wadah {
    padding-atas : 5px
    padding-kanan : 10px
    padding-bawah : 30px
    padding-kiri : 18px
}

Versi singkat:

 #wadah {
    bantalan : 5px 10px 30px 18px ;
}

Untuk mempelajari lebih lanjut tentang singkatan CSS, Anda dapat mengunjungi artikel berikut ini:

Sprite CSS

Ide awal di balik sprite CSS adalah untuk mengurangi jumlah permintaan HTTP untuk mempercepat waktu pemuatan halaman. Cara Sprite mencapai tujuan ini adalah dengan menggabungkan beberapa gambar ke dalam satu file gambar, biasanya gambar berformat grid. Setiap gambar individual ditampilkan dengan mengganti posisi latar belakang gambar sprite yang lebih besar. Untuk kode CSS, penggunaan teknologi sprite dapat meningkatkan kegunaan kembali dan pemeliharaan kode secara signifikan, yang akan mengurangi jumlah kode CSS secara signifikan.

Untuk mempelajari lebih lanjut tentang Sprite CSS, lihat tutorial Chris Coyier tentang Trik CSS:

Tentu saja, Pengamatan Front-End juga memiliki beberapa artikel dan tips berharga tentang Sprite CSS .

Kurangi komentar

Saya suka menggunakan komentar dalam kode saya. Semakin banyak komentar yang saya tambahkan, semakin cepat saya dapat menavigasi berbagai bagian kode secara visual. Namun, jika Anda memerlukan CSS yang sangat optimal dan menggunakan sedikit sumber daya, komentar berlebihan akan menghabiskan byte yang berharga. Jadi, cobalah untuk menghapus semua komentar yang tidak perlu dan format ulang komentar yang harus Anda simpan ke byte sesedikit mungkin.

Jenis font yang masuk akal (font-Family)

Jika ukuran file menjadi masalah besar, jangan sertakan font alternatif di font-famly Anda. Singkirkan bagasi yang tidak perlu dan kurangi opsi tambahan Anda menjadi satu atau dua.

Sebelum:

 #container { font-family : Palatino , Georgia , Times , serif }

setelah:

 #container { font-keluarga : Palatino , serif }

Mengenai font, saya sangat menyarankan membaca " Tiga Pembicaraan tentang Font Default Web " yang ditulis oleh Yu Bo. Beberapa artikel yang disebutkan dalam artikel tersebut juga layak untuk dibaca dan dipikirkan.

Gunakan warna heksadesimal

Untuk mengurangi jumlah byte, semua nilai warna RGB diubah menjadi nilai heksadesimal yang sesuai. Ini mungkin tidak berarti banyak pada awalnya, tetapi byte apa pun sepadan!

Sebelum:

 #wadah { warna : rgb ( 131 , 100 , 219 ) } ;

setelah:

 #wadah { warna : # 8364DB ;

Hapus jeda baris

Periksa setiap atribut gaya dan hapus semua pengembalian sulit yang tidak diperlukan. Anda juga dapat menghapus titik koma terakhir.

Sebelum:

 #wadah {
    margin : 5 piksel ;
    bantalan : 5px 10px 30px 18px ;
}

setelah:

 #wadah { margin : 5 piksel ; bantalan : 5 piksel 10 piksel 30 piksel 18 piksel }