Seorang kolega saya sangat mendorong metode BEM (Block Element Modifier) untuk CSS dalam sebuah proyek yang dia pimpin, dan saya tidak bisa memahami apa yang membuatnya lebih baik daripada KURANG CSS yang telah kami tulis selama bertahun-tahun.
BEM adalah metodologi CSS. Lainnya termasuk OOCSS dan SMACSS. Metodologi ini digunakan untuk menulis kode modular, extensible, dapat digunakan kembali yang berkinerja baik pada skala.
KURANG adalah preprosesor CSS. Lainnya termasuk Sass dan Stylus. Preprosesor ini digunakan untuk mengubah sumbernya masing-masing menjadi CSS yang diperluas.
BEM dan KURANG tidak sebanding dengan menjadi "lebih baik" dari satu sama lain, mereka adalah alat yang melayani tujuan yang berbeda. Anda tidak akan mengatakan bahwa obeng lebih baik daripada palu, kecuali ketika mempertimbangkan utilitas untuk memecahkan masalah tertentu.
Dia mengklaim "kinerja lebih tinggi" ...
Kinerja perlu diukur antara gaya CSS klasik:
.widget .header
dan gaya BEM dari:
.widget__header
tetapi secara umum, kinerja pemilih CSS bukanlah hambatan, dan tidak perlu dioptimalkan.
"Kinerja" BEM biasanya berkaitan dengan kode penulisan kinerja pengembang. Jika metodologi BEM digunakan secara konsisten dan benar, mudah bagi kelompok pengembang untuk secara bersamaan membuat modul yang berbeda tanpa tabrakan gaya.
Dia mengklaim "mudah dibaca" dan "digunakan kembali" ...
Saya tidak tahu bahwa saya akan memberi tahu pengembang baru bahwa BEM lebih mudah dibaca. Saya dapat mengatakan bahwa ini memberikan beberapa pedoman yang jelas tentang arti dan struktur kelas.
Melihat kelas suka
.foo--bar__baz
Memberitahu saya bahwa ada fooblok yang ada di barnegara bagian, dan berisi bazelemen.
Saya benar-benar akan mengatakan bahwa BEM lebih dapat digunakan kembali daripada model klasik.
Jika dua pengembang membuat blok ( foodan bar), dan kedua blok tersebut memiliki judul, mereka dapat menggunakan kembali blok mereka dengan aman dalam konteks yang berbeda tanpa khawatir akan terjadi tabrakan penamaan.
Itu karena, dalam konteks klasik, .foo .headingdan .bar .headingakan konflik, dan memperkenalkan konflik spesifik yang perlu diselesaikan, mungkin berdasarkan kasus per kasus.
Di situs BEM, kelasnya akan .foo__headingdan .bar__heading, yang tidak akan pernah konflik.
Dia mengklaim "CSS bersarang adalah anti-pola." Apa arti "anti-pola", dan mengapa CSS bersarang buruk?
"Anti-pola" adalah pola pengkodean yang lebih mudah dipelajari dan digunakan oleh pengembang yang tidak berpengalaman daripada alternatif yang lebih tepat.
Sejauh mengapa CSS bersarang itu buruk: Nesting meningkatkan kekhususan pemilih. Semakin tinggi spesifisitas, semakin banyak upaya yang diperlukan untuk menimpanya. Pengembang yang tidak berpengalaman sering khawatir bahwa CSS mereka dapat memengaruhi banyak halaman, sehingga mereka menggunakan penyeleksi seperti:
#something .lorem .ipsum .dolor ul.sit li.amet a.more
Ketika pengembang yang berpengalaman akan khawatir bahwa CSS mereka mungkin tidak mempengaruhi banyak halaman, maka mereka menggunakan penyeleksi seperti:
.more
Dia mengklaim bahwa "semua orang bergerak ke arah menggunakan BEM, jadi kita juga harus." ...
Itu adalah kesalahan kereta musik , jadi abaikan itu sebagai argumen yang buruk. Jangan terjebak pada fallacy fallacy , karena argumen buruk dalam mendukung BEM bukanlah alasan untuk percaya bahwa BEM tidak baik.
Bisakah seseorang tolong jelaskan secara rinci apa yang membuat BEM lebih baik daripada KURANG?
Saya membahas hal ini sebelumnya, BEM & KURANG tidak sebanding. Apel dan jeruk, dll.
Rekan saya benar-benar gagal meyakinkan saya, tetapi saya tidak tahu apakah saya punya pilihan selain mengikuti.
Saya merekomendasikan untuk melihat OOCSS, SMACSS, dan BEM, dan menimbang pro dan kontra dari setiap metodologi ... sebagai sebuah tim . Saya menggunakan BEM karena saya suka ketatnya dalam format, dan tidak keberatan penyeleksi jelek, tapi saya tidak bisa memberi tahu Anda apa yang tepat untuk Anda atau untuk tim Anda. Jangan biarkan seorang individu yang blak-blakan menjalankan pertunjukan. Jika Anda tidak nyaman dengan BEM, ketahuilah bahwa ada alternatif lain yang mungkin lebih mudah didukung tim Anda. Anda mungkin perlu mempertahankan posisi Anda dengan rekan kerja Anda, tetapi dalam jangka panjang kemungkinan akan memiliki efek positif pada hasil proyek Anda.
Saya benar-benar lebih suka bisa menghargai BEM, daripada dengan enggan menerimanya.
Saya menulis jawaban di StackOverflow yang menjelaskan cara kerja BEM . Yang penting untuk dipahami adalah bahwa penyeleksi ideal Anda harus memiliki kekhususan0-0-1-0 sehingga mudah ditimpa dan diperluas.
Memilih untuk menggunakan BEM tidak berarti Anda harus menyerah KURANG! Anda masih bisa menggunakan variabel, Anda masih bisa menggunakan @import, dan Anda tentu bisa terus menggunakan nesting. Perbedaannya adalah Anda ingin output yang diberikan menjadi satu kelas, bukan rantai keturunan.
Di mana Anda mungkin memiliki
.widget {
.heading {
...
}
}
Dengan BEM Anda dapat menggunakan:
.widget {
&__heading {
...
}
}
Selain itu, karena BEM berputar di sekitar blok individual, Anda dapat dengan mudah memisahkan kode menjadi file terpisah. widget.lessakan berisi gaya untuk .widgetblok, sementara component.lessakan berisi gaya untuk .componentblok. Ini membuatnya lebih mudah untuk menemukan sumber untuk kelas tertentu, meskipun Anda mungkin masih ingin menggunakan peta sumber.