Ketika kita menghadapi file css dan javascript yang semakin besar dalam proyek situs web, baik untuk pengembangan sekunder atau penguraian browser, kodenya harus dioptimalkan, namun pengoptimalan tidak berarti sekadar mengompresi atau mengurangi ukuran file. Organisasi yang jelas dan efisiensi operasional yang tinggi adalah hasil yang kami inginkan. Jadi metode apa yang ada untuk meningkatkan kode css kita? Mari kita lihat beberapa saran di bawah ini.
1. Menggunakan
singkatan dapat mempersingkat waktu kerja Anda dan memperkecil ukuran file Anda Mengapa tidak?
Tetapkan nilai berbeda untuk perbedaan serupa:
lihat salinan biasa ke cetak papan klip?
P {
margin-atas: 10 piksel;
margin-kanan: 20 piksel;
margin-bawah: 30 piksel;
margin-kiri: 40 piksel;
}
P {
margin-atas: 10 piksel;
margin-kanan: 20 piksel;
margin-bawah: 30 piksel;
margin-kiri: 40 piksel;
}
Gunakan singkatan:
lihat salinan biasa ke cetak papan klip?
p { margin: 10px 20px 30px 40px }
p { margin: 10px 20px 30px 40px }
Mari kita lihat singkatan dari font yang umum digunakan
Lihat Panduan Singkatan CSS (Bahasa Inggris) dan CSS Efisien dengan properti steno (Bahasa Inggris) untuk mempelajari lebih lanjut tentang properti steno.
2. Hindari menggunakan Hacks
Blog Jon Hick hicksdesign.co.uk/journal Menggunakan komentar bersyarat browser
Peretasan adalah hal yang buruk, ini akan mendefinisikan kode yang sama untuk browser yang berbeda, membuat CSS menjadi rumit. Sekarang kita tahu untuk menggunakan komentar bersyarat daripada peretasan, komentar tersebut diterima di IE6 dan IE7, dan bahkan tim IE merekomendasikan penggunaannya. Gunakan komentar bersyarat untuk menyajikan kode CSS yang khusus untuk fitur browser. Oleh karena itu, kode CSS inti yang lebih kecil digunakan untuk melayani browser yang mematuhi standar. Kode tersebut hanya akan diunduh ketika kondisi yang diperlukan terpenuhi (seperti file CSS tambahan). !
Mari kita lihat contoh kode menggunakan komentar kondisional di IE6:
lihat salinan biasa ke cetak papan klip?
<!--[jika IE 6]>
<link rel="stylesheet" type="text/css" href="ie6.css">
<![endif]-->
<!--[jika YAITU 6]>
<link rel="stylesheet" type="text/css" href="ie6.css">
<![endif]-->
Kode ini menyebabkan IE6 mengunduh ie6.css tambahan untuk mengurai kode css khusus. Demikian pula jika Anda menargetkan IE7, ganti saja 6 dan 7 di atas.
3. Gunakan spasi.
Baik itu untuk bacaan Anda sendiri atau pengembangan sekunder, Anda harus menjaga keterbacaan CSS dengan baik.
Kami tidak menganjurkan Anda untuk menghapus semua format spasi putih, seperti tab, jeda baris, spasi, dll., untuk mendapatkan file CSS yang lebih kecil. Disarankan agar kode bertingkat diindentasi dengan tab, dan semua atribut harus berada pada baris terpisah.
Membandingkan gambar di atas dan di bawah, format manakah yang dapat membantu Anda menghemat lebih banyak waktu dalam modifikasi? Spasi putih akan memudahkan Anda mengelola kode.
4. Hapus kerangka kerja yang berlebihan dan setel ulang
Atur ulang aturan yang digunakan oleh kerangka CSS Sistem 960 Grid Nathan Smith
Jika Anda memilih untuk menggunakan kerangka CSS, termasuk yang Anda tulis sendiri, jika Anda memeriksa kodenya Anda pasti akan menemukan bahwa beberapa aturan yang terdapat dalam kerangka tersebut tidak berlaku untuk Anda saat ini file.dapat dihapus.
Apa yang bisa dipikirkan adalah reset. Reset yang digunakan oleh YUI Grid CSS dan Reset Eric Meyer saat ini sangat populer. Reset dapat menghapus gaya default dari browser yang berbeda sehingga halaman berperilaku konsisten di seluruh browser. Tapi biasanya berisi semua atribut yang dibutuhkan oleh website besar. Beberapa atribut seperti pre, code, sub, dfn, var, dll tidak digunakan sama sekali untuk website biasa. Hapus saja yang tidak bisa Anda gunakan. Eric Meyer akan mendorong Anda untuk melakukan hal yang sama!
Kerangka kerja dan pengaturan ulang akan sangat membantu pekerjaan Anda, tetapi jika Anda tidak menghapus penggunaan yang tidak Anda perlukan, hal itu akan menurunkan efisiensi dan keterbacaan halaman Anda.
5. CSS yang diperluas
Stopdesign.com CSS oleh Doug Bowman Gunakan penyeleksi khusus untuk lapisan
Cara lain untuk mengoptimalkan kode Anda adalah dengan mendeklarasikan properti spesifik untuk setiap lapisan.
6. Dokumentasikan pekerjaan Anda
Dalam kolaborasi tim, sangat penting untuk mengomunikasikan standar penulisan, standar pengkodean, metode anotasi, dan gaya. Aturan didasarkan pada pendekatan yang konsisten terhadap standar. Ini akan mencegah orang lain menduplikasi pekerjaan yang telah Anda lakukan dan mencegah perluasan kode.
7. Gunakan kompresi
Untuk menghemat lebih banyak waktu pengunduhan dan pemuatan browser, kompresi adalah solusi yang baik, tetapi hanya saat dipublikasikan. Kompresor YUI dan CSSTidy ahli dalam bidang ini. Mereka dapat menghapus kode yang berlebihan dan memverifikasi kesalahan ketika properti saling tumpang tindih.
Banyak editor populer, seperti BBEdit, TextMate, dan TopStyle, dapat membantu Anda memformat kode CSS sesuai keinginan Anda. Anda juga dapat menggunakan PHP untuk memproses CSS Anda melalui teknologi kompresi server. Anda dapat menemukan lebih banyak alat optimasi CSS dan kompresi CSS.
Pada satu titik, prosedur ini meminimalkan terjadinya kesalahan, namun tidak sempurna. Demikian pula, sebaiknya jangan menggunakannya pada file yang berisi peretasan CSS. Ini adalah alasan lain untuk menyimpan peretasan dalam file terpisah.
Menyelesaikan
------------------------------------------------- ----------------------------------
Kode yang bersih dan dioptimalkan bukan hanya tentang ukuran file Anda, tetapi juga tentang pemeliharaan dan kegunaan. Prinsip di atas tidak hanya berlaku pada CSS saja, bisa juga diterapkan pada HTML, Javascript, dan bahasa pemrograman lainnya. File CSS tidak hanya untuk presentasi kepada pengguna akhir situs web Anda. Prinsip-prinsip di atas dapat membantu pengalaman pengguna dan juga pengalaman pengembang. Terapkan prinsip-prinsip ini pada proyek masa depan Anda dan Anda pasti akan mencapai hasil yang signifikan.