Cara Mengoptimalkan CSS dengan Panduan Gaya Kode

Ketika desainer berbicara tentang panduan gaya, mereka biasanya bermaksud manual yang disepakati di tampilan dan nuansa yang koheren dari situs web atau aplikasi, dengan yang dirancang dengan baik skema warna, tipografi, dan UI yang digunakan di seluruh proyek.

Ada jenis lain dari panduan gaya yang dapat kita gunakan dalam pengembangan web juga, dan itu sama pentingnya tetapi lebih jarang dibahas: panduan gaya untuk kode itu sendiri. Panduan gaya kode lebih untuk pengembang daripada desainer, dan tujuan utama mereka adalah untuk mengoptimalkan CSS, atau kode lainnya.

Menerapkan panduan gaya kode yang tepat memberi kita lebih terorganisir, basis kode yang konsisten, pembacaan kode yang lebih baik, dan kode yang lebih dapat dikelola. Bukan kebetulan bahwa perusahaan teknologi besar, seperti Google, AirBnB, atau Dropbox memanfaatkannya dengan baik.

Dalam posting ini kita akan melihat bagaimana kita dapat secara pintar mengoptimalkan CSS kita dengan bantuan panduan gaya kode CSS.

Panduan Gaya Kode vs. Perpustakaan Pola

Dalam industri kami ada tingkat ketidakpastian tertentu tentang apa yang bisa kita sebut panduan gaya. Terlepas dari Daftar misalnya menggunakannya secara sinonim dengan istilah tersebut perpustakaan pola dalam artikel ini, tetapi kita dapat menemukan definisi seperti ini di posting lain juga.

Di sisi lain, ada juga publikasi, seperti Trik CSS atau blog Brad Frost, yang membedakan panduan gaya kode dari pustaka pola. Pendekatan terakhir ini mungkin membawa kita lebih dekat ke situs web yang dioptimalkan dengan baik itu memungkinkan kita untuk menangani kode dan desain secara terpisah, jadi kami akan menggunakan ini dalam posting ini.

Panduan gaya kode dan pustaka pola menyertakan strategi gaya, tetapi jenis yang berbeda. Pustaka pola, seperti Bootstrap, Zurb Foundation, Global Experience Language BBC, atau pustaka pola MailChimp, memberi kami UI dengan kelas CSS premade, tipografi, skema warna, kadang-kadang sistem grid dan pola desain lainnya.

Panduan gaya kode CSS, seperti Evernote's atau ThinkUp's (atau yang disebutkan dalam intro) berisi aturan tentang cara menulis CSS termasuk hal-hal seperti konvensi penamaan, struktur file, pesanan properti, pemformatan kode, dan lain-lain.

Perhatikan bahwa generator panduan gaya hidup, seperti KSS, Styledown, atau Pattern Lab, menghasilkan pustaka pola dan tidak panduan gaya pengkodean. Walaupun pustaka pola juga sangat bermanfaat dan meningkatkan proses pengembangan web, pustaka tidak memungkinkan kami untuk mengoptimalkan kode itu sendiri.

Bangun Panduan Gaya Kode CSS Anda

Tujuan akhir dari panduan gaya kode CSS adalah untuk memastikan kami dapat bekerja dengan basis kode yang konsisten dan mudah ditukar yang ditulis oleh pengembang yang semuanya mengikuti aturan gaya kode yang sama. Membuat panduan gaya kode CSS mungkin memerlukan sedikit waktu, tetapi itu sepadan dengan usaha, karena kita hanya perlu melakukannya sekali. Kemudian kita dapat menggunakan panduan gaya yang sama di berbagai proyek.

Penting untuk dicatat bahwa panduan gaya terbaik tidak hanya berisi aturan gaya sendiri, tetapi juga contoh penggunaan yang baik dan buruk, karena cara ini pengembang dapat lebih memahami aturan secara intuitif.

Misalnya AirBnB menunjukkan contoh baik dan buruk kepada pengembang dengan cara yang mudah dicerna berikut:

Struktur File

Pertama, kita perlu mencari tahu logika yang dengannya kita akan mengatur file CSS kita. Untuk proyek yang lebih kecil satu file CSS mungkin cukup, tetapi untuk yang lebih besar itu selalu lebih baik untuk memecah kode, dan menggabungkan file-file terpisah nanti dalam produksi.

Beberapa panduan gaya seperti ThinkUp's, juga memperingatkan kita tentang tidak menggunakan gaya sebaris atau disematkan kecuali itu tidak bisa dihindari; itu juga aturan yang berguna yang layak diterapkan.

Bersarang

Nesting adalah fitur hebat di CSS, tetapi kadang-kadang bisa lepas kendali. Tidak ada yang merasa sangat senang, terutama di tengah proses debugging frustasi, menabrak penyeleksi ekstra panjang seperti ini:

 .class_1 .class_2 # id_1 # id_2 li span color: #bad; 

