Gaya responsif menggunakan pemilih atribut

Satu cabaran dengan gaya atomisasi berdasarkan nama kelas adalah bahawa ia sering bergantung pada titik putus tertentu untuk menentukan konteksnya.

<div></div>
<div></div>
<div></div>

Awalan biasanya digunakan untuk mencari setiap titik putus:

<div></div>

Ini berfungsi dengan baik sebelum menambah pelbagai kelas. Tetapi apabila kita mula menambah pelbagai kelas, sukar untuk mengesan kelas mana yang berkaitan dengan titik putus dan di mana untuk menambah, memadam atau menukar kandungan.

<div>
</div>

Kita boleh cuba meningkatkan kebolehbacaan dengan berkumpul semula:

<div>
</div>

Kami juga boleh menambah beberapa splitter khas (nama kelas tidak sah akan diabaikan):

<div>
</div>

Tetapi ia masih terasa mengelirukan dan sukar difahami.

Kami boleh mendapatkan gambaran yang lebih baik dan mengelakkan pelaksanaan awalan dengan mengumpulkan pemilih harta dan bukannya kelas sebenar:

<div data-lg="span-4 font-size-xl font-weight-700" data-md="span-6 font-size-xl font-weight-500" data-sm="span-12 font-size-lg"></div>

Ini bukan koleksi kelas, tetapi set sifat yang dipisahkan ruang, yang boleh kita pilih menggunakan pemilih [attribute~="value"] , di mana ~= memerlukan perkataan yang tepat muncul dalam nilai atribut untuk dipadankan.

 @media (min-lebar: 0) {
 [data-sm ~ = "span-1"] {/*...*/}
 [data-sm ~ = "span-2"] {/*...*/}
 / * dll */
}
@media (min-lebar: 30Rem) {
 [data-md ~ = "span-1"] {/*...*/}
 [data-md ~ = "span-2"] {/*...*/}
 / * dll */
}
@media (min-lebar: 60Rem) {
 [data-lg ~ = "span-1"] {/*...*/}
 [data-lg ~ = "span-2"] {/*...*/}
 / * dll */
}

Ini mungkin kelihatan agak pelik, tetapi saya fikir menukar kelas atom ke harta yang agak mudah (mis., Menukar .sm-span-1 ke [data-sm~="span-1"] ). Selain itu, pemilih harta mempunyai kekhususan yang sama seperti kelas, jadi kami tidak kehilangan apa -apa. Selain itu, tidak seperti kelas, sifat boleh ditulis tanpa melarikan diri dari watak -watak khas (seperti / .:? ).

Itu sahaja! Sekali lagi, ini hanya idea untuk membuat kenyataan beralih lebih mudah untuk menulis, membaca dan mengurus dalam pertanyaan media. Ini pastinya bukan cadangan untuk membatalkan kelas atau sesuatu seperti itu.

Atas ialah kandungan terperinci Gaya responsif menggunakan pemilih atribut. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!