Apa yang membuat BEM lebih baik daripada menggunakan bahasa style sheet nestable seperti KURANG?

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.

Dia mengklaim "kinerja lebih tinggi", tapi saya tidak bisa membayangkan bagaimana kinerja bahkan dapat berarti untuk jenis aplikasi web yang kita tulis di toko kode ini. Kami tidak membuat Twitter atau Facebook, di sini. Saya akan sangat terkejut jika aplikasi dengan penggunaan tertinggi kami memiliki lebih dari 10.000 hit per bulan , dan sebagian besar berada di bawah 1000.

Dia mengklaim "keterbacaan" dan "penggunaan kembali", tetapi KURANG sudah melakukan itu jauh lebih baik , menurut saya. Dan saya merasa bahwa BEM sangat merusak markup dengan puluhan karakter tambahan yang didedikasikan untuk nama-nama kelas super panjang yang secara radikal mengurangi keterbacaan.

Dia mengklaim "CSS bersarang adalah anti-pola." Apa "anti-pola" bahkan berarti , dan mengapa bersarang CSS buruk?

Dia mengklaim bahwa "semua orang bergerak ke arah menggunakan BEM, jadi kita juga harus melakukannya." Counter saya adalah "Jika semua orang melompat dari jembatan, apakah Anda akan mengikuti?" Tapi dia masih sangat bersikeras tentang ini.

Bisakah seseorang tolong jelaskan secara rinci apa yang membuat BEM lebih baik daripada KURANG? Rekan saya benar-benar gagal meyakinkan saya, tetapi saya tidak tahu apakah saya punya pilihan selain mengikuti. Saya benar-benar lebih suka bisa menghargai BEM, daripada dengan enggan menerimanya.

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.

Edit 2017

Jika Anda membaca ini di tahun 2017, shadow DOM dan shadow DOM polyfill, plus komponen menyelesaikan semua masalah ini, sambil menjaga kode Anda kecil, kencang dan modular. Jangan gunakan BEM pada proyek greenfield IMO.

Alih-alih BEM, kami memiliki alat seperti ViewEncapsulation, Polymer, StyledJSX, SASS Modules, Styled Components, dll.

Pertimbangkan menggunakan BEM jika Anda tidak memiliki arsitektur berorientasi komponen; jika Anda memiliki kode lawas untuk didukung; atau jika Anda baru saja mati melakukan segala sesuatu secara manual tanpa alat.

BEM membuat gaya Anda tidak tergantung pada sarang DOM Anda. Itu melakukan ini dengan memberikan setiap elemen yang Anda mungkin ingin gaya atribut kelas keledai besar yang cenderung unik di halaman Anda. Kebanyakan gaya kemudian dilakukan di kelas.

Ini membuat kode Anda lebih modular, karena bersarang tidak lagi diperhitungkan, dengan mengorbankan banyak kata.

Tanpa BEM

Tanpa BEM, kami dapat menulis ini:

<div class="widget">
  <a>Hello!</a>
  <ul>...</ul>
</div>

Gaya CSS standar mungkin terlihat seperti ini:

.widget {
  border: 1px solid red;
}

.widget a {
  color: green;
}

Hal yang sama dengan SASS akan terlihat seperti ini:

.widget {
  border: 1px solid red;
  a {
    color: green;
  }
}

Jika Anda adalah tim kecil di mana setiap orang dapat mengode CSS ke standar yang tinggi, dan proyek ini cukup kecil sehingga Anda dapat mempertahankannya sepenuhnya, ini adalah solusi yang baik dan masuk akal.

Dengan BEM

Namun, jika kode Anda menjadi lebih besar, dan Anda memiliki tim kemampuan campuran yang besar, ini mungkin bukan solusi yang sederhana. Bagaimana jika Anda ingin jangkar hijau di widget lain misalnya. Jadi kami membuat jangkar modular, dan menghilangkan pemilih keturunan.

Sekarang HTML kami jauh lebih bertele-tele:

<div class="widget">
  <a class="widget__anchor">Hello!</a>
  <ul class="widget__ul">...</ul>
</div>

CSS kami tidak memiliki penyeleksi turunan:

.widget {
  border: 1px solid red;
}

.widget__anchor {
  color: green;
}

Tapi sekarang kita bisa melakukan ini:

<div class="widget__2">
  <a class="widget__anchor">Hello!</a>
</div>

Widget__anchor bersifat modular. Tidak mungkin bahwa definisi lain .widget__anchor akan ada di laman.

pengorbanan:

BEM:

• Memberi Anda lebih banyak kode modular. Anda dapat mengambil bagian apa pun secara terpisah.
• Memungkinkan siapa pun menulis CSS. Anda tidak perlu mewaspadai gaya master, dan penggantian kustom. Dalam tim besar, ini bagus.
• Menghapus masalah kekhususan apa pun.
• Secara signifikan lebih bertele-tele.

CSS standar (yang bergantung pada penggunaan penyeleksi keturunan):

• Berarti gaya Anda tergantung pada konteks.
• Membutuhkan kesadaran kaskade. Kode di satu tempat dapat mempengaruhi kode di tempat lain. Dalam tim kecil ini adalah hal yang baik.
• Dapat menderita masalah kekhususan yang mungkin sulit bagi pengembang pemula untuk melakukan debug.
• Secara signifikan lebih ketat.

Cara ketiga - Komponen Nyata.

Jika Anda menggunakan sesuatu seperti React, Angular 2, atau salah satu dari framewords front-end modern lainnya, Anda memiliki solusi lain. Anda dapat menggunakan alat untuk menegakkan enkapsulasi.

Contoh ini menggunakan React dan StyledJSX, tetapi ada banyak opsi. Ini widgetnya:

const Widget = () => 
  <div>
    <a>Hello</a>
  </div>
  <style jsx>
    div {border:red }
    a { background: pink }
  </style>

Anda kemudian akan menggunakan widget baru seperti ini:

<Widget />

Semua gaya yang dinyatakan dalam widget akan dirangkum, dan tidak akan berlaku untuk elemen di luar komponen. Kami bebas untuk gaya divdan alangsung tanpa khawatir tentang sengaja menata apa pun di halaman.

Tidak ada pendekatan yang sempurna. IMHO, kita harus mendapatkan bagian terbaik dari masing-masing metodologi (BEM, SMACSS, OOCSS, KERING). Gunakan SMACSS untuk mengatur struktur folder Anda di CSS Anda - khusus untuk mendefinisikan tingkat logis dari keseluruhan CSS. KERING untuk membuat pustaka utilitas Anda atau mungkin pustaka pengubah umum untuk digunakan terkadang bersama dengan kelas berbasis BEM. OOCSS untuk komponen. Dan BEM untuk komponen atau sub-komponen kecil. Di sana Anda dapat mendistribusikan kompleksitas, dan mendapatkan kebebasan untuk bekerja di dalam tim besar.

Apa pun yang digunakan tanpa memahami esensi akan berakibat buruk.

Walaupun BEM adalah pendekatan yang baik untuk tim yang lebih besar, BEM juga memiliki beberapa kelemahan. 1. Terkadang menghasilkan nama yang sangat panjang dalam struktur HTML besar. Menghasilkan ukuran file CSS besar. 2. Untuk html bersarang yang lebih dari 2-3 level, menjadi sakit kepala untuk menentukan nama.

Resolusi konflik dapat dengan mudah dikelola jika kita memikirkan struktur komponen bersama dengan serangkaian gaya dasar yang sangat mendasar. Ini lebih dari warisan dua tingkat saja. Setiap elemen di dalam komponen akan memiliki aturan gaya global atau khusus untuk komponen itu. Ini adalah salah satu opsi yang lebih mudah.