Jadi selalu baik untuk itu mengatur batas bersarang yang masuk akal, misalnya GitHub memilih tiga level dalam panduan gayanya. Dengan membatasi bersarang, kita juga dapat memaksa diri kita untuk menulis kode terstruktur yang lebih baik.

Aturan Penamaan

Menggunakan aturan penamaan yang koheren untuk pemilih CSS sangat penting jika kita ingin memahami kode kita beberapa bulan atau bahkan bertahun-tahun kemudian. Ada banyak solusi di luar sana, dan hanya ada satu aturan ketat yang harus kita ikuti mis. nama pemilih tidak dapat dimulai dengan angka.

Empat gaya umum yang digunakan dalam penamaan pemilih adalah .huruf kecil, .under_scores, .tanda hubung, dan .lowerCamelCase. Tidak apa-apa untuk memilih salah satu dari mereka tetapi kita harus mengikuti logika yang sama di seluruh proyek.

Menggunakan hanya nama pemilih semantik juga penting jika kita mau memiliki kode yang bermakna. Misalnya, bukannya .tombol merah (yang tidak menunjukkan apa tombolnya) lebih baik menggunakan .tombol waspada nama (yang mengatakan apa yang dilakukannya), karena dengan cara ini, kami memungkinkan pengembang (dan diri kami di masa depan) untuk memahami apa yang dilakukan tombol.

Bahkan jika kita ingin mengubah warnanya dari merah menjadi sesuatu yang lain di masa depan, kita dapat dengan mudah melakukannya tanpa kerumitan. Ada juga konvensi penamaan CSS premade, seperti konvensi BEM (Block, Element, Modifier), itu menghasilkan struktur penamaan yang konsisten dengan nama yang unik dan bermakna.

Aturan Pemformatan

Pemformatan kode mencakup hal-hal seperti penggunaan spasi putih, tab, indentasi, spasi, jeda baris, dll. Tidak ada metode universal baik atau buruk dalam memformat, satu-satunya aturan praktis adalah untuk pilih aturan yang koheren yang menghasilkan kode yang dapat dibaca, dan ikuti mereka.

Dropbox misalnya mengharuskan pengembang untuk menempatkan spasi setelah tanda titik dua dalam deklarasi properti, sementara Evernote menggunakan dua spasi untuk lekukan. Kita dapat mengatur sebanyak mungkin aturan pemformatan yang nyaman bagi kita, tetapi tidak pernah lebih dari itu untuk dipahami.

Perintah Deklarasi

Hal-hal yang dipesan selalu lebih mudah dilihat, dan memesan deklarasi CSS (properti dengan nilainya) menurut aturan yang masuk akal menghasilkan kode yang lebih terorganisir.

Lihatlah misalnya aturan pemesanan properti WordPress, itu mendefinisikan garis dasar sederhana namun logis berikut untuk pemesanan di mana properti dikelompokkan berdasarkan artinya:

1. Tampilan
2. Penentuan posisi
3. Model kotak
4. Warna dan Tipografi
5. Lain

Unit dan Nilai

Memutuskan bagaimana kita ingin menggunakan unit dan nilai tidak hanya penting untuk mencapai tampilan kode yang konsisten, tetapi juga jika kita tidak melakukannya, kita mungkin berakhir dengan sesuatu yang aneh

Bayangkan saja situs yang digunakan secara bergantian px, em, dan rem pengukuran panjang. Itu tidak hanya akan terlihat buruk di editor kode, tetapi kemungkinan besar beberapa elemen akan mengejutkan kecil atau besar di situs itu.

Kita juga perlu membuat keputusan tentang nilai warna (heksadesimal, rgb, atau hsl), dan apakah kita ingin menggunakan properti steno dan sesuai dengan aturan mana. Ada instruksi yang termasuk dalam setiap panduan gaya kode CSS yang saya temui, yaitu. jangan tentukan unit untuk 0 nilai (sungguh, tidak perlu).

.class // margin bagus: 0; // margin buruk: 0px; // margin buruk: 0em; // margin buruk: 0rem; 

Mengomentari

Kode komentar sangat penting dalam semua bahasa, tetapi dalam CSS itu tidak hanya memfasilitasi pembuatan debug dan dokumentasi, tetapi juga bagian aturan CSS ke dalam kelompok logis. Kita bisa menggunakan keduanya / * ... * / atau // ... gaya notasi untuk komentar dalam CSS, yang penting adalah tetap konsisten dengan komentar di seluruh proyek kami.

CSS idiomatis misalnya membangun sistem komentar yang bermakna yang bahkan menggunakan beberapa seni ASCII dasar, dan menghasilkan kode yang terorganisir dengan indah: