Kekhususan pemilih dengan preprocessors CSS

mata utama

kekhususan pemilih adalah masalah berulang dalam projek sederhana dan besar yang memerlukan pengurusan dan pemahaman yang teliti. Alat seperti Kalkulator Interaktif dan Sass 'Mixin boleh membantu memahami dan menguruskan kekhususan.
BEM (blok, elemen, pengubah) adalah alat yang berkuasa untuk mengekalkan kekhususan yang konsisten. Dengan menggunakan nama kelas untuk setiap elemen gaya, kekhususan setiap pemilih tetap sama, menghapuskan masalah pemilih yang terlalu spesifik. Walau bagaimanapun, BEM mungkin tidak sesuai untuk semua jenis projek, terutama yang bukan pemaju mungkin perlu menulis HTML separa.
Preprocessors CSS seperti Less, Sass, dan Stylus menyediakan penyelesaian kepada masalah tertentu. Salah satu cara ialah menambah pemilih sedia ada dengan kelas, atribut, ID, atau pemilih jenis untuk meningkatkan kekhususannya. Kaedah ini mempunyai batasan kerana apabila pemilih yang paling berat digunakan, ia tidak boleh ditimpa kecuali pemilih yang baru dan lebih berat dibuat.
Pendekatan lain ialah pemilih rantaian diri, yang berfungsi dengan pemilih ID, kelas, dan atribut. Kaedah ini menyediakan cara yang hampir berskala untuk mengatasi pemilih mana -mana, tetapi tidak berfungsi dengan pemilih jenis. Dengan menggunakan pemilih rujukan induk, pemilih yang sama boleh dikaitkan dengan dirinya sendiri beberapa kali, setiap kali meningkatkan kekhususannya.

kekhususan pemilih adalah masalah sebenar bagi kebanyakan projek sederhana dan besar, dan seperti mana -mana isu pengekodan yang sering diulangi, ia perlu ditangani dengan teliti. Malah CSS-Tricks mempunyai artikel baru-baru ini tentang bagaimana untuk memastikan kekhususan CSS rendah. Sebelum anda cuba menggunakan

, izinkan saya mengingatkan anda: & gt; - Tony Nelson (@Tonynelson19) 18 November 2010 !important !important kekhususan CSS tidak rumit, tetapi masyarakat telah melakukan banyak kerja untuk menjadikannya mudah difahami mungkin, menulis panduan dengan menggunakan analogi untuk ikan dan Star Wars atau menggunakan istilah poker. Terdapat kalkulator interaktif yang terdapat dalam talian, dan juga Mixin khusus Sass, yang membolehkan anda menyemak dan mengeluarkan nilai kekhususan yang tepat bagi pemilih. Dalam strategi khusus CSS, lebih mudah lebih baik, penyelesaian khusus dalam artikel ini (yang mungkin merasakan sedikit kekok) sesuai untuk situasi di mana seni bina tidak membenarkan pembetulan mudah. Apabila memutuskan pendekatan mana yang terbaik untuk projek anda, gunakan penghakiman anda dan akhirnya cuba menyerang keseimbangan sempurna antara CSS yang bersih dan mudah untuk dikekalkan. !important

kaedah 0 - bem

BEM bukan sekadar konvensyen penamaan, ia adalah toolkit front-end yang dicipta oleh Yandex, dengan idea menjadi lebih dekat dengan pengaturcaraan berorientasikan objek. Dalam amalan, ini bermakna menggunakan nama kelas untuk semua yang anda mahu gaya. Walaupun "tidak selongsong dalam lembaran gaya cascading" mungkin terdengar tidak masuk akal bagi sesetengah orang, elakkan menggunakan pemilih jenis apabila membuat modul yang harus mudah dikekalkan, mudah alih, mandiri, mudah diubahsuai dan diperpanjang dan idea untuk mengelakkan sarang sangat membantu. Walau bagaimanapun, salah satu kelebihan utama kaedah BEM ialah ia mengekalkan kekhususan setiap pemilih tidak berubah, jadi hampir tidak ada masalah yang disebabkan oleh pemilih yang terlalu spesifik, itulah sebabnya kaedah ini adalah kaedah No 0 - jika anda mengamalkannya , anda sebenarnya menghapuskan sebarang isu masa depan dengan kekhususan pemilih dalam projek anda.

Spesifikasi Peraturan

kerana anda hanya akan menggunakan kelas tunggal untuk semua yang anda tulis, kekhususan setiap pemilih akan menjadi 0,1,0

bem bukan jawapan

Terdapat banyak kisah kejayaan mengenai penggunaan seni bina front-end BEM, bagaimanapun, walaupun popularitinya, BEM tidak sesuai untuk jenis projek tertentu. Nampaknya sempurna untuk pemaju depan untuk menjadi satu-satunya projek untuk menulis HTML. Walau bagaimanapun, jika anda menulis kandungan untuk CMS untuk sekurang -kurangnya sebahagian daripada editor kandungan, BEM akan dihadkan dengan teruk. Bentuk tulen BEM tidak membenarkan pemilih bersarang dan jenis, seperti

(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

Apabila anda menghadapi masalah kekhususan dan ingin membuat pemilih lebih berat, anda boleh menambah kelas, atribut, ID, atau pemilih taip sebelum pemilih yang sedia ada. Dengan cara ini, anda boleh sedikit meningkatkan kekhususan. Walaupun ciri ini digunakan terutamanya untuk mencari IE menggunakan tag HTML bersyarat, ia mempunyai lebih banyak ciri yang akan dibangunkan. Pemilih Rujukan Ibu Bapa (&) dalam preprocessor CSS membolehkan kami dengan mudah menambah awalan pemilih untuk menjadikannya lebih berat, jadi kami boleh melakukan perkara berikut:

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

dicipta CSS:

<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>

ini akan menjana:

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

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

Preprocessors popular lain seperti Less dan Stylus juga menawarkan ciri ini.

Spesifikasi Peraturan

Menambah awalan pemilih kelas asal kami 0,1,0 dengan pemilih jenis akan menghasilkan 0,1,1, dan awalan dengan ID - 1,1,0. Kelemahan di sini ialah apabila anda menambah awalan pemilih dengan pemilih yang paling berat dalam kod anda (iaitu

), 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

Menambah awalan pemilih berguna, tetapi ia bukan penyelesaian yang tidak dapat disangkal - anda mungkin hanya mempunyai cara yang terhad untuk mencari ibu bapa. Di samping itu, sebaik sahaja anda awalan pemilih berganda dengan pilihan paling berat dalam kod anda, anda akan mengehadkan pilihan untuk menyelesaikan masalah kekhususan kemudian (terutamanya jika anda menggunakan ID). Masyarakat front-end baru-baru ini telah diingatkan tentang ciri CSS yang sangat berguna-pemilih rantaian diri untuk meningkatkan kekhususan mereka. Pemilih rantaian sendiri sesuai untuk pemilih ID, kelas, dan atribut, tetapi bukan untuk pemilih jenis. Walau bagaimanapun, jika anda menggunakan kelas untuk kandungan gaya, pemilih rantaian diri menyediakan anda dengan cara yang berskala yang tak terhingga untuk menimpa pemilih mana-mana. Dengan pemilih rujukan induk, anda boleh dengan mudah menghubungkan pemilih yang sama dengan dirinya sendiri beberapa kali (ini terpakai kepada pemilih ID, kelas, dan atribut, tetapi tidak menaip pemilih). Walau bagaimanapun, anda perlu memasukkan setiap & selepas yang pertama, keperluan minimum adalah SASS 3.4:

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

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

Begitu juga, anda boleh melakukan ini dengan menggunakan kurang dan stylus. Jika ini terlalu hodoh untuk citarasa anda, anda sentiasa boleh membuat campuran yang secara beransur -ansur meningkatkan kekhususan mana -mana pemilih tunggal. Mixin ini menggunakan beberapa ciri canggih dan juga memerlukan SASS 3.4:

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

dicipta CSS:

<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>

anda boleh membuat campuran yang sama di stylus, malangnya tidak ada cara mudah untuk membuat campuran sedemikian kurang.

Spesifikasi Peraturan

Rantaian diri meningkatkan kekhususan pemilih dari 0,1,0 hingga 0,2,0, dan sebagainya, menjadikannya hampir berskala.

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

Apakah kekhususan pemilih dalam preprocessor CSS?

kekhususan pemilih adalah konsep dalam CSS yang menentukan gaya mana yang digunakan untuk unsur -unsur apabila peraturan yang bertentangan wujud. Ia adalah sistem berat yang diberikan kepada pemilih jenis yang berbeza (seperti ID, kelas, dan pemilih jenis). Dalam preprocessors CSS seperti SASS atau kurang, konsep ini tetap sama. Walau bagaimanapun, preprocessor ini menyediakan fungsi tambahan seperti bersarang, yang mempengaruhi kekhususan pemilih.

Bagaimanakah bersarang mempengaruhi kekhususan pemilih dalam preprocessors CSS?

Nesting adalah ciri dalam preprocessor CSS yang membolehkan anda menulis lebih teratur dan mudah dibaca kod. Walau bagaimanapun, ia juga meningkatkan kekhususan pemilih. Setiap tahap bersarang menambah kekhususan, menjadikan pemilih bersarang lebih spesifik daripada pemilih induk. Ini berguna untuk menimpa gaya, tetapi juga boleh membawa kepada akibat yang tidak dijangka jika tidak diuruskan dengan betul.

Bagaimana untuk mengira kekhususan pemilih dalam preprocessors CSS?

kekhususan pemilih dikira berdasarkan jenis pemilih yang digunakan. Umumnya, pemilih ID paling spesifik, diikuti oleh pemilih kelas, dan kemudian taipkan pemilih. Setiap jenis pemilih diberikan berat yang berbeza, dan jumlah kekhususan adalah jumlah berat ini. Sesetengah preprocessors CSS, seperti SASS, menyediakan fungsi untuk mengira kekhususan pemilih.

Apa maksud "&" dalam gaya CSS dalam preprocessors seperti SASS?

Simbol "&" digunakan dalam preprocessors CSS seperti SASS untuk merujuk pemilih induk dalam peraturan bersarang. Ini berguna untuk mewujudkan pemilih yang lebih spesifik atau menggunakan gaya ke negeri -negeri yang berbeza dari elemen, seperti keadaan hover atau aktif.

Bagaimana menggunakan pemilih dua dalam SASS untuk meningkatkan berat tertentu?

Dalam SASS, anda boleh meningkatkan kekhususannya dengan menyalin pemilih. Ini dipanggil pautan atau pemilih berganda. Sebagai contoh, kekhususan

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

Apakah masalah yang berpotensi dengan kekhususan yang tinggi dalam preprocessors CSS?

kekhususan yang tinggi akan menjadikan CSS anda lebih sukar untuk dikekalkan dan menutupi. Ia boleh membawa kepada konflik kekhususan yang dipanggil, dan anda perlu sentiasa memperbaiki kekhususan pemilih untuk menutup gaya sebelumnya. Ini boleh menyebabkan CSS membengkak dan kompleks.

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.

Atas ialah kandungan terperinci Kekhususan pemilih dengan preprocessors CSS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!