Menggunakan PostCSS dengan BEM dan SUIT Metodologi

() translation by (you can also view the original English article)

Dalam tutorial ini kita akan belajar bagaimana menggunakan PostCSS untuk membuat pengembangan BEM sesuai gaya CSS lebih mudah dan lebih efisien.

Kedua metodologi ini menetapkan konvensi penamaan untuk kelas yang membuatnya lebih mudah untuk menjaga agar gaya Anda tetap berorientasi fungsi, dan membantu pengembang lain mengenali tujuan berbagai kelas hanya dari cara mereka diberi nama.

BEM adalah pendahulu dari jenis kelas penamaan metodologi, dibuat oleh Yandex. Metodologi SUIT adalah pendekatan berdasarkan BEM, tetapi dengan beberapa penyesuaian dan penambahan yang dibuat oleh Nicholas Gallagher. SUIT melakukan semua yang dilakukan BEM, tetapi bagi banyak pengguna, ini dianggap sebagai peningkatan.

Bekerja dengan metode ini pasti membantu menghasilkan CSS yang lebih baik dan terstruktur dengan lebih baik. Namun, bagian yang sulit adalah bahwa hal itu dapat menjadi melelahkan secara manual mengetik nama kelas yang diperlukan dalam struktur ini, dan melacak bagaimana kelas-kelas yang saling berhubungan dapat menjadi sedikit sakit kepala.

Plugin postcss-bem oleh Malte-Maurice Dreyer mengurangi masalah ini melalui kombinasi shortcut dan nesting, yang akan Anda pelajari untuk digunakan saat kita bergerak melalui tutorial ini.

Tetapi pertama-tama, mari kita memiliki primer cepat pada metode BEM dan SUIT, untuk memastikan Anda memiliki gambaran yang jelas tentang manfaat menggunakan plugin postcss-bem, dan cara penggunaannya.

Quick Primer pada BEM

Blok

Dalam blok BEM terdapat potongan-potongan desain tingkat tinggi; blok bangunan situs dibuat. Blok harus berupa bagian situs Anda yang terpisah dari bagian lain, dan secara teoritis dapat ditempatkan di mana saja dalam tata letak Anda, bahkan bersarang di dalam blok lain.

Misalnya, pencarian bentuk 'blokir' di situs Anda mungkin menggunakan formulir .search-form.

Elemen

Elemen dalam BEM adalah sebuah sub-bagian di dalam sebuah blok. Mereka ditandai dengan menambahkan dua pemisah __ garis bawah dan nama elemen ke nama induk induk.

Misalnya, bentuk pencarian mungkin termasuk judul, bidang teks dan menyerahkan elemen tombol. Nama-nama kelas mereka mungkin. .search-form__heading,. .search-form__text-field dan .search-form__submit-button masing-masing.

Pengubah

Pengubah diterapkan ke blok atau elemen untuk menandai perubahan dalam presentasinya, atau perubahan statusnya. Mereka ditandai dengan menambahkan pemisah dan nama pengubah ke blok atau elemen yang dipermasalahkan.

Dokumentasi situs BEM resmi menyatakan bahwa pemisah pengubah harus berupa garis bawah tunggal _. Namun, konvensi Pedoman CSS “BEM-like” oleh Harry Roberts menggunakan dua garis -- dan mungkin lebih banyak digunakan dan dikenal daripada konvensi BEM resmi.

Misalnya, dalam desain Anda mungkin ingin menyajikan bentuk pencarian lanjutan secara berbeda ke bentuk pencarian biasa, dan karenanya membuat kelas .search-form_advanced (BEM resmi) atau .search-form - advanced (BEM-like).

Dalam contoh lain, Anda mungkin ingin mengubah tampilan formulir karena perubahan status, seperti jika konten yang tidak valid baru saja dikirim, dan karenanya membuat pengubah .search-form_invalid (BEM resmi) atau .search-form -- invalid (BEM-like).

Quick Primer pada SUIT

SUIT terdiri dari Utilities dan Components. Di dalam komponen-komponen bisa ada Modifiers, Descendants dan States.

