(contohnya, untuk menjadikannya lebih ringan), tetapi sebaliknya memerlukan anda untuk mencipta kelas untuk tag utama. Ini membawa kepada masalah - Editor Kandungan akan memasukkan pautan lalai melalui antara muka grafik, yang boleh menyebabkan pautan menjadi hampir tidak kelihatan. Ini juga boleh digunakan untuk semua perenggan, senarai, atau imej dalam bahagian tertentu. Kadang -kadang perlu menulis kandungan HTML tulen tanpa kelas, di mana penyelesaiannya adalah untuk mempunyai gaya induknya dengan pemilih keturunan. Penggunaan cascading ini membolehkan fleksibiliti konteks -ia mempunyai gaya tersuai apabila sesuatu dalam konteks yang berbeza. Oleh itu, kita memerlukan penyelesaian praktikal untuk situasi di mana kita tidak boleh menggunakan BEM tulen, yang agak biasa. Preprocessors CSS boleh membantu kami di sini, dan semua 3 preprocessors popular - kurang, sass dan stylus - dapat memudahkan kerja kita apabila kita perlu mengatasi pemilih dengan pemilih yang lebih spesifik. .Section--dark > a

Kaedah 1 - Gunakan pemilih untuk menambah awalan

<code>.class {
  body & {
    foo: bar;
  }
}</code>

<code>.class {
  body & {
    foo: bar;
  }
}</code>

Anda mungkin mahu menggunakan tag HTML atau badan untuk awalan, tetapi anda juga boleh menggunakan beberapa kandungan yang lebih spesifik yang ada pada halaman, seperti .page, #wrapper, html[lang], dan lain -lain. SASS membolehkan anda meletakkan pemilih yang diawali dalam pembolehubah apabila perubahan berlaku pada masa akan datang.

<code>body .class {
  foo: bar;
}</code>

<code>$prepend1: "html &";
$prepend2: "#wrapper &";

.selector {
  #{$prepend1} {
    background: #cacaca;
  }
  #{$prepend2} {
    background: #fefefe;
  }
}</code>

), anda tidak boleh mengatasinya lagi melainkan jika anda mencipta pemilih yang baru, lebih berat, dan ini tidak selalu mungkin. #wrapper

Kaedah 2-Pemilih Rantaian Sendiri

<code>html .selector {
  background: #cacaca;
}
#wrapper .selector {
  background: #fefefe;
}</code>

<code>.selector {
  {&} {
    background: #cacaca;
  }
  {&}{&} {
    background: #fefefe;
  }
}</code>

<code>.selector.selector {
  background: #cacaca;
}
.selector.selector.selector {
  background: #fefefe;
}</code>

<code>@mixin specificity($num: 1) {
  $selector: &;
  @if $num > 1 {
    @for $i from 1 to $num {
      $selector: $selector + &;
    }
    @at-root #{$selector} {
      @content;
    }
  } @else {
    @content;
  }
}

.selector {
  @include specificity(2) {
    background: #cacaca;
  }
  @include specificity(3) {
    background: #fefefe;
  }
}</code>

Pemikiran Akhir

Langkah semulajadi seterusnya dalam menangani isu -isu kekhususan dalam CSS yang lebih bijak daripada sebelumnya adalah untuk mewujudkan cara untuk mengenal pasti pernyataan yang bercanggah, menggunakan sesuatu seperti sass mixin David Khourshid untuk setiap kekhususan entiti, kemudian menggunakan salah satu kaedah di atas untuk memperbaiki kekhususan. Mungkin saya terlalu optimis mengenai impian saya tentang gaya gaya diri, tetapi saya fikir logik kompleks dalam kod kami akan meningkat apabila preprocessors CSS berkembang. Antara kaedah di atas yang akan anda gunakan pada masa akan datang, anda perlu menangani masalah kekhususan? Apakah strategi lain yang anda gunakan untuk menyelesaikan masalah kekhususan anda?

Soalan Lazim Mengenai CSS Preprocessor dan Specifice Selector

akan lebih tinggi daripada .class.class. Walau bagaimanapun, kaedah ini harus digunakan dengan berhati -hati, kerana ia akan menjadikan CSS anda lebih sukar untuk mengekalkan dan menimpa. .class

Bagaimana untuk menguruskan kekhususan dalam preprocessors CSS?

Terdapat beberapa strategi untuk menguruskan kekhususan dalam preprocessors CSS. Satu adalah menggunakan pemilih spesifik rendah sebanyak mungkin. Satu lagi adalah untuk mengelakkan bersarang yang tidak perlu, kerana ini meningkatkan kekhususan. Anda juga boleh menggunakan kaedah BEM (blok, elemen, pengubahsuaian) untuk memastikan kekhususan rendah dan konsisten.

Bolehkah saya menggunakan! Penting untuk mengatasi kekhususan dalam preprocessor CSS?

Ya, anda boleh menggunakan peraturan !important untuk mengatasi kekhususan dalam preprocessor CSS. Walau bagaimanapun, ini harus menjadi usaha terakhir, kerana ia akan menjadikan CSS anda lebih sukar untuk mengekalkan dan boleh membawa kepada konflik tertentu.

Bagaimanakah susunan pemilih mempengaruhi kekhususan dalam preprocessors CSS?

Perintah pemilih mempengaruhi kekhususan dalam preprocessor CSS. Jika kekhususan kedua -dua pemilih adalah sama, pemilih terakhir yang muncul dalam CSS akan digunakan. Ini dipanggil kekhususan pesanan sumber.

Bolehkah saya menggunakan gaya inline untuk mengatasi kekhususan dalam preprocessor CSS?

Ya, gaya inline mempunyai kekhususan tertinggi dalam CSS dan boleh mengatasi gaya lain. Walau bagaimanapun, gunakannya dengan berhati -hati, kerana mereka boleh menjadikan CSS anda lebih sukar untuk dikekalkan dan boleh membawa kepada gaya yang tidak konsisten.