Tajuk CSS: Pendekatan Ringkas untuk Penamaan Kelas CSS

3

Takeaways Key

Tajuk CSS adalah metodologi yang memudahkan penamaan kelas CSS dengan menggunakan nama -nama yang dimodalkan untuk kelas global dan nama kecil untuk pengubahsuaian atau kelas keturunan. Pendekatan ini memberikan manfaat BEM tanpa menambah awalan atau aksara khas kepada nama kelas.

Tajuk CSS membantu dalam menulis kelas CSS dengan cara yang lebih semula jadi, menyerupai bahasa bertulis. Ia juga membolehkan nama kelas yang lebih pendek yang lebih cepat untuk menaip dan lebih mudah untuk diimbas. Kelas -kelas yang dipermodalkan mudah dilihat dalam markup, menjadikannya lebih mudah untuk memahami apa kelas keturunan kecil yang dimiliki.

Isu yang berpotensi dengan tajuk CSS timbul apabila blok tajuk mengandungi blok lain dengan kelas pemilih keturunan yang sama. Untuk mengelakkan konflik gaya, kanak -kanak Combinator (>) boleh digunakan dalam blok tajuk yang bertindak sebagai bekas, memastikan gaya hanya digunakan untuk mengarahkan kanak -kanak dan tidak lagi bersarang unsur -unsur dengan nama kelas yang sama.

• Jika anda seperti saya maka anda menghabiskan terlalu banyak masa datang dengan nama kelas yang sempurna untuk elemen. Anda mungkin Google untuk sinonim atau bayangkan apa elemen ini jika ia adalah objek kehidupan sebenar. Anda tahu bahawa nama semantik akan berfungsi, tetapi entah bagaimana cuba memikirkan nama yang sempurna seolah -olah berbaloi.
• Sejujurnya, nama yang sempurna tidak akan membantu stylesheet anda semua yang banyak, tetapi menggunakan metodologi CSS boleh membuat perbezaan besar.
• Contoh metodologi CSS

OOCSS adalah nasihat mesra alam yang membantu anda menulis kelas lestari melalui gaya kitar semula.

SMACSS adalah pelan permainan CSS yang merangkumi semua yang akan melatih anda melalui semua teknik yang betul.

CSS idiomatik adalah pembersih rumah analitik, menganjurkan segala -galanya dalam pakaian seragam untuk pengiktirafan mudah dan ketenangan fikiran.

dan bem? Nah, BEM adalah standard emas penamaan kelas CSS yang mana semua skim penamaan kelas CSS diukur terhadap.

jadi mengapa ada lagi bercakap mengenai penamaan kelas?

Pendekatan BEM adalah mengenai menulis CSS berskala dengan penekanan pada kebolehbacaan dan mengelakkan perlanggaran. Ringkasnya, BEM bermaksud pengendali block__element. Blok adalah elemen yang merangkumi sebahagian kecil unsur -unsur yang berkaitan (dalam SMACSS ia dipanggil modul). Unsur ini adalah keturunan blok dan biasanya tidak akan wujud tanpa kehadiran blok. Pengubahsuaian mengawal keadaan blok.

di BEM, anda menulis nama kelas biasa untuk blok, dan untuk mana -mana elemen anda menyalin nama blok dan masukkan nama elemen.

bem konvensional kelihatan seperti ini:

Ini bagus kerana sesiapa sahaja akan memahami bahawa "block__element" berkaitan dengan "blok" dan ada sedikit peluang kelas "block__element" telah digunakan di tempat lain dalam projek.

tetapi ada masalah dengan pendekatan ini. Anda menulis CSS sepanjang hari dan anda tidak mahu menulis nama kelas panjang yang berlumpur markup bersih anda.

Tajuk CSS adalah tentang memberi anda manfaat BEM tanpa menambahkan sebarang awalan atau aksara khas untuk nama kelas anda.

Trik untuk tajuk CSS adalah mudah

Menggunakan tajuk CSS, anda akan melakukan perkara berikut: Untuk mana -mana kelas CSS global, gunakan nama yang dimodalkan (kes tajuk). Untuk mana -mana pengubahsuaian atau kelas keturunan, gunakan huruf kecil untuk permulaan nama th.

Ini bermakna dengan tajuk CSS anda memanfaatkan nama kelas yang akan dirujuk dalam lembaran styles tanpa kelas induk. Ini bermakna walaupun objek dalam OOCSS dapat dipermodalkan. Perbezaannya adalah mudah; Apa -apa sahaja yang dipermodalkan dalam lembaran gaya tidak boleh digunakan lagi.

Berikut adalah contoh bagaimana markup akan kelihatan apabila menggunakan tajuk CSS:

<span><span><span><div</span> class<span>="block block--modifier"</span>></span>
</span>    <span><span><span><p</span> class<span>="block__element"</span>></span>
</span><span><span><span></div</span>></span></span>

Dan inilah cara CSS yang sepadan akan kelihatan:

<span><span><span><div</span> class<span>="Title isModified"</span>></span>
</span>    <span><span><span><p</span> class<span>="descendant"</span>></span>
</span><span><span><span></div</span>></span></span>

mengapa tajuk CSS berfungsi

Pengenal blok atau kelas "tajuk" membuat skop untuk semua kelas keturunan dalam blok. Kelas keturunan boleh diulangi dalam blok tajuk lain tanpa perlanggaran gaya.

Ini tidak penting bagi metodologi untuk berfungsi tetapi kerana nama kelas HTML adalah kes-sensitif, "tajuk" kelas juga bebas diulang sebagai kelas keturunan.

bagaimana tajuk CSS membantu?

Dengan metodologi tajuk CSS, anda akan melihat manfaat berikut:

• tulis kelas CSS dengan cara yang lebih semula jadi.
• pemilih CSS menyerupai bahasa bertulis, seperti ayat bahasa Inggeris yang bermula dengan huruf besar.
• nama kelas yang lebih pendek lebih cepat menaip dan lebih mudah untuk diimbas.
• Kelas kes tajuk mudah dilihat dalam markup; Untuk melihat apa yang dikatakan kelas keturunan kecil, hanya melintasi nod untuk kelas tajuk.

perangkap dan penyelesaian

Tajuk CSS mungkin mempunyai masalah apabila anda menggunakan blok tajuk untuk mengandungi blok lain. Sekiranya blok tajuk yang mengandungi mempunyai kelas pemilih keturunan yang sama sebagai satu yang sampulnya akan ada konflik, di mana anda harus menggunakan kombinator kanak -kanak dalam blok tajuk yang bertindak sebagai bekas.

Untuk menunjukkan isu ini, di bawah adalah beberapa markup sampel dengan masalah yang hadir:

<span><span>.Title</span> {}
</span>    <span><span>.Title.isModified</span> {}
</span>    <span><span>.Title .descendant</span> {}</span>

dan CSS yang disertakan:

<span><span><span><div</span> class<span>="Container"</span>></span>
</span>    <span><span><span><header</span> class<span>="header"</span>></span><span><span></header</span>></span>
</span>    <span><span><span><main</span> class<span>="body"</span>></span>
</span>        <span><span><span><section</span> class<span>="Title"</span>></span>
</span>            <span><span><span><div</span> class<span>="header"</span>></span><span><span></div</span>></span>
</span>            <span><span><span><div</span> class<span>="body"</span>></span><span><span></div</span>></span>
</span>        <span><span><span></section</span>></span>
</span>        <span><span><span><section</span> class<span>="Title"</span>></span>
</span>            <span><span><span><div</span> class<span>="header"</span>></span><span><span></div</span>></span>
</span>            <span><span><span><div</span> class<span>="body"</span>></span><span><span></div</span>></span>
</span>        <span><span><span></section</span>></span>
</span>    <span><span><span></main</span>></span>
</span><span><span><span></div</span>></span></span>

Perhatikan bahawa gaya yang digunakan untuk unsur -unsur. Header dan. Untuk mengelakkan ini, inilah penyelesaiannya:

<span><span>.Container</span> {}
</span>    <span><span>.Container .header</span> {}
</span>    <span><span>.Container .body</span> {}
</span><span><span>.Title</span> {}
</span>    <span><span>.Title .header</span> {}
</span>    <span><span>.Title .body</span> {}</span>

Dengan pemilih yang menggunakan Combinator Child (>), gaya akan digunakan hanya untuk anak -anak langsung, dan bukan kepada unsur -unsur bersarang yang lebih lanjut yang mempunyai nama kelas yang sama.

perkataan mengenai sass

Pra-pemproses menyediakan cara terbaik untuk menulis tajuk CSS. Keupayaan bersarang membolehkan anda mengenal pasti blok tajuk dengan mudah dalam lembaran styleshe.

Berikut adalah tajuk CSS Contoh dalam SCSS:

<span><span><span><div</span> class<span>="block block--modifier"</span>></span>
</span>    <span><span><span><p</span> class<span>="block__element"</span>></span>
</span><span><span><span></div</span>></span></span>

maklum balas?

sebagai BEM, SMACSS, dan OOCSS akan mencadangkan, adalah penting untuk mengekalkan blok atau modul kecil. Terdapat manfaat prestasi dan penyelenggaraan untuk memasukkan hanya elemen yang berkait rapat dengan kelas tajuk.

Jika anda mempunyai apa -apa pemerhatian atau maklum balas mengenai tajuk CSS, saya gembira mendengarnya dalam komen. Dan jika anda ingin mendapatkan lebih banyak maklumat atau ingin bekerjasama, pastikan anda menyemak GitHub Repo untuk Tajuk CSS.

Soalan Lazim (Soalan Lazim) Mengenai Tajuk CSS dan Penamaan Kelas

Apakah kepentingan tajuk CSS dan penamaan kelas?

tajuk CSS dan penamaan kelas adalah aspek penting dalam pembangunan web. Ia membantu dalam mengatur kod CSS anda, menjadikannya lebih mudah untuk dibaca, memahami, dan mengekalkan. Konvensyen penamaan yang betul juga boleh meningkatkan kecekapan pemilih CSS anda, menjadikan halaman web anda lebih cepat. Selain itu, ia membantu dengan kerjasama kerana ia memberikan pemahaman yang jelas tentang kod tersebut kepada pemaju lain.

Bagaimana saya boleh menambah atribut tajuk dari CSS? Walau bagaimanapun, anda boleh menggunakan JavaScript atau JQuery untuk menambah atribut tajuk secara dinamik ke elemen. Sebagai alternatif, anda boleh menggunakan harta kandungan CSS dengan fungsi attr () untuk memaparkan nilai atribut tajuk, tetapi ia sebenarnya tidak menambah atribut tajuk ke elemen. Mereka boleh digunakan untuk elemen gaya yang mempunyai atribut tertentu atau nilai atribut. Sebagai contoh, input [type = "text"] akan memilih dan gaya semua medan input teks.

Bagaimana saya boleh menggunakan atribut tajuk dalam html? Ia sering dipaparkan sebagai tooltip apabila pengguna melayang ke atas elemen tersebut. Anda boleh menambahkannya ke hampir mana -mana elemen HTML. Sebagai contoh,

hover ke atas saya

.

Apakah amalan terbaik untuk menamakan kelas CSS?

Amalan terbaik untuk menamakan kelas CSS adalah menggunakan nama yang bermakna dan deskriptif. Elakkan menggunakan pembentangan atau perkataan khusus lokasi. Sebaliknya, gunakan nama yang mencerminkan tujuan atau kandungan elemen. Juga, gunakan tanda hubung untuk memisahkan kata -kata dalam nama kelas dan simpan nama -nama yang mungkin. Walau bagaimanapun, secara amnya disyorkan untuk mengelakkan menggunakan aksara khas kerana mereka boleh membuat kod anda lebih sukar untuk dibaca dan difahami.

Bagaimana saya boleh memilih elemen dengan atribut tajuk tertentu dalam CSS?

Anda boleh menggunakan pemilih atribut dalam CSS untuk memilih elemen dengan atribut tajuk tertentu. Sebagai contoh, Div [Title = "Contoh"] akan memilih semua elemen Div dengan nilai atribut tajuk "Contoh".

Bolehkah saya menggunakan nombor dalam nama kelas CSS? Watak pertama mestilah huruf, tanda hubung, atau garis bawah. Sebagai contoh,

. Anda perlu menggunakan javascript atau jQuery untuk menukar atribut tajuk elemen HTML.

Atas ialah kandungan terperinci Tajuk CSS: Pendekatan Ringkas untuk Penamaan Kelas CSS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!