SUIT menggunakan kombinasi dari kasus pascal (PascalCase), camel case (camelCase) dan dashes. Konvensi-konvensinya menegakkan batas pada sejumlah garis putus-putus dan garis bawah yang membingungkan yang dapat muncul dalam BEM. Sebagai contoh, kelas BEM .search-form__text-field akan .SearchForm-textField dalam SUIT.

Utility

Utilities menangani struktur dan gaya posisional, dan ditulis sedemikian rupa sehingga mereka dapat diterapkan di mana saja dalam suatu komponen. Mereka diawali dengan u- dan ditulis dalam kotak unta. Misalnya, .u-clearFix.

Komponen

Sebuah component dalam setelan berlangsung block di BEM. Komponen selalu ditulis dalam kasus pascal dan hanya bagian Setelan yang menggunakan kasus pascal, membuat mereka mudah untuk mengidentifikasi. Sebagai contoh, .SearchForm.

Component Namespace

Components opsional dapat diawali dengan namespace dan nmsp- dasbor tunggal- untuk memastikan konflik dicegah, mis. .mine-SearchForm.

Descendent

descendent dalam SUIT menggantikan element dalam BEM. Ini menggunakan satu dasbor - dan ditulis dalam camel case. Misalnya .SearchForm-heading, .SearchForm-textField dan .SearchForm-submitButto.

Modifier

SUIT menggunakan modifiers seperti halnya BEM, namun peran mereka lebih dikontrol ketat. Pengubah SUIT umumnya hanya diterapkan langsung ke komponen, bukan ke keturunan. Ini juga tidak boleh digunakan untuk mewakili perubahan negara, karena SUIT memiliki konvensi penamaan khusus untuk negara.

Pengubah ditulis dalam kasus unta dan didahului oleh dua tanda hubung --. Misalnya, .SearchForm--advanced.

State

State kelas dapat digunakan untuk mencerminkan perubahan komponen negara.Negara Ini memungkinkan mereka untuk dibedakan secara jelas dari pengubah, yang mencerminkan modifikasi penampilan dasar komponen tanpa memandang negara. Jika perlu, negara juga dapat diterapkan ke keturunan.

Negara-negara diawali dengan is- dan ditulis dalam kasus unta. Mereka juga selalu ditulis sebagai kelas yang berdampingan. Misalnya .SearchForm.is-invalid.

Siapkan Proyek Anda

Sekarang setelah Anda memiliki esensi BEM dan SUIT turun, saatnya untuk menyiapkan proyek Anda.

Anda memerlukan proyek kosong menggunakan Gulp atau Grunt, tergantung pada preferensi Anda. Jika Anda belum memiliki preferensi untuk satu atau yang lain, saya sarankan untuk menggunakan Gulp karena Anda akan membutuhkan lebih sedikit kode untuk mencapai tujuan yang sama, jadi Anda akan merasa lebih mudah untuk menggunakannya.

Anda dapat membaca tentang cara menyiapkan proyek Gulp atau Grunt untuk PostCSS di tutorial sebelumnya

masing-masing.

Jika Anda tidak ingin secara manual mengatur proyek Anda dari awal, Anda dapat mengunduh file sumber yang dilampirkan pada tutorial ini, dan ekstrak proyek starter Gulp atau Grunt yang tersedia ke dalam folder proyek kosong. Kemudian dengan terminal atau command prompt menunjuk folder menjalankan perintah npm install.

Pasang Plugin

Selanjutnya, Anda harus memasang plugin postcss-bem. Kami juga akan menginstal sebuah plugin yang dapat bekerja dengan cukup baik: postcss-nested.

Baik Anda menggunakan Gulp atau Grunt, jalankan perintah berikut di dalam folder proyek Anda:

1	npm install postcss-bem postcss-nested --save-dev

Sekarang kami siap memuat plugin ke proyek Anda.

Muat Plugin melalui Gulp

Jika Anda menggunakan Gulp, tambahkan variabel-variabel ini di bawah variabel yang sudah ada dalam file:

1	var bem = require('postcss-bem');
2	var nested = require('postcss-nested');

Sekarang tambahkan masing-masing nama variabel baru ke dalam array prosesor Anda:

1	var processors = [
2	bem,
3	nested
4	];

Lakukan tes cepat bahwa semuanya berfungsi dengan menjalankan perintah gulp css kemudian memeriksa bahwa file “style.css” baru telah muncul di folder “dest” proyek Anda.

Memuat Plugin melalui Grunt

Jika Anda menggunakan Grunt, perbarui objek processors , yang bersarang di bawah objek options , menjadi berikut:

1	processors: [
2	require('postcss-bem')(),
3	require('postcss-nested')()
4	]

Lakukan tes cepat bahwa semuanya berfungsi dengan menjalankan perintah grunt postcs kemudian memeriksa bahwa file “style.css” baru telah muncul di folder “dest” proyek Anda.

Oke, Anda siap untuk pergi. Mari pelajari cara membuat struktur BEM dan SUIT.

BEM dan SUIT dengan postcss-bem

Ada beberapa ketidaksengajaan yang berkembang dalam BEM atau struktur SUIT ketika menulis kode secara manual, karena secara terus-menerus mengulang pengidentifikasi yang sama dalam nama kelas dapat menjadi melelahkan, dan melacak elemen dan turunan mana yang menjadi milik blok dan komponen mana yang bisa membingungkan.

Namun, ketika Anda menggunakan postcss-bem, mudah untuk memahami struktur kode Anda sekilas, dan pengulangan dalam mengetikkan nama kelas menjadi hampir tidak ada.

Menghasilkan struktur SUIT

Terlepas dari namanya, secara default postcss-bem akan menampilkan sesuai dengan sintaksis SUIT daripada BEM. Anda dapat membuat output dalam sintaks BEM, yang akan kita bahas nanti, tetapi plugin terutama dirancang untuk menghasilkan SUIT, jadi untuk alasan itu, kita akan mulai dengan sintaks SUIT.

Menghasilkan komponen

Untuk membuat komponen, gunakan sintaks @component ComponentName {...}.

Coba ini dengan menambahkan komponen SearchForm ke file "src/style.css":

1	@component SearchForm {
2	padding: 0;
3	margin: 0;
4	}

Kompile dan kode yang Anda hasilkan seharusnya:

1	.SearchForm {
2	padding: 0;
3	margin: 0;
4	}

Membangkitkan Descendent

Untuk membuat turunan, gunakan sintaks @descendent descName {...} bersarang di dalam komponen induk.

Tambahkan textField descendent named di dalam komponen SearchForm Anda seperti:

@component SearchForm {
    padding: 0;
	margin: 0;
	
    /* Nest descendent under component */
	@descendent textField {
		border: 1px solid #ccc;
	}

}

Setelah dikompilasi, Anda seharusnya sekarang melihat:

.SearchForm {
    padding: 0;
	margin: 0;
}

.SearchForm-textField {
	border: 1px solid #ccc;
}

Menghasilkan pengubah

Buat pengubah menjadi komponen dengan sintaks @modifier name {...}, bersarang di dalam komponen yang menjadi efeknya. Pengubah biasanya harus ditempatkan di bagian atas komponen Anda, di atas setiap keturunan dan negara bagian.

Tambahkan pengubah bernama advanced ke komponen SearchForm Anda dengan kode berikut:

@component SearchForm {
    padding: 0;
	margin: 0;
	
    /* Typically, place modifiers above descendents */
	@modifier advanced {
		padding: 1rem;
	}
	
	@descendent textField {
		border: 1px solid #ccc;
	}

}

Mengkompilasi ulang kode Anda dan Anda akan melihat pengubah komponen advanced baru Anda:

.SearchForm {
    padding: 0;
	margin: 0;
}

.SearchForm--advanced {
	padding: 1rem;
}

.SearchForm-textField {
	border: 1px solid #ccc;
}

Menghasilkan State

Negara dibuat melalui sintaksis @when name {...} dan dapat bersarang di dalam komponen atau turunan.

Tambahkan sebuah negara bagian yang invalid ke keturunan TextField Anda menggunakan kode ini:

@component SearchForm {
    padding: 0;
	margin: 0;
	
	@modifier advanced {
		padding: 1rem;
	}
	
	@descendent textField {
		border: 1px solid #ccc;
		
        /* This creates a state for the textField descendant */
		@when invalid {
			border: 1px solid red;
		}
	}

}

Sekarang saat Anda menyusun kode, Anda akan melihatnya berisi status invalid Anda yang baru:

.SearchForm {
    padding: 0;
	margin: 0;
}

.SearchForm--advanced {
	padding: 1rem;
}

.SearchForm-textField {
	border: 1px solid #ccc;
}

.SearchForm-textField.is-invalid {
	border: 1px solid red;
}

Namespacing komponen

Anda dapat menamai komponen Anda, dan semua keturunan, pengubah dan negara bersarang di dalamnya, dengan mengelilinginya @component-namespace name {...}. Anda dapat, jika Anda suka, membungkus seluruh stylesheet Anda dengan namespace ini sehingga semua kelas Anda secara otomatis diawali dengan itu.

Cobalah ini dengan membungkus semua kode Anda sejauh ini @component-namespace mine {...}:

@component-namespace mine {

    @component SearchForm {
		padding: 0;
		margin: 0;
		
		@modifier advanced {
			padding: 1rem;
		}
		
		@descendent textField {
			border: 1px solid #ccc;
			
			@when invalid {
				border: 1px solid red;
			}
		}

	}

}

Setelah dikompilasi, Anda akan melihat bahwa sekarang setiap komponen Anda diawali dengan mine-:

.mine-SearchForm {
    padding: 0;
	margin: 0;
}

.mine-SearchForm--advanced {
	padding: 1rem;
}

.mine-SearchForm-textField {
	border: 1px solid #ccc;
}

.mine-SearchForm-textField.is-invalid {
	border: 1px solid red;
}

Menghasilkan sebuah Utility

Utilitas dibuat dengan sintaks @utility utilityName {...}. Anda akan ingat bahwa ketika menyiapkan proyek Anda, Anda memasang plugin bertingkat posts. Kami melakukan ini karena sangat berguna untuk digunakan bersama-sama dengan postcss-bem, seperti yang Anda lihat pada contoh ini di mana kami membuat utilitas clearFix:

@utility clearFix {
    &:before, &:after {
		content: "";
		display: table;
	}
	&:after {
		clear: both;
	}
	/* If supporting IE 6/7 */
	*zoom: 1;
}

Setelah menambahkan kode di atas, kompilasi dan Anda akan melihat utilitas baru ini telah dibuat:

.u-clearFix {
    /* If supporting IE 6/7 */
	zoom: 1;
}

.u-clearFix:before, .u-clearFix:after {
	content: "";
	display: table;
}

.u-clearFix:after {
	clear: both;
}

Menghasilkan Struktur BEM

Untuk mengaktifkan output sintaks BEM di postcss-bem, lewati opsi style: 'bem' di Gulpfile atau Gruntfile Anda seperti:

/* Gulpfile */
var processors = [
	bem({style: 'bem'}),
	nested
];
    
/* Gruntfile */
processors: [
    require('postcss-bem')({style: 'bem'}),
    require('postcss-nested')()
]

Secara default postcss-bem akan menggunakan pemisah resmi untuk pengubah dari garis bawah tunggal _. Jika penting untuk proyek Anda bahwa Anda menggunakan pemisah dua dasbor yang lebih umum -- sebagai gantinya, Anda dapat mengubah konfigurasi untuk plugin postcss-bem dengan masuk ke folder node_modules / postcss-bem proyek Anda, membuka index.js , mencari baris 15 dan mengubah ini:

    bem: {
        separators: {
            namespace: '--',
            descendent: '__',
            modifier: '_'
        }
    }

... untuk ini:

    bem: {
        separators: {
            namespace: '_',
            descendent: '__',
            modifier: '--'
        }
    }

Menghasilkan Block

Karena 'blok' dalam BEM berkorelasi dengan 'komponen' dalam SUIT, gunakan sintaks @component block-name {...} untuk menghasilkan blok.

Untuk membuat blok search-form tambahkan kode ini:

1	@component search-form {
2	padding: 0;
3	margin: 0;
4	}

Kemudian kompilasi dan Anda akan melihat:

1	.search-form {
2	padding: 0;
3	margin: 0;
4	}

Menghasilkan Elemen

Sebagai 'elemen' di BEM berkorelasi dengan “descendent” di SUIT, mereka dapat dibuat dengan sintaks @descendent element-name {...} bersarang di dalam blok induk.

Untuk membuat elemen text-field tambahkan yang berikut:

@component search-form {
    padding: 0;
	margin: 0;
	
	@descendent text-field {
		border: 1px solid #ccc;
	}

}

Pada saat kompilasi, Anda akan melihat elemen baru Anda telah dibuat:

.search-form {
    padding: 0;
	margin: 0;
}

.search-form__text-field {
	border: 1px solid #ccc;
}

Menghasilkan pengubah

Meskipun BEM memungkinkan pengubah blok dan unsur, plugin postcss-bem hanya akan memproses mereka jika bersarang di dalam blok dan tidak elemen, Konvensi SUIT pengubah sedang diterapkan dengan komponen bukan keturunan. Mereka dapat dibuat dengan nama sintaks @modifier {...}, bersarang di dalam blok orangtua yang.

Tambahkan pengubah advanced ke komponen bentuk search-form Anda seperti:

@component search-form {
    padding: 0;
	margin: 0;
		
	@modifier advanced {
		padding: 1rem;
	}
	
	@descendent text-field {
		border: 1px solid #ccc;
	}

}

Dan pada kompilasi itu akan menghasilkan:

.search-form {
    padding: 0;
	margin: 0;
}

.search-form_advanced {
	padding: 1rem;
}

.search-form__text-field {
	border: 1px solid #ccc;
}

Tidak ada Utilitas atau States, tetapi Berada di Namespaces

Sementara dalam mode BEM @utility dan @when sintaks tidak akan dikompilasi menjadi apa pun, mengingat BEM tidak menggunakan utilitas atau negara.

Namun, meskipun umumnya bukan bagian dari BEM, thesintaks @component-namespace akan tetap berfungsi jika Anda ingin menggunakannya di stylesheet BEM Anda. Ini akan mengawali kelas Anda dengan name--:

.mine--search-form {
    padding: 0;
	margin: 0;
}

.mine--search-form_advanced {
	padding: 1rem;
}

.mine--search-form__text-field {
	border: 1px solid #ccc;
}

Mari kita rekap

Sekarang Anda tahu semua tentang cara memintas BEM dan SUIT Anda, dan menjadikan proses keseluruhan lebih mudah. Mari kita rangkum semua yang telah kita bahas:

BEM dan SUIT adalah konvensi penamaan kelas yang membantu untuk menjaga fungsi stylesheet berorientasi dan terorganisir, serta membantu pengembang lain mengenali tujuan dari berbagai kelas.
SUIT seperti BEM, tetapi dengan beberapa tambahan ditambahkan dan penyesuaian dibuat
Plugin postcss-bem menyediakan cara pintas untuk membuat kelas BEM dan SUIT, seperti @component,@descendent,@modifier dll.
Plugin juga memungkinkan kode bersarang dengan cara yang bermanfaat, mis. modifier bersarang di dalam komponen atau blok yang mereka modifikasi.
Namespacing dapat dilakukan secara otomatis dengan membungkus kelas dengannama @component-namespace name {...}

Di Tutorial Berikutnya

Selanjutnya, kami melihat cara hebat lain untuk memanfaatkan PostCSS, dan itu adalah dengan menyusun toolkit singkat dan pintas yang dapat kami ambil untuk membuat pengkodean kami lebih cepat dan lebih efisien.

Sampai jumpa di sana!