Menjinakkan lata dengan pemilih BEM dan moden CSS

bem. Seperti hampir semua teknologi dalam pembangunan front-end, menulis CSS dalam format BEM boleh menyebabkan polarisasi. Tetapi dalam bulatan sosial Twitter saya, ia adalah sekurang -kurangnya salah satu kaedah CSS yang lebih popular.

Saya secara peribadi berfikir BEM adalah baik dan saya fikir anda harus menggunakannya. Tetapi saya juga dapat memahami mengapa anda mungkin tidak menggunakannya.

Apa pun pendapat anda tentang BEM, ia menawarkan beberapa faedah, manfaat terbesar ialah ia membantu mengelakkan konflik tertentu dalam lata CSS. Ini kerana, jika digunakan dengan betul, mana -mana pemilih yang ditulis dalam format BEM harus mempunyai skor kekhususan yang sama (0,1,0). Selama bertahun -tahun, saya telah merancang CSS untuk banyak laman web besar (berfikir kerajaan, universiti, dan bank) dan ini adalah projek -projek besar yang membuat saya dapati di mana BEM benar -benar bersinar. Menulis CSS lebih menyeronokkan apabila anda yakin bahawa gaya yang anda tulis atau penyuntingan tidak menjejaskan bahagian lain di laman web.

Malah, dalam beberapa kes, menambah kekhususan dianggap benar -benar boleh diterima. Contohnya: kelas pseudo. Skor kekhususan mereka ialah 0,2,0. Yang lain adalah pseudo-elements-contohnya, ：hover dan ：focus-skor kekhususan itu adalah 0,1,1. Walau bagaimanapun, dalam artikel ini, marilah kita mengandaikan bahawa kita tidak mengharapkan penyebaran khusus lain. ? ::before ::after Tetapi saya tidak mahu menjual bem anda. Sebaliknya, saya ingin bercakap tentang bagaimana kita menggunakannya bersempena dengan pemilih CSS moden (mis. ,

, :is(), dan lain -lain) untuk kawalan cascade yang lebih kuat. :has() :where() Apakah pemilih CSS moden?

Spesifikasi CSS Selector Level 4 memberikan kita beberapa cara yang kuat dan agak baru untuk memilih elemen. Beberapa kegemaran saya termasuk

,

dan :is(), yang semuanya disokong oleh semua pelayar moden dan kini selamat digunakan dalam hampir mana -mana projek. :where() :not()

dan

pada dasarnya sama, kecuali bahawa mereka mempunyai kesan yang berbeza terhadap kekhususan. Khususnya, skor kekhususan :is() sentiasa 0,0,0. Ya, walaupun :where() tidak spesifik. Pada masa yang sama, kekhususan :where() adalah kekhususan elemen yang paling spesifik dalam senarai parameternya. Oleh itu, kita sudah mempunyai perbezaan dalam penamat Cascade antara dua pemilih moden yang boleh digunakan. :where(button#widget.some-class) :is() kelas pseudo yang kuat juga cepat mendapat sokongan pelayar (pada pendapat saya, ini adalah ciri baru CSS terbesar sejak grid). Walau bagaimanapun, pada masa penulisan, sokongan penyemak imbas untuk

tidak cukup baik untuk digunakan dalam persekitaran pengeluaran.

:has() izinkan saya menambah kelas pseudo ke bem saya ... :has()

<code>/* ❌ 特异性分数：0,2,0 */
.something:not(.something--special) {
  /* 所有 something 的样式，除了特殊的 something */
}</code>

oh tidak! Pernahkah anda melihat skor khusus itu? Ingat, dengan BEM, kami dengan idealnya mengharapkan pemilih kami mempunyai skor tertentu sebanyak 0,1,0. Mengapa 0,2,0 tidak baik? Pertimbangkan contoh lanjutan yang sama:

<code>.something:not(a) {
  color: red;
}
.something--special {
  color: blue;
}</code>

Walaupun pemilih kedua akhirnya muncul dalam urutan kod sumber, kekhususan yang lebih tinggi pemilih pertama (0,1,1) akan menang, dan warna unsur .something--special akan ditetapkan ke merah. Iaitu, anggap bahawa BEM anda ditulis dengan betul dan elemen yang dipilih menggunakan kedua -dua kelas asas .something dan kelas pengubah .something--special dalam HTML.

Jika digunakan secara tidak wajar, kelas pseudo ini boleh menjejaskan lata dengan cara yang tidak dijangka. Ia adalah ketidakkonsistenan yang boleh menyebabkan masalah kemudian, terutamanya dalam pangkalan kod yang lebih besar dan lebih kompleks.

oh. Jadi apa yang perlu dilakukan sekarang?

ingat apa yang saya katakan :where() dan kekhususannya adalah sifar? Kita boleh memanfaatkannya:

<code>/* ✅ 特异性分数：0,1,0 */
.something:where(:not(.something--special)) {
  /* 等 */
}</code>

Bahagian pertama pemilih ini (.something) memperoleh skor kekhususan biasa 0,1,0. Tetapi kekhususan :where() -dan segala -galanya di dalamnya -adalah 0, dan tidak lagi meningkatkan kekhususan pemilih.

: di mana () membolehkan kita bersarang

Mereka yang tidak peduli tentang kekhususan seperti yang saya lakukan (dan bersikap adil, mungkin banyak orang) telah melakukan yang baik dalam bersarang. Dengan beberapa menaip papan kekunci rawak, kami mungkin mendapat CSS seperti ini (perhatikan bahawa saya menggunakan sass untuk kesederhanaan):

<code>.card { ... }

.card--featured {
  /* 等 */  
  .card__title { ... }
  .card__title { ... }
}

.card__title { ... }
.card__img { ... }</code>

Dalam contoh ini, kita mempunyai komponen .card. Apabila ia adalah kad "dipaparkan" (menggunakan kelas .card--featured), tajuk dan imej kad perlu menjadi gaya yang berbeza. Walau bagaimanapun, seperti yang kita ketahui sekarang, skor kekhususan yang disebabkan oleh kod di atas tidak konsisten dengan sistem kami yang lain. Fanatik khusus yang degil mungkin melakukan ini:

tidak buruk, bukan? Terus terang, ini adalah CSS yang cantik.

<code>.card { ... }
.card--featured { ... }
.card__title { ... }
.card__title--featured { ... }
.card__img { ... }
.card__img--featured { ... }</code>

Walau bagaimanapun, HTML juga mempunyai kelemahannya. Penulis BEM yang berpengalaman mungkin menyedari bahawa logik templat kompleks diperlukan untuk menggunakan kelas pengubahsuaian secara kondusif untuk pelbagai elemen. Dalam contoh ini, templat HTML perlu menambahkan kelas pengubahsuaian

kepada tiga elemen (

,

, dan --featured), tetapi mungkin lebih banyak dalam contoh dunia nyata. Terdapat banyak jika kenyataan. .card Pemilih .card__title .card__img boleh membantu kami menulis kurang logik template -dan kurang kelas BEM -tanpa meningkatkan tahap kekhususan.

:where() Berikut adalah kandungan yang sama dalam SASS (perhatikan trailing versus):

<code>.card { ... }
.card--featured { ... }

.card__title { ... }
:where(.card--featured) .card__title { ... }

.card__img { ... }
:where(.card--featured) .card__img { ... }</code>

sama ada anda harus memilih kaedah ini dan bukannya menggunakan kelas pengubah kepada pelbagai elemen kanak -kanak bergantung kepada keutamaan peribadi. Tetapi sekurang -kurangnya

sekarang kita mempunyai pilihan!

<code>.card { ... }
.card--featured { ... }
.card__title { 
  /* 等 */ 
  :where(.card--featured) & { ... }
}
.card__img { 
  /* 等 */ 
  :where(.card--featured) & { ... }
}</code>

Apa yang harus saya lakukan jika saya tidak mempunyai BEM HTML?

kita hidup dalam dunia yang tidak sempurna. Kadang -kadang anda perlu berurusan dengan HTML yang berada di luar kawalan anda. Sebagai contoh, suntikan skrip pihak ketiga yang anda perlukan untuk gaya HTML. Tag ini biasanya tidak ditulis menggunakan nama kelas BEM, dan dalam beberapa kes, gaya ini tidak menggunakan kelas sama sekali, tetapi ID!

Begitu juga, :where() juga boleh membantu kita menyelesaikan masalah ini. Penyelesaian ini agak kekok kerana kita perlu merujuk kepada kelas di dalam pokok Dom yang kita tahu ada.

<code>/* ❌ 特异性分数：0,2,0 */
.something:not(.something--special) {
  /* 所有 something 的样式，除了特殊的 something */
}</code>

memetik elemen induk terasa sedikit berisiko dan ketat. Bagaimana jika kelas induk berubah atau tidak wujud atas sebab tertentu? Penyelesaian yang lebih baik (tetapi mungkin sama -sama canggung) adalah menggunakan :is() sebaliknya. Ingat bahawa kekhususan :is() adalah sama dengan pemilih yang paling spesifik dalam senarai pemilihnya.

jadi kita boleh menggunakan :is() untuk merujuk kepada kelas yang kita tahu (atau harapan!) Ada, bukannya menggunakan :where() seperti dalam contoh di atas.

<code>.something:not(a) {
  color: red;
}
.something--special {
  color: blue;
}</code>

yang sentiasa sedia ada body akan membantu kami memilih elemen #widget, dan kehadiran kelas :is() dalam .dummy-class yang sama akan menjadikan pemilih body mempunyai skor kekhususan yang sama (0,1,0) sebagai kelas ... dan gunakan :where() untuk memastikan pemilih tidak lebih spesifik daripada ini.

itu sahaja!

Ini adalah bagaimana kita mengambil kesempatan daripada keupayaan pengurusan khusus moden :is() dan :where() kelas pseudo dan keupayaan pencegahan konflik tertentu yang diperoleh ketika menulis CSS dalam format BEM. Dalam masa terdekat, sekali :has() disokong oleh Firefox (ia kini disokong di belakang logo pada masa penulisan), kita mungkin mahu memasangkannya dengan :where() untuk membatalkan kekhususannya.

Sama ada anda menamakan sepenuhnya dengan BEM atau tidak, saya harap kami boleh bersetuju bahawa kekhususan pemilih adalah perkara yang baik!

Atas ialah kandungan terperinci Menjinakkan lata dengan pemilih BEM dan moden CSS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!