Cara menulis CSS lebih baik dalam pasukan dengan ACSS - Perpustakaan CSS atom yang dinamik

Gambar oleh Štefan Štefančík pada Unsplash

Menulis Lembaran Gaya Cascading yang baik (CSS) adalah sukar dan ia menjadi lebih sukar dalam pasukan di mana beberapa pemaju menulis CSS.

Melalui artikel ini, saya cuba memperkenalkan anda kepada pendekatan untuk menulis (atau tidak menulis ... kita akan lihat) CSS. Pendekatan ini menyelesaikan hampir semua isu yang dihadapi hari ini dengan CSS yang kurang ditulis dalam pasukan.

Tetapi pertama, biarkan saya menetapkan beberapa syarat asas di mana artikel saya berlaku.

Beberapa syarat artikel ini mengandaikan:

  1. Anda sedang bekerja dalam pasukan di mana berbilang pemaju menulis CSS.
  2. Garis panduan sukar dikuatkuasakan melainkan ada alat automatik.
  3. Pereka adalah burung percuma. Pembaharuan semula berlaku.

Di bawah syarat-syarat ini, saya akan mengemukakan penyelesaian peluru perak yang menyelesaikan hampir semua masalah yang kami hadapi disebabkan oleh CSS yang tidak baik (Ingat, CSS tidak buruk. CSS buruk dituliskan). Mari kita lalui masalah tersebut untuk bermula dengan.

Penafian: Saya tidak, dengan cara apa pun, sekutu penyelesaian yang diterangkan dalam artikel ini. Saya hanya seorang pemaju yang merasakan kesakitan CSS yang buruk dalam satu pasukan dan mahu berkongsi dengan rakan-rakan pemaju, pemikiran saya mengenai bagaimana untuk mengatasinya. Artikel ini mungkin berbunyi promosi, tetapi ia hanya kerana saya sangat teruja untuk membawa semua ini.

Masalah # 1: Penamaan kelas adalah sukar

Pemaju 1 (semasa pengekodan): Sepertinya pengepala kepada saya, biar saya gunakan .headerselector untuk itu.

Pemaju 2 (dalam permintaan tarik): Ini bukan tajuk. Ia kelihatan seperti tajuk kepada saya. Selain itu, kita tidak boleh memanggilnya 'header' kerana elemen itu tidak cukup generik. Mari kita panggilnya. Header-tajuk atau lebih baik. Tajuk-tajuk.

Berada dengan nama-nama dan juga nama yang bermakna adalah masalah yang paling sukar untuk diselesaikan. Ia juga merupakan apsect yang paling sukar untuk belajar kerana anda tidak boleh mempunyai panduan untuk apa yang "bermakna" nama. Anda hanya boleh memberi contoh apa yang tidak bermakna, dan itu hanya boleh membantu setakat ini. Selain itu, ia bukan hanya 'makna'. Kelas-kelas dalam CSS juga perlu memastikan mereka tidak bertentangan dengan nama-nama kelas yang lain pada masa akan datang kerana seorang pemaju baru boleh menggunakan nama yang sama atau serupa untuk kelasnya.

Penyelesaian yang tersedia:

  • BEM - penamaan konvensyen seperti BEM wujud untuk menyelesaikan masalah ini sedikit sebanyak. Tetapi pada akhirnya ia merupakan panduan (kita semua tahu betapa mudahnya untuk mengikuti garis panduan). BEM mungkin menghalang anda daripada pergi sepenuhnya ad-hoc tetapi anda masih perlu membuat nama kelas awal untuk komponen anda.
  • Kelas atom - pendekatan umum yang lain pada hari ini untuk pergi sepenuhnya atom dengan kelas atom. Kelas kecil yang hanya satu perkara. Contohnya. Tachyons. Campurkan dan padankan mereka untuk mendapatkan apa yang anda perlukan. Ini adalah langkah yang baik untuk "melangkau penamaan" sama sekali, tetapi bagaimana jika pada masa depan tidak ada kelas untuk sesuatu yang tertentu? Bagaimanakah saya menyesuaikan kelas atom yang ada mengikut reka bentuk saya? Adakah semua kelas sentiasa memuatkan halaman saya sama ada saya menggunakannya atau tidak? Kami perlukan sesuatu yang lebih.

Masalah # 2: Kekuatan pemilih

Satu lagi perkara yang perlu dibina oleh pemaju CSS adalah bahawa kekhususan dalam CSS mereka tidak berjalan lancar. Sekiranya anda mempunyai pemilih yang lama yang kompleks, CSS anda menjadi tidak dapat diprediksi dan sukar untuk diselenggarakan dan debug. Harry Roberts telah menulis banyak artikel tentang mengapa itu buruk dan apa yang anda boleh lakukan untuk menyelesaikannya.

Penyelesaian yang tersedia:

Penyelesaian terbaik untuk masalah ini adalah dengan hanya menyekat pemilih anda ke satu kelas. Tiada chaining, tiada bersarang, tiada ID. Penamaan BEM yang disebutkan di atas dan kelas atom kedua-duanya menghasilkan pemilih kelas tunggal dalam CSS anda dan oleh itu membantu dalam menyelesaikan masalah ini.

Masalah # 3: Bagaimana dengan CSS yang tidak digunakan?

CSS akan menjadi penyekat, oleh itu sangat penting untuk memuatkan hanya CSS kritikal halaman serentak dan selebihnya, secara asynchronously. Atas sebab yang sama, ia juga menjadi penting untuk menghalang CSS anda daripada membuat kembung dengan melucuti CSS yang tidak digunakan.

Penyelesaian yang tersedia:

Banyak alat yang digunakan untuk mengekstrak CSS yang digunakan pada halaman. Tetapi dengan aplikasi halaman tunggal masuk, ini menjadi lebih sukar dari sebelumnya. Saya tidak pasti betapa boleh dipercayai atau cekap mereka, tetapi itu masih memerlukan pemprosesan tambahan tambahan terhadap CSS anda.

Masalah # 4: Refactoring

Pemaju 1: CSS ini telah menjadi agak kemas. Saya fikir kita perlu refactor itu.

Pemaju 2: Adakah anda fikir pemilih ini yang anda ubah juga boleh digunakan pada halaman X? Adakah anda periksa?

Pemaju 1: Oh sialan! Anda betul ... Saya terlepasnya. Halaman X itu terlalu kritikal untuk disentuh. Adakah anda tahu mengapa pemaju menggunakan kelas yang sama di kedua-dua halaman?

Pemaju 2: Tiada idea. Dia meninggalkan syarikat itu. Mari kita tinggalkan CSS kerana :(

Saya tidak mempunyai apa-apa lagi di sini. Dialog itu menerangkan semuanya.

Jika saya merumuskan di atas masalah, saya akan mengatakan bahawa penulisan yang baik (boleh terbaca, boleh dibaca, dikendalikan) CSS pasti mungkin. Walau bagaimanapun, berbuat demikian dalam pasukan yang besar amat sukar. Walaupun anda cuba membuatnya tepat dalam satu pasukan, ia memerlukan usaha berterusan seseorang untuk menguatkuasakan semua amalan terbaik.

Dalam satu pasukan, penyelesaian yang paling jelas tetapi sempurna adalah - untuk berhenti menulis CSS!

"Tunggu apa kata awak? Itu tidak mungkin! ". Anda mungkin berfikir demikian, tetapi saya akan memperkenalkan anda kepada sesuatu.

Penyelesaian semua-dalam-satu - ACSS (Pengabut)

ACSS (berasal dari Atom Atom) adalah rangka kerja berasaskan komponen untuk gaya melalui kelas atom yang dibangunkan di Yahoo! Dan Atomizer adalah alat yang sebenarnya memudahkannya. Saya akan menerangkan lebih lanjut. Tetapi sebelum itu, beri saya tunjukkan kepada anda bagaimana anda membuat gaya di ACSS.

Untuk mengikuti bersama dengan contoh kod dalam artikel ini, saya cadangkan anda memasang Web Maker (taman permainan front-end yang menyokong penulisan ACSS tanpa sebarang persediaan binaan) pada penyemak imbas Chrome.

Sekarang katakan anda mempunyai butang yang perlu digayakan dengan padding biasa, latar belakang, warna dan sebagainya. Ini adalah bagaimana ia kelihatan seperti dalam ACSS:


 Saya adalah satu butang

Salah satu cadangan - tidak membuat keputusan dengan pandangan pertama pada sintaks ini. Teruskan membaca, memberi masa, membincangkan, dan kemudian membuat keputusan. Kelas-kelas pada tag butang mungkin kelihatan berbeza tetapi anda akan bersetuju bahawa mereka boleh dikatakan sebahagian besarnya mengenai apa yang mereka lakukan. Ia adalah butang dengan warna latar belakang biru, warna putih, padat 10px, paparan inline-block, kursor penunjuk dan berubah menjadi warna merah semula pada hover.

Sekiranya anda telah memasang Web Maker, bukanya dengan mengklik ikon Web Maker di bahagian kanan atas penyemak imbas Chrome anda. Tampalkan HTML di atas dalam panel HTML dan pilih CSS Atom sebagai mod dalam panel kod CSS. Sebaik sahaja anda melakukan ini, anda akan melihat beberapa CSS automatik yang dihasilkan dalam anak tetingkap kod CSS, seperti:

CSS yang anda lihat dihasilkan oleh alat Atomizer yang saya nyatakan di atas. Pada dasarnya, ia membaca HTML (atau sebarang fail), mengesan kelas ACSS dari mereka dan menghasilkan CSS untuk kelas yang dikesan. Jadi anda menulis hanya HTML dengan kelas yang sesuai yang anda mahu gunakan dan CSS dihasilkan secara automatik!

Sekarang kita tahu bagaimana anda melakukan gaya dalam ACSS, mari kita lihat bagaimana metodologi CSS terbaik yang dapat dimiliki oleh pasukan anda.

Inline, tetapi tidak sebaris

Seperti yang anda lihat, kami sentiasa menulis kelas dalam baris pada tag. Itulah yang saya maksudkan dengan styling inline. Tetapi jangan mengelirukannya dengan gaya "inline". Tidak seperti gaya inline, kelas inline kami diterjemahkan ke kelas CSS sebenar dalam lembaran gaya caching. Jadi pada asasnya kita mendapat kuasa yang sama seperti gaya inline (menulis perkara dengan cepat) tetapi masih mendapat CSS atom sepenuhnya sah sebagai output.

Tiada penamaan lagi!

Keuntungan kegemaran mutlak saya. Anda tidak akan perlu memikirkan nama bagus, semantik, dan tidak bercanggah untuk kelas.

Pepatah yang sangat terkenal berlaku:

Hanya terdapat dua perkara yang sukar dalam Sains Komputer: pembatalan cache dan penamaan perkara. - Phil Karlton

Kemas kini mudah dan refactoring

Pergi ke HTML dan tukar kelas untuk mengemas kini beberapa gaya. Keluarkan mana-mana kelas dari mana-mana tanpa takut melanggar apa-apa di tempat lain.

Bukan satu bait CSS yang tidak digunakan ء

Sejak Atomizer menghasilkan CSS dari kelas yang sebenarnya anda gunakan, anda tidak pernah menggunakan CSS yang tidak digunakan dalam stylesheet anda. Bukankah itu prestasi gila yang kita semua cari? Terdapat juga alat di mana anda boleh menyemak berapa banyak laman web boleh mendapat manfaat daripada ACSS - https://atomize-io.herokuapp.com/

Tiada garis panduan untuk pemaju baru

Apa yang anda perlukan untuk memberi pemaju baru sebagai sebahagian daripada onboarding CSS anda adalah panduan sintaks untuk ACSS dan pautan rujukan kelas - https://acss.io/reference. Ini adalah halaman di mana anda boleh dengan mudah mencari kelas ACSS untuk mana-mana harta: nilai. Malah konvensyen ini membenamkan dalam ingatan anda kerana anda tetap menggunakannya.

Juga, terdapat sambungan kecil Visual Visual yang bagus oleh Pankaj Parashar yang auto-mencadangkan kelas-kelas ini betul-betul di dalam editor. Oleh itu, rujukan tidak diperlukan dengan sambungan itu. Onboarding pemaju telah selesai!

Selain dari kelebihan ini, terdapat lebih banyak barang yang disertai oleh ACSS.

  • Kami secara amnya terus menggunakan pasangan harta / nilai lama yang sama di seberang aplikasi. Oleh itu lembaran gaya yang dihasilkan pada dasarnya berhenti berkembang selepas titik tertentu. Oleh kerana setiap pasangan / harta nilai unik datang sekali dalam lembaran gaya terakhir.
  • Kerana titik di atas, anda benar-benar boleh menggunakan lembaran gaya yang sama merangkumi pelbagai produk anda kerana ia tidak akan begitu besar. Lembaran gaya cached CSS untuk semua produk!
  • Tarik permintaan yang terasa seperti mimpi. Bayangkan permintaan tarik di mana anda tidak melihat sebarang fail .css. Tiada lagi kelas pemeriksaan untuk konflik yang bermakna atau khusus. Kerana anda tahu CSS atom yang betul, yang sepatutnya hadir, akan dihasilkan. Bukankah itu akan menjadi kawasan ajaib?

Busting mitos

Banyak mitos telah dibangunkan mengenai ACSS di seluruh Internet. Ini adalah kerana penilaian cetek rangka dan penghakiman pada pandangan pertama.

Ia sama dengan gaya dalam talian. Ia buruk!

Tidak ianya bukan. Kita sudah lihat di atas. Ini pasti sama kuat gaya gaya tetapi tidak mewarisi apa-apa.

Sukar menulis semua set kelas yang sama berulang kali.

Ya betul. ACSS mengatakan ia adalah rangka kerja berasaskan komponen. Sekiranya anda tidak menggodam setiap komponen anda dan sudah menduplikasi HTML, katakanlah untuk membuat butang setiap kali, ACSS bukan untuk anda.

Sebagai contoh, anda perlu membuat butang menggunakan komponen butang yang dicabut seperti:

 Hello World 

yang sepatutnya disusun menjadi seperti:

 Hello World <

Kelas tidak masuk akal sama sekali

Saya bersetuju mereka berbeza dan mungkin kelihatan menjijikkan pada pandangan pertama. Tetapi setiap rangka kerja kelas atom datang dengan konvensyen penamaan sendiri. Dan percayalah, ACSS mempunyai yang terbaik dalam konvensyen penamaan. Baca lebih lanjut mengenai mengapa mereka memilih penamaan tersebut.

Saya ingin memetik perenggan dari salah satu artikel Harry Robert:

Hujah umum terhadap BEM adalah bahawa ia hodoh; Saya berani mengatakan bahawa jika anda menjauhi kod berdasarkan semata-mata pada penampilannya maka anda sering kehilangan titik. Melainkan jika kod menjadi sukar untuk dikekalkan, atau benar-benar lebih sukar untuk dibaca, maka mungkin anda perlu berfikir dua kali sebelum menggunakannya, tetapi jika ia 'hanya kelihatan aneh' tetapi mempunyai tujuan yang sah, maka ia pastinya harus dipertimbangkan sebelum menulisnya. - Harry Roberts

Tetapi di sini, kami menggunakan BEM untuk membuat asas kod kami waras.

Saya tidak akan dapat melakukan perkara X dalam ACSS

Anda akan kagum melihat apa yang mungkin dilakukan oleh kelas yang disediakan di ACSS. Unsur-unsur pseudo, flexbox, pertanyaan media, anda namakannya. Dan konvensyen yang mereka buat untuk melakukan semua perkara ini sememangnya cemerlang! Walaupun mungkin ada hal-hal tertentu yang tidak mungkin dalam ACSS, seperti Grid CSS, anda boleh membuka masalah atau menyumbang kepada Atomizer.

Akhirnya

Saya akan meminta anda memberi ACSS satu percubaan jika anda memahami kesakitan menulis dan menguruskan CSS dalam satu pasukan. Dan ingat, menggunakan ACSS tidak bermakna anda tidak boleh menulis CSS biasa. Alat harus digunakan di mana mereka berfungsi dengan baik. Sekiranya ada sesuatu yang anda rasa CSS biasa akan lebih sesuai untuk anda, anda mestilah menggunakannya.

Juga, ACSS tidak semata-mata mengambil pendekatan ini. Terdapat alternatif yang sama seperti Blowdry CSS, Cell CSS dan lain-lain, masing-masing membawa gaya mereka sendiri untuk mencapai perkara yang sama.

Jika anda mempunyai sebarang soalan mengenai ACSS, anda boleh ping Thierry Koblentz, lelaki itu sendiri dari pasukan ACSS, di Twitter. Tanya soalan di kompilasi FAQ yang dia mengekalkan atau menyertai kumpulan Atomizer di Gitter. Atau masukkan komen-komen artikel ini.

Akhir sekali, saya ingin mengucapkan terima kasih kepada Thierry Koblentz dan Jitendra Vyas untuk mengkaji artikel ini.

Jika anda suka artikel ini, tunjukkan cintakan anda dengan bertepuk tangan pada artikel itu. Juga ikuti saya di Twitter, di mana saya berkongsi lebih banyak artikel front-end dan projek sampingan saya.

Lebih banyak untuk dibaca

  • https://www.smashingmagazine.com/2013/10/challenging-css-best-practices-atomic-approach/ - oleh Thierry Koblentz
  • Pengabut GitHub repo - https://github.com/acss-io/atomizer
  • Dokumentasi ACSS - https://acss.io/quick-start.html
  • Soalan Lazim ACSS yang disusun oleh Thierry - https://github.com/thierryk/ACSS-QA
  • Taman permainan ACSS - https://webmakerapp.com