Bagaimana Mengoptimumkan CSS dengan Panduan Gaya Kod

Apabila pereka bercakap mengenai panduan gaya, mereka biasanya bermaksud manual yang dipersetujui pada rupa dan rasa yang koheren laman web atau aplikasi, dengan reka bentuk yang baik skim warna, tipografi, dan UI yang digunakan di seluruh projek.

Terdapat satu lagi panduan gaya yang boleh kita gunakan dalam pembangunan web juga, dan ia sama pentingnya tetapi jarang dibincangkan: panduan gaya untuk kod itu sendiri. Panduan gaya kod adalah agak untuk pemaju daripada pereka, dan matlamat utama mereka adalah untuk mengoptimumkan CSS, atau kod lain.

Meletakkan panduan gaya kod yang betul ke dalam penggunaan memberikan kita dengan asas teratur, asas kod yang konsisten, kebolehbacaan kod yang lebih baik, dan kod yang lebih banyak dipelihara. Bukan kebetulan bahawa syarikat teknologi utama, seperti Google, AirBnB, atau Dropbox menggunakannya dengan baik.

Dalam catatan ini, kita akan melihat bagaimana kita boleh mengoptimumkan CSS dengan bijak dengan bantuan panduan gaya kod CSS.

Panduan Gaya Kod vs. Perpustakaan Corak

Dalam industri kami terdapat tahap tertentu ketidakpastian tentang apa yang kita boleh panggil panduan gaya. A List Apart contohnya menggunakannya secara sinonim dengan istilah itu corak perpustakaan dalam artikel ini, tetapi kita boleh bertemu dengan definisi seperti ini dalam jawatan lain juga.

Sebaliknya, terdapat juga penerbitan, seperti CSS Tricks atau blog Brad Frost, yang membezakan panduan gaya kod dari perpustakaan corak. Pendekatan yang terakhir ini mungkin membawa kita lebih dekat ke laman web yang dioptimumkan, sebagai ia membolehkan kita mengendalikan kod dan reka bentuk secara berasingan, jadi kami akan menggunakannya dalam jawatan ini.

Kedua-dua panduan gaya kod dan perpustakaan corak termasuk strategi gaya, tetapi jenis yang berbeza. Perpustakaan corak, seperti Bootstrap, Yayasan Zurb, Bahasa Pengalaman Global BBC, atau perpustakaan corak MailChimp, memberi kami UI dengan kelas CSS premi, tipografi, skema warna, kadang kala sistem grid dan corak reka bentuk lain.

Panduan gaya kod CSS, seperti Evernote atau ThinkUp (atau yang disebut dalam intro) mengandungi peraturan mengenai cara menulis CSS termasuk perkara seperti penamaan konvensyen, struktur fail, perintah harta, pemformatan kod, dan lain lain.

Perhatikan bahawa penjana panduan gaya hidup, seperti KSS, Styledown, atau Makmal Corak, menjana perpustakaan corak dan tidak panduan gaya pengekodan. Walaupun perpustakaan corak juga sangat berguna dan meningkatkan proses pembangunan web, mereka tidak membenarkan kami untuk mengoptimumkan kod itu sendiri.

Bina Panduan Gaya CSS CSS Anda

Matlamat akhir panduan gaya kod CSS adalah untuk memastikan kita boleh bekerja dengan asas kod yang konsisten dan mudah debuggable yang ditulis oleh pemaju yang semua mengikut peraturan gaya kod yang sama. Mewujudkan panduan gaya kod CSS mungkin mengambil sedikit masa tetapi ia berbaloi, kerana kita hanya perlu melakukannya sekali sahaja. Kemudian kita boleh menggunakan panduan gaya yang sama merentasi projek yang berbeza.

Penting untuk diperhatikan bahawa panduan gaya terbaik bukan sahaja mengandungi peraturan gaya sendiri, tetapi juga contoh penggunaan yang baik dan buruk, dengan cara ini para pemaju dapat lebih intuitif memahami peraturan.

Sebagai contoh, AirBnB menunjukkan contoh yang baik dan buruk kepada pemaju dengan cara mudah mudah digali seperti berikut:

Struktur Fail

Pertama, kita perlu memikirkan logik yang akan kami atur fail CSS kami. Untuk projek yang lebih kecil satu fail CSS mungkin cukup, tetapi untuk yang lebih besar itu sentiasa lebih baik untuk memecah kod, dan menggabungkan fail berasingan kemudian dalam pengeluaran.

Beberapa panduan gaya seperti ThinkUp, juga memberi amaran kepada kami tidak menggunakan gaya sebaris atau tertanam melainkan ia tidak dapat dielakkan; ia juga merupakan peraturan yang berguna yang dikenakan.

Sarang

Sarang adalah ciri yang hebat dalam CSS, tetapi kadang-kadang ia boleh keluar dari kawalan. Tidak ada yang berasa gembira, terutama di tengah-tengah proses debugging yang mengecewakan, menimpa pemilih yang lebih panjang seperti ini:

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

Oleh itu, ia sentiasa baik menetapkan had bersarang yang munasabah, contohnya GitHub memilih tiga tahap dalam panduan gayanya. Dengan mengehadkan sarang kita juga boleh memaksa diri kita untuk menulis kod berstruktur yang lebih baik.

Kaedah Menamakan

Menggunakan peraturan penamaan yang koheren untuk pemilih CSS adalah penting jika kita mahu memahami kod angka kami atau bahkan beberapa tahun kemudian. Terdapat banyak penyelesaian di luar sana, dan hanya ada satu peraturan yang ketat yang perlu kita ikuti iaitu nama pemilih tidak boleh bermula dengan nombor.

Empat gaya biasa yang digunakan dalam pemilih pemilih adalah .huruf kecil, .under_scores, .dash-es, dan .lowerCamelCase. Tidak apa-apa untuk memilih salah satu daripada mereka tetapi kita perlu mengikuti logik yang sama di seluruh projek.

Menggunakan hanya nama pemilih semantik juga penting jika kita mahu mempunyai kod yang bermakna. Sebagai contoh, bukannya .merah-butang (yang tidak menunjukkan apa yang dilakukan oleh butang) lebih baik untuk menggunakannya .butang isyarat nama (yang mengatakan apa yang dilakukannya), dengan cara ini, kami membolehkan pemaju (dan masa depan kita) untuk memahami apa kata butang itu.

Selain itu jika kita mahu menukar warna dari merah ke sesuatu yang lain pada masa akan datang, kita boleh dengan mudah melakukannya tanpa kesulitan. Terdapat juga konvensyen penamaan CSS premade, seperti konvensyen BEM (Blok, Elemen, Pengubah), itu menghasilkan struktur penamaan yang konsisten dengan nama yang unik dan bermakna.

Memformat Peraturan

Pemformatan kod mengandungi perkara-perkara seperti penggunaan ruang kosong, tab, lekukan, jarak, laluan baris, dan sebagainya. Tidak ada cara yang benar-benar baik atau buruk dalam pemformatan, satu-satunya peraturan adalah untuk pilih peraturan koheren yang menghasilkan kod yang boleh dibaca, dan ikuti mereka melalui.

Dropbox misalnya memerlukan pemaju untuk meletakkan ruang selepas kolon dalam perisytiharan harta, manakala Evernote menggunakan dua ruang untuk indentasi. Kita boleh menetapkan peraturan pemformatan yang banyak seperti yang kita selesaikan, tetapi tidak lebih daripada mungkin untuk memahami.

Perintah Perisytiharan

Perkara-perkara yang diperintahkan sentiasa mudah dilihat, dan memerintahkan pengisytiharan CSS (sifat dengan nilai mereka) mengikut peraturan yang masuk akal dalam kod yang lebih teratur.

Perhatikan contoh peraturan tempahan harta WordPress, ia mentakrifkan dasar asas yang mudah tetapi logik berikut untuk menempah di mana sifat dikumpulkan mengikut makna mereka:

1. Paparan
2. Kedudukan
3. Model kotak
4. Warna dan Typography
5. Lain-lain

Unit dan Nilai

Memutuskan bagaimana kami mahu menggunakan unit dan nilai bukan sahaja penting untuk mencapai rupa kod yang konsisten, tetapi juga jika kami tidak berbuat demikian, kami mungkin berakhir dengan sesuatu yang pelik

Bayangkan sebuah laman web yang menggunakan secara bergantian px, em, dan rem ukuran panjang. Ia bukan sahaja akan kelihatan buruk dalam editor kod, tetapi kemungkinan besar beberapa unsur akan menghairankan kecil atau besar di laman web tersebut.

Kita juga perlu membuat keputusan mengenai nilai warna (hexadecimal, rgb, atau hsl), dan sama ada kita mahu menggunakan sifat-sifat singkatan dan mengikut peraturan mana. Terdapat arahan yang dimasukkan dalam setiap panduan gaya CSS CSS yang saya bumped into, i.e. jangan tentukan unit untuk 0 nilai (sememangnya, tidak).

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

Mengulas

Mengulas kod penting dalam semua bahasa, tetapi dalam CSS ia bukan sahaja memudahkan debugging dan membuat dokumentasi, tetapi juga seksyen peraturan CSS ke dalam kumpulan logik. Kita boleh menggunakan sama ada / * ... * / atau // ... gaya notasi untuk komen dalam CSS, perkara penting ialah tetap konsisten dengan komen sepanjang projek kami.

CSS idiom contohnya menetapkan sistem komen yang bermakna yang bahkan menggunakan beberapa seni ASCII asas, dan menghasilkan kod teratur yang indah: