Pengantar ITCSS untuk Pengembang Web

Ada beberapa metode bagus untuk itu penataan kode CSS, dan mereka semua bekerja dengan cara yang berbeda. Yang paling populer adalah OOCSS dan SMACSS, tetapi ada juga metode yang kurang dikenal ITCSS (CSS Segitiga Terbalik) dibuat oleh Harry Roberts.

Ini bukan perpustakaan atau kerangka kerja, tetapi a metodologi penulisan kode itu scalable dan mudah dimanipulasi. Manfaat dari ITCSS berkisar dari organisasi kode sederhana untuk ukuran file yang lebih kecil, dan pemahaman yang lebih besar tentang arsitektur CSS.

ITCSS bukan untuk semua orang, tetapi menyediakan cara profesional untuk melihat stylesheet dengan jelas selama proses pengkodean. Mari kita mempelajari konsep di balik ITCSS, dan lihat bagaimana mereka dapat diterapkan pada proyek web.

Apa itu ITCSS??

Cara modern pengorganisasian CSS sering kembali ke modularisasi atau Objek CSS untuk membangun ide-ide abstrak.

Gagasan baru CSS Segitiga Terbalik adalah a cara berlapis untuk memisahkan properti CSS berdasarkan tingkat kekhususan dan kepentingan mereka. Ini adalah metode yang kurang dikenal dibandingkan dengan SMACSS dan OOCSS - meskipun keduanya dapat dikombinasikan dengan ITCSS.

Karena ITCSS adalah kebanyakan milik, tidak ada buku aturan yang mendetail tentang penggunaannya. Hanya a seperangkat prinsip spesifik siap membantu kami. Penulis berbicara tentang mereka dalam video di bawah ini.

Secara default, ITCSS menggunakan prinsip yang sama dengan OOCSS tetapi dengan pemisahan yang lebih besar berdasarkan spesifisitas. Jadi, jika Anda sudah terbiasa dengan OOCSS, anggap ini unik arsitektur CSS alternatif untuk mencoba.

Berikut adalah beberapa manfaat terbesar menggunakan ITCSS:

Objek halaman dapat dipecah menjadi file CSS / SCSS mereka sendiri dapat digunakan kembali. Sangat mudah untuk menyalin / menempel dan memperluas setiap objek ke dalam proyek lain.
Kedalaman spesifisitas adalah terserah kamu.
Ada tidak ada struktur folder yang ditetapkan, dan tidak diperlukan penggunaan alat preprocessing.
Anda dapat menggabungkan konsep dari metodologi lain seperti modul CSS ke buat alur kerja hybrid Anda sendiri.

Sistem ITCSS

Mari kita lihat bagaimana Inverted Triangle Model bekerja menggunakan ilustrasi berikut dari posting Lubos Kmetko.

Aliran terarah dari puncak datar segitiga terbalik ke ujung di bagian bawah melambangkan peningkatan spesifisitas. Ini fokus pada kekhususan yang kurang membuatnya lebih mudah untuk menggunakan kembali kelas di situs beberapa kali.

Setiap subbagian dari segitiga dapat dianggap sebagai file atau kelompok file yang terpisah, meskipun Anda tidak perlu menulis kode dengan cara itu. Itu lebih masuk akal untuk pengguna Sass / Kurang karena fitur impor. Pikirkan setiap subbagian sebagai metodologi untuk memisahkan dan mengatur kode CSS yang dapat digunakan kembali.

Mari kita lihat sekilas setiap bagian dari segitiga terbalik bergerak dari atas ke ujung.

Pengaturan - Variabel dan metode preprosesor (tidak ada output CSS aktual)
Alat - Mixin dan fungsi (tidak ada output CSS yang sebenarnya)
Umum - Reset CSS yang mungkin termasuk pengaturan ulang Eric Meyer, Normalize.css, atau kumpulan kode Anda sendiri
Elemen - Selektor elemen HTML tunggal tanpa kelas
Benda - Kelas untuk struktur halaman biasanya mengikuti metodologi OOCSS
Komponen - Kelas estetika untuk menata elemen halaman apa saja & semua (sering dikombinasikan dengan struktur kelas objek)
Truf - Gaya paling spesifik untuk menimpa apa pun dalam segitiga

Setiap lapisan dari segitiga terbalik bisa disesuaikan dengan kebutuhan Anda. Jadi jika Anda tidak menggunakan preprocessor CSS maka Anda tidak perlu lapisan Pengaturan atau Alat.

Anda harus merasa bebas untuk menerjemahkan masing-masing ayat sesuai keinginan Anda. Sebagai contoh, Jordan Koschei menjelaskan bagaimana ia menggabungkan struktur dan estetika bersama ke dalam kelas objek, meninggalkan sangat sedikit di bagian Komponen.

ITCSS sudah tidak ada aturan yang keras dan cepat yang harus Anda ikuti. Tidak ada pemeriksa kepatuhan ITCSS, dan tidak ada yang akan meneriaki Anda karena sedikit mengubah model ini.

Meskipun pencipta ITCSS Harry Roberts tertarik untuk menjaga metodenya tetap untuk penggunaan internal, Anda dapat menemukannya contoh open source dari ITCSS dalam repo GitHub ini. Di-host oleh akun CSS Wizardry yang merupakan situs web pribadi Harry Roberts.

BEM + IT = Penamaan BEMIT

Salah satu skema penamaan CSS yang paling populer adalah BEM. Ini adalah singkatan dari Block-Element-Modifier dan mengikuti sintaksis yang sangat khusus.

Setiap elemen dalam BEM menjelaskan konvensi penamaan untuk kelas CSS:

Blok adalah kelas untuk elemen individu yang dapat direplikasi dan berdiri sendiri.
Elemen selalu menjadi bagian dari blok
Pengubah selalu modifikasi blok atau elemen untuk sedikit mengubah penampilannya (on / off, aktif / tidak aktif, tetap, statis, sorot / netral).

BEMIT adalah konvensi penamaan diadopsi oleh ITCSS, yang meminjam ide dari BEM sambil mengimplementasikan ide-ide baru dengan ITCSS.

Sintaks BEM menentukan aturan yang sangat spesifik. Di bawah ini adalah contoh dari situs web BEM:

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

Blok memiliki nama tanpa pemisahan, atau nama yang dipisahkan oleh satu tanda hubung atau satu garis bawah. Elemen menggunakan dua garis bawah dan mereka menggambarkan elemen internal yang konsisten dengan blok tertentu. Pengubah bekerja dengan cara yang sama tetapi menggunakan dua tanda hubung untuk identifikasi.

Harry menggali lebih dalam tentang BEMIT dalam posting blog ini. Uraiannya sangat singkat dan itu menunjukkan bahwa sifat sebenarnya dari ITCSS adalah bermain bersahabat dengan metodologi CSS lainnya.

Harry mendefinisikan ruang nama untuk objek muncul sebagai awalan untuk setiap nama kelas utama. Mereka mogok sebagai Hai- untuk benda, c- untuk komponen, dan kamu- untuk utilitas (seperti clearfix atau pemusatan teks).

Berikut adalah beberapa kode sampel yang mewakili konvensi penamaan BEMIT khas.

...

Dia juga merekomendasikan menggunakan @ akhiran untuk kelas berdasarkan gaya media. Sehingga .o-media kelas mungkin berubah menjadi .o-media @ lg untuk layar besar, dan .o-media @ md untuk layar berukuran sedang.

Secara pribadi, saya pikir sufiks tambahan terlalu berbelit-belit untuk proyek web dasar. Saya pikir sebagian besar pengembang lebih suka menggunakan kueri media umum, dan menulis ulang kelas di breakpoint yang berbeda. Tetapi saya tidak dapat mengatakan metode mana pun yang benar atau salah, dan siapa pun dapat memutuskan secara individu apakah mereka ingin menggunakan BEMIT atau tidak.

Saya sangat merekomendasikan membaca artikel BEMIT intro ini untuk mempelajari lebih lanjut tentang mengapa ITCSS memperpanjang BEM, dan bagaimana Anda mungkin ingin memberi nama kelas CSS Anda.

ITCSS dapat diringkas sebagai metode organisasi untuk menulis CSS yang dapat digunakan kembali dan terukur. BEM adalah sintaks penamaan yang disukai, dan BEMIT memperluas ini untuk bekerja dengan ruang nama untuk kode yang lebih spesifik dan dapat dikenali.

Ada banyak yang harus dipelajari, dan jika Anda baru menggunakan CSS, ini akan menjadi konsep yang sulit untuk dipecahkan. Tetapi jika Anda mau belajar, saya jamin Anda akan terkejut dengan sifat ramping kode ITCSS.

Membungkus

Pengembang front-end selalu mencari untuk mengoptimalkan alur kerja mereka. ITCSS hanyalah metode lain yang dapat berkontribusi pada metode perbaikan penataan situs web kompleks.

Kesulitannya adalah mempelajari cara kerjanya dalam pekerjaan proyek nyata. Jika Anda memiliki keberanian, dan dorongan untuk belajar maka ITCSS mungkin sesuatu yang layak ditambahkan ke toolkit Anda. Meskipun saya belum menemukan dokumentasi resmi, masih ada banyak sumber daya online untuk belajar tentang ITCSS.

Kelola proyek web skala besar dengan arsitektur CSS baru ITCSS (creativebloq.com)
Mengelola Proyek CSS dengan ITCSS - Slide Presentasi (speakerdeck.com)
Proyek CSS dengan ITCSS (presentasi video 1 jam)
ITCSS - Cara menarik untuk mengatur proyek skala besar (css-tricks.com)

(Foto sampul melalui speakerdeck.com)