Pengenalan kepada ITCSS untuk Pembangun Web

Ada segelintir kaedah yang hebat untuk penstrukturan kod CSS, dan mereka semua bekerja dengan cara yang berbeza. Yang paling popular adalah OOCSS dan SMACSS, tetapi ada juga kaedah yang kurang dikenali yang dipanggil ITCSS (CSS Segitiga terbalik) dicipta oleh Harry Roberts.

Ia bukan perpustakaan atau rangka kerja, tetapi a kaedah penulisan kod itu berskala dan mudah dimanipulasi. Faedah ITCSS merangkumi dari organisasi kod mudah ke saiz fail yang lebih kecil, dan pemahaman yang lebih baik mengenai seni bina CSS.

ITCSS bukan untuk semua orang, tetapi ia memberikan cara profesional untuk melihat stylesheets dengan kejelasan semasa proses pengekodan. Mari kita huraikan konsep-konsep di belakang ITCSS, dan lihat bagaimana ia boleh digunakan untuk projek-projek web.

Apa itu ITCSS?

Cara moden untuk mengatur CSS sering kembali kepada modularization atau Objek CSS untuk membina idea abstrak.

Idea baru CSS Segitiga terbalik adalah a cara berlapis pemisahan sifat CSS berdasarkan kepada tahap kekhususan dan kepentingannya. Ia adalah kaedah yang kurang dikenali berbanding SMACSS dan OOCSS - walaupun kedua-duanya boleh digabungkan dengan ITCSS.

Sejak ITCSS adalah kebanyakannya proprietari, tiada buku peraturan yang terperinci mengenai penggunaannya. Hanya a set prinsip tertentu adalah pada pelupusan kami. Penulis bercakap tentang mereka dalam video di bawah.

Secara lalai, ITCSS menggunakan prinsip yang sama seperti OOCSS tetapi dengan pemisahan yang lebih besar berdasarkan kekhususan. Jadi jika anda sudah biasa dengan OOCSS, anggap ini unik seni bina CSS alternatif untuk mencuba.

Berikut adalah beberapa manfaat terbesar menggunakan ITCSS:

Objek halaman boleh dibahagikan kepada fail CSS / SCSS mereka sendiri boleh diguna semula. Ia mudah untuk menyalin / paste dan memanjangkan setiap objek ke dalam projek lain.
Kedalaman kekhususan kepada anda.
Ada tiada struktur folder yang ditetapkan, dan tidak memerlukan penggunaan alat preprocessing.
Anda boleh menggabungkan konsep dari metodologi lain seperti modul CSS kepada buat aliran kerja hibrid anda sendiri.

Sistem ITCSS

Mari lihat bagaimana Model Segitiga terbalik berfungsi menggunakan ilustrasi berikut dari pos Lubos Kmetko.

Aliran arah dari bahagian atas segitiga terbalik ke hujung di bawah simbol peningkatan dalam kekhususan. Ini memberi tumpuan kepada kekhususan yang kurang menjadikannya lebih mudah untuk menggunakan semula kelas di laman web beberapa kali.

Setiap subseksyen segitiga boleh dianggap sebagai fail berasingan atau kumpulan fail, walaupun anda tidak perlu menulis kod dengan cara itu. Ia lebih masuk akal untuk pengguna Sass / Less kerana ciri import. Cukup fikirkan setiap subseksyen sebagai metodologi untuk memecah dan menganjurkan kod CSS yang boleh diguna semula.

Mari kita lihat cepat setiap bahagian segitiga terbalik bergerak dari atas ke hujung.

Tetapan - Pembolehubah dan kaedah preprocessor (tiada output CSS sebenar)
Alat - Mixin dan fungsi (tiada output CSS sebenar)
Generik - Reset CSS yang mungkin termasuk menetapkan semula Eric Meyer, Normalize.css, atau kumpulan kod anda sendiri
Elemen - Pemilih elemen HTML tunggal tanpa kelas
Objek - Kelas untuk struktur halaman biasanya mengikuti metodologi OOCSS
Komponen - Kelas-kelas estetik untuk menggayakan unsur-unsur & semua elemen halaman (sering digabungkan dengan struktur kelas objek)
Trumps - Gaya yang paling spesifik untuk mengatasi apa-apa lagi dalam segitiga

Setiap lapisan segitiga terbalik boleh diselaraskan untuk memenuhi keperluan anda. Jadi jika anda tidak menggunakan preprocessor CSS maka anda tidak akan memerlukan lapisan Tetapan atau Alat.

Anda harus berasa bebas untuk menafsirkan setiap subseksyen yang anda lihat patut. Sebagai contoh, Jordan Koschei menerangkan bagaimana dia menyatukan struktur dan estetika bersama-sama ke dalam kelas objek, meninggalkan sangat sedikit di bahagian Komponen.

ITCSS mempunyai tiada peraturan yang keras dan cepat yang mesti anda ikuti. Tiada pemeriksa pematuhan ITCSS, dan tiada siapa yang akan menjerit kepada anda kerana sedikit mengubah model ini.

Walaupun pencipta ITCSS 'Harry Roberts berminat untuk mengekalkan kaedahnya untuk kegunaan dalaman, anda boleh mencari contoh sumber terbuka ITCSS dalam repo GitHub ini. Ia dihoskan oleh akaun CSS Wizardry yang merupakan laman web peribadi Harry Roberts.

BEM + IT = BEMIT Naming

Salah satu skema penamaan CSS yang paling popular ialah BEM. Ini bermaksud Block-Element-Modifier dan mengikuti sintaks yang sangat khusus.

Setiap elemen dalam BEM menerangkan konvensyen penamaan untuk kelas CSS:

Blok adalah kelas untuk elemen individu yang boleh direplikasi dan berdiri sendiri.
Elemen sentiasa sebahagian daripada blok
Pengubah sentiasa mengubah suai blok atau unsur untuk sedikit mengubah penampilannya (hidup / mati, aktif / tidak aktif, tetap, statik, sorot / neutral).

BEMIT adalah konvensyen penamaan yang diterima pakai oleh ITCSS, yang meminjam idea dari BEM sambil melaksanakan idea baru dengan ITCSS.

Sintaks BEM menentukan peraturan yang sangat spesifik. Berikut adalah contoh dari laman web BEM:

.form  .form - theme-xmas  .form - simple  .form__input  .form__submit  .form__submit - disabled

Blok mempunyai nama dengan sama ada tiada pemisahan, atau nama yang dipisahkan oleh satu dash atau satu underscore. Elemen menggunakan dua garis bawah dan mereka menerangkan elemen dalaman yang konsisten dengan blok tertentu itu. Modifiers berfungsi dengan cara yang sama tetapi menggunakan dua garis lurus untuk pengenalpastian.

Harry menyelidiki lebih mendalam ke BEMIT dalam catatan blog ini. Huraiannya sangat ringkas dan ia menunjukkan bahawa sifat sebenar ITCSS adalah bermain mesra dengan metodologi CSS yang lain.

Harry mentakrifkan ruang nama untuk objek muncul sebagai awalan untuk setiap nama kelas utama. Mereka memecah sebagai o- untuk objek, c- untuk komponen, dan u- untuk utiliti (seperti penjelasan atau sentuhan teks).

Berikut adalah beberapa contoh kod yang mewakili konvensyen penamaan BEMIT yang biasa.

...

Beliau juga mencadangkan menggunakan @ akhiran untuk kelas berdasarkan gaya media. Jadi .o-media kelas mungkin berubah menjadi .o-media @ lg untuk skrin besar, dan .o-media @ md untuk skrin bersaiz sederhana.

Secara peribadi, saya fikir akhiran tambahan adalah terlalu rumit untuk projek web asas. Saya fikir kebanyakan pemaju lebih suka menggunakan pertanyaan media biasa, dan menulis semula kelas-kelas pada titik breakpoint yang berbeza. Tetapi saya tidak boleh mengatakan sama ada kaedah adalah betul atau salah, dan sesiapa sahaja boleh menentukan sama ada mereka mahu menggunakan BEMIT atau tidak.

Saya sangat mengesyorkan membaca artikel BEMIT intro ini untuk mengetahui lebih lanjut mengenai mengapa ITCSS diperluaskan BEM, dan bagaimana anda mungkin mahu menamakan kelas CSS anda.

ITCSS boleh dirumuskan sebagai kaedah organisasi untuk menulis boleh diguna semula dan berskala CSS. BEM adalah sintaks penamaan pilihan, dan BEMIT memanjangkan ini untuk berfungsi dengan ruang nama untuk kod yang lebih khusus dan dikenali.

Terdapat banyak perkara yang perlu dipelajari, dan jika anda baru kepada CSS ini akan menjadi satu konsep yang sukar untuk dipecahkan. Tetapi jika anda sanggup belajar, saya menjamin anda akan terkejut dengan sifat ITCSS yang licin.

Mengakhiri

Pemaju barisan hadapan sentiasa berusaha untuk mengoptimumkan aliran kerja mereka. ITCSS adalah satu lagi kaedah lain yang boleh menyumbang kepada kaedah penambahbaikan yang menstabilkan laman web kompleks.

Kesukaran adalah mempelajari bagaimana ia berfungsi dalam kerja projek sebenar. Sekiranya anda mempunyai keberanian, dan memandu untuk belajar maka ITCSS mungkin sesuatu yang bernilai tambah pada toolkit anda. Walaupun saya tidak menemui sebarang dokumentasi rasmi, masih terdapat banyak sumber dalam talian untuk mengetahui tentang ITCSS.

Mengurus projek web berskala besar dengan seni bina CSS baru ITCSS (creativebloq.com)
Menguruskan Projek CSS dengan ITCSS - Slaid Persembahan (speakerdeck.com)
Projek CSS dengan ITCSS (persembahan video 1 jam)
ITCSS - Satu cara yang menarik untuk menganjurkan projek besar-besaran (css-tricks.com)

(Foto tutup melalui speakerdeck.com)