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 memiliki fetish 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:
#container{padding-top:5pxpadding-kanan:10pxpadding-bawah:30pxpadding-kiri:18px}Versi singkat:
#container{padding: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, Front-End Observation juga memiliki beberapa artikel dan tips berharga tentang CSS Sprite.
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-family: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:
#container{margin:5px;padding:5px 10px 30px 18px;}setelah:
#wadah{margin:5px;padding:5px 10px 30px 18px}10 Alat Kompresi CSS Online
Minifier CSS dapat mengotomatiskan sebagian besar pekerjaan membersihkan kode Anda. Banyak dari mereka akan memberi tahu Anda berapa persentase file Anda yang dikompresi, jadi cobalah beberapa untuk melihat mana yang terbaik.
Drive CSS
Pilihan:
Mode kompresi: kompresi rendah, normal, tinggi
Kompresi komentar: tidak ada kompresi, semua, atau lebih lama dari nilai tertentu.
Kompresor CSS
Opsi opsional (Anda dapat memilih Ya atau Tidak untuk masing-masing):
Susun ulang atribut
Kompres warna
Kompres berat font
Pemilih huruf kecil
Hapus ruang yang tidak perlu
Hapus titik koma yang tidak perlu
Arantius
Opsi opsional (Anda dapat memilih Ya atau Tidak untuk masing-masing):
Hapus komentar
Hapus komentar yang panjangnya setidaknya x byte
Satu aturan per baris