Menggunakan kelas penolong untuk kering dan skala CSS

Anda memulakan projek web baru dan mencari metodologi CSS baru yang akan membantu anda meningkatkan kod anda. Satu set teknik yang semakin meningkat untuk menulis CSS modular boleh didapati, termasuk SMACSS, BEM, dan beberapa metodologi lain yang serupa, semuanya berdasarkan CSS berorientasikan objek (OCSS). Seperti yang anda lihat, terdapat banyak teknik untuk menulis dan mengatur CSS.

Selain semua metodologi ini, ada sesuatu yang dapat membantu kami menulis kering

, kurang berulang kod: kelas penolong (juga dipanggil kelas utiliti).

Konsep ini dibincangkan beberapa ketika dahulu dalam artikel Thierry Koblentz mengenai Smashing Magazine, tetapi saya fikir saya akan menerangkan kaedah dalam kata -kata saya sendiri di sini.

Kunci Takeaways

Kelas penolong, atau kelas utiliti, boleh membantu menghapuskan pengulangan dalam CSS dengan membuat satu set kelas abstrak yang boleh digunakan berulang kali pada elemen HTML. Ini menjadikan kod lebih banyak boleh diguna semula dan berskala untuk penambahan masa depan.
Kelas penolong bertanggungjawab melakukan satu pekerjaan dan melakukannya dengan baik. Apabila membuat komponen baru, anda hanya perlu menggabungkan beberapa kelas bersama untuk membinanya.
Kelas penolong boleh digunakan untuk menguruskan margin dan padding, lebar dan ketinggian, kedudukan dan z-indeks, menjajarkan unsur, tipografi, warna, senarai, sempadan, dan nilai paparan.
Kelas penolong boleh digunakan dalam kombinasi dengan preprocessors CSS seperti sass atau kurang, menjadikannya lebih mudah untuk membuat dan mengurus kelas ini.
Walaupun kelas penolong menawarkan banyak faedah, mereka boleh membawa kepada html kembung, kerana anda mungkin akan memohon pelbagai kelas untuk satu elemen. Ini boleh menjadikan kod HTML anda lebih sukar untuk dibaca dan diselenggara.

Apakah kelas penolong?

Kelas penolong boleh membantu menghapuskan pengulangan dengan membuat satu set kelas abstrak yang boleh digunakan berulang kali pada elemen HTML. Setiap kelas pembantu bertanggungjawab melakukan satu pekerjaan dan melakukannya dengan baik. Melakukan ini akan menjadikan kod anda lebih boleh diguna semula dan berskala untuk banyak ciri yang akan ditambah pada masa akan datang. Oleh itu, setiap kali anda ingin membuat komponen baru, anda hanya perlu menggabungkan beberapa kelas bersama -sama untuk membinanya.

"Rawat kod seperti LEGO. Pecahkan kod ke dalam blok kecil yang paling kecil. " - @csswizardry (melalui @stubbornella) #btconf

- Smashing Magazine (@smashingmag) 27 Mei 2013

mari kita lihat contoh mudah tentang apa yang kelihatan seperti kelas utiliti dan bagaimana kita boleh menggunakannya. Lihat coretan kod berikut:

<span><span>.left</span>        { float: left; }
</span><span><span>.right</span>       { float: right; }
</span>
<span><span>.text-left</span>   { text-align: left; }
</span><span><span>.text-right</span>  { text-align: right; }
</span><span><span>.text-center</span> { text-align: center; }</span>

di sini kami telah membuat satu set peraturan CSS yang boleh kita gunakan kemudian ketika membina komponen baru. Sebagai contoh jika anda ingin menyelaraskan beberapa kandungan di sebelah kiri, anda boleh menggunakan kelas Text-Left. Begitu juga, anda boleh menggunakan kelas kiri atau kanan untuk mengapung elemen dalam arah yang diperlukan.

mari kita lihat satu lagi contoh kotak yang perlu berada di sebelah kiri dengan kandungan dalamannya berpusat.

kita biasanya melakukan sesuatu seperti ini:

<span><span><span><div</span> class<span>="box"</span>></span>
</span><span><span><span></div</span>></span></span>

dengan CSS ini:

<span><span>.left</span>        { float: left; }
</span><span><span>.right</span>       { float: right; }
</span>
<span><span>.text-left</span>   { text-align: left; }
</span><span><span>.text-right</span>  { text-align: right; }
</span><span><span>.text-center</span> { text-align: center; }</span>

Sebaliknya, kita dapat mencapai perkara yang sama menggunakan kelas penolong yang boleh diguna semula dan tunggal:

<span><span><span><div</span> class<span>="box"</span>></span>
</span><span><span><span></div</span>></span></span>

Perhatikan bagaimana saya mengeluarkan kelas kotak dan sebaliknya menambah kelas yang telah ditetapkan dan pusat teks kami.

Jika anda ingin menukar arah terapung dan menyelaraskan, bukannya melakukan ini pada kelas kotak.

<span><span>.box</span> {
</span>    <span>float: left;
</span>    <span>text-align: center;
</span><span>}</span>

Sistem grid adalah contoh yang baik dari kelas penolong yang digunakan. Berikut adalah contoh dari Grid Yayasan:

Yayasan

<span><span><span><div</span> class<span>="left text-center"</span>></span>
</span><span><span><span></div</span>></span></span>

menyediakan banyak kelas yang boleh digunakan dan digabungkan bersama untuk mewujudkan sistem grid dengan lebar yang berbeza untuk saiz skrin yang berbeza. Fleksibiliti ini membantu pemaju membuat susun atur baru yang disesuaikan dengan lebih cepat, tanpa mengedit mana -mana CSS untuk grid itu sendiri. Contohnya:

.small-2 dan .large-4 kelas akan menetapkan lebar elemen berdasarkan saiz skrin.

• kelas .row menetapkan lebar bekas yang memegang lajur.
• kelas .Columns menetapkan padding dan terapung.
Sekarang anda memahami kelas penolong, mari kita lihat beberapa kelas yang boleh diguna semula yang boleh kita tambahkan ke projek kami, yang dibentangkan di bawah dalam kategori yang berbeza. Perhatikan juga bahawa contohnya akan menggunakan beberapa pembolehubah SASS, tetapi secara semulajadi ini tidak diperlukan.

margin dan padding

margin dan padding mungkin sifat yang paling banyak digunakan dalam CSS kami. Menambah beberapa kelas abstrak yang boleh mengendalikan ini akan mengeringkan kod kami.

kita mulakan dengan menentukan pembolehubah (menggunakan sass) untuk unit ruang asas untuk reka bentuk kami. Mari kita mulakan dengan 1EM dan di atasnya kita boleh membuat kelas untuk saiz ruang yang berbeza.

kita boleh memilih nama kelas pendek, seperti dalam kod contoh di bawah dari BASSCSS

<span><span><span><div</span> class<span>="right text-right"</span>></span>
</span><span><span><span></div</span>></span></span>

Pilih apa yang berfungsi untuk anda dan pasukan anda. Nama -nama yang panjang jelas akan menjadikan unsur -unsur HTML anda lebih besar, tetapi mereka lebih mudah dibaca berbanding dengan nama pendek, jadi anda mungkin perlu melihat CSS anda untuk mengetahui bagaimana keadaan berfungsi.

<span><span><span><div</span> class<span>="row"</span>></span>
</span>    <span><span><span><div</span> class<span>="small-2 large-4 columns"</span>></span><span><span></div</span>></span>
</span>    <span><span><span><div</span> class<span>="small-4 large-4 columns"</span>></span><span><span></div</span>></span>
</span>    <span><span><span><div</span> class<span>="small-6 large-4 columns"</span>></span><span><span></div</span>></span>
</span><span><span><span></div</span>></span></span>

Lebar dan Ketinggian

Bayangkan anda mahu menetapkan seksyen menjadi ketinggian penuh di tempat yang berbeza di laman web anda. Cara tradisional yang kami lakukan ini adalah seperti ini:

dan CSS kami:

<span><span>$base-space-unit: 1em;</span>
</span>
<span>// Top margin
</span><span>.margin-top-none    { margin-top: 0; }
</span><span>.margin-top-quarter { margin-top: $base-space-unit / 4; }
</span><span>.margin-top-half    { margin-top: $base-space-unit / 2; }
</span><span>.margin-top-one     { margin-top: $base-space-unit; }
</span><span>.margin-top-two     { margin-top: $base-space-unit * 2; }
</span>
<span>// Top padding
</span><span>.padding-top-none    { padding-top: 0; }
</span><span>.padding-top-quarter { padding-top: $base-space-unit / 4; }
</span><span>.padding-top-half    { padding-top: $base-space-unit / 2; }
</span><span>.padding-top-one     { padding-top: $base-space-unit; }
</span><span>.padding-top-two     { padding-top: $base-space-unit * 2; }</span>

untuk bahagian lain kita akan mengulangi kod:

<span><span>.m0</span>  { margin:        0 }
</span><span><span>.mt0</span> { margin-top:    0 }
</span><span><span>.mr0</span> { margin-right:  0 }
</span><span><span>.mb0</span> { margin-bottom: 0 }
</span><span><span>.ml0</span> { margin-left:   0 }</span>

dan CSS:

<span><span><span><div</span> class<span>="contact-section"</span>></span>
</span>    <span><!-- Content here... -->
</span><span><span><span></div</span>></span></span>

tetapi kita dapat mengurangkan semua ini dengan satu kelas yang dipanggil ketinggian penuh:

<span><span>.contact-section</span> { height: 100%; }</span>

di bawah adalah beberapa contoh yang sama, termasuk kelas ketinggian penuh yang digunakan di atas:

<span><span><span><div</span> class<span>="services-section"</span>></span>
</span>    <span><!-- Content here... -->
</span><span><span><span></div</span>></span></span>

kedudukan dan z-indeks

<span><span>.services-section</span> { height: 100%; }</span>

Ciri-ciri yang berkaitan dengan kedudukan boleh digabungkan dengan sifat lain seperti Z-indeks untuk membuat susun atur yang kompleks. Kita boleh membuat satu set kelas untuk menetapkan kedudukan tepat dari mana -mana elemen berhubung dengan viewport atau elemen nenek moyang (kanan, kiri, kiri atas, dll):

Kelas penolong "pin" diilhamkan oleh CSS Mapbox.

mari kita melanjutkan contoh ketinggian penuh untuk mengandungi elemen yang diposisikan di sebelah kanan bawah.

<span><span>.left</span>        { float: left; }
</span><span><span>.right</span>       { float: right; }
</span>
<span><span>.text-left</span>   { text-align: left; }
</span><span><span>.text-right</span>  { text-align: right; }
</span><span><span>.text-center</span> { text-align: center; }</span>

Demo

Dengan menggabungkan lebih daripada satu kelas, kita boleh mendapatkan hasil yang diperlukan dalam kod kurang. Jika anda ingin meletakkan elemen dalaman di bahagian atas kanan, anda boleh menggunakan pin-top-kanan dan bukannya pin-bawah-kanan. Anda mungkin perasan dalam kod di atas, saya juga menambah satu lagi kelas penolong: kelas padding-one memastikan elemen tidak dibuang ke tepi bekas atau viewport.

Elemen Terapung

Unsur -unsur terapung kiri atau kanan boleh dilakukan menggunakan kelas kiri atau kanan. Kelas ClearFix yang terkenal boleh digunakan pada elemen induk untuk membersihkan terapung, ditunjukkan di bawah menggunakan pemilih induk Sass:

<span><span><span><div</span> class<span>="box"</span>></span>
</span><span><span><span></div</span>></span></span>

Demo

Aligning Elements

kita boleh membuat teks dan kandungan lain sejajar dengan mana-mana arah, menggunakan kelas penolong berasaskan Align:

<span><span>.box</span> {
</span>    <span>float: left;
</span>    <span>text-align: center;
</span><span>}</span>

kelas penglihatan

Kelas penglihatan mengawal penglihatan elemen, bergantung pada saiz skrin, orientasi peranti, skrin sentuh, atau faktor lain. Ini boleh berguna dalam reka bentuk responsif.

Kami boleh mempunyai kelas berikut di dalam pertanyaan media kami:

<span><span><span><div</span> class<span>="left text-center"</span>></span>
</span><span><span><span></div</span>></span></span>

dan dalam html kami:

<span><span><span><div</span> class<span>="right text-right"</span>></span>
</span><span><span><span></div</span>></span></span>

elemen di atas akan disembunyikan pada skrin kecil tetapi akan dapat dilihat pada skrin yang lebih besar.

kita juga boleh menggunakan kelas ini untuk mengawal elemen pada peranti sentuh:

<span><span><span><div</span> class<span>="row"</span>></span>
</span>    <span><span><span><div</span> class<span>="small-2 large-4 columns"</span>></span><span><span></div</span>></span>
</span>    <span><span><span><div</span> class<span>="small-4 large-4 columns"</span>></span><span><span></div</span>></span>
</span>    <span><span><span><div</span> class<span>="small-6 large-4 columns"</span>></span><span><span></div</span>></span>
</span><span><span><span></div</span>></span></span>

Dalam contoh di atas, kelas .touch akan datang dari kelas yang ditambahkan ke elemen oleh Modernizr.

Contoh yang baik dari kelas penglihatan adalah yang ada di Yayasan dan Bootstrap's Responsive-Utilities.

Typography

dalam tipografi, anda boleh membuat kelas untuk perkara seperti berat fon dan manipulasi teks, seperti teks ellipsis.

<span><span>$base-space-unit: 1em;</span>
</span>
<span>// Top margin
</span><span>.margin-top-none    { margin-top: 0; }
</span><span>.margin-top-quarter { margin-top: $base-space-unit / 4; }
</span><span>.margin-top-half    { margin-top: $base-space-unit / 2; }
</span><span>.margin-top-one     { margin-top: $base-space-unit; }
</span><span>.margin-top-two     { margin-top: $base-space-unit * 2; }
</span>
<span>// Top padding
</span><span>.padding-top-none    { padding-top: 0; }
</span><span>.padding-top-quarter { padding-top: $base-space-unit / 4; }
</span><span>.padding-top-half    { padding-top: $base-space-unit / 2; }
</span><span>.padding-top-one     { padding-top: $base-space-unit; }
</span><span>.padding-top-two     { padding-top: $base-space-unit * 2; }</span>

Warna

Setiap aplikasi mempunyai panduan dan peraturan jenama yang berbeza yang dapat kita tentukan dalam kelas yang pada dasarnya 'kulit' antara muka kita. Ini termasuk warna teks, latar belakang, dan banyak lagi.

Mari lihat bagaimana ini dapat diterjemahkan ke kod. Pertama mari kita tentukan pembolehubah kita dengan sass:

<span><span>.m0</span>  { margin:        0 }
</span><span><span>.mt0</span> { margin-top:    0 }
</span><span><span>.mr0</span> { margin-right:  0 }
</span><span><span>.mb0</span> { margin-bottom: 0 }
</span><span><span>.ml0</span> { margin-left:   0 }</span>

Kemudian kami menentukan kelas penolong kami, berdasarkan pembolehubah:

<span><span><span><div</span> class<span>="contact-section"</span>></span>
</span>    <span><!-- Content here... -->
</span><span><span><span></div</span>></span></span>

Dua contoh yang baik menggunakan kelas penolong warna dan latar belakang terdapat di Mapbox dan projek kit starter web Google.

Satu lagi kes penggunaan ialah komponen pemberitahuan. Mari kita lihat bagaimana kita boleh gaya ini dengan kelas penolong latar belakang.

<span><span>.contact-section</span> { height: 100%; }</span>

senarai

Berapa kali anda ingin menyingkirkan peluru dan padding dari elemen UL? Kelas yang dipanggil senarai bar, seperti yang digunakan dalam Inuitcss, boleh melakukannya untuk anda.

<span><span>.left</span>        { float: left; }
</span><span><span>.right</span>       { float: right; }
</span>
<span><span>.text-left</span>   { text-align: left; }
</span><span><span>.text-right</span>  { text-align: right; }
</span><span><span>.text-center</span> { text-align: center; }</span>

Borders

Kelas penolong boleh digunakan untuk menambah sempadan ke elemen, sama ada untuk semua pihak atau satu sisi. Jadi CSS/SASS anda mungkin kelihatan seperti ini:

<span><span><span><div</span> class<span>="box"</span>></span>
</span><span><span><span></div</span>></span></span>

Nilai paparan

kelas penolong berikut memberi kita keupayaan untuk menggunakan nilai yang berbeza untuk harta paparan CSS:

<span><span>.box</span> {
</span>    <span>float: left;
</span>    <span>text-align: center;
</span><span>}</span>

Kesimpulan

Mengikuti prinsip abstraksi ini mungkin merupakan pendekatan yang jauh berbeza dari apa yang anda sudah biasa ketika mengarang CSS. Tetapi berdasarkan pengalaman saya, dan orang lain saya boleh mengatakan ini adalah pendekatan yang sangat baik untuk dipertimbangkan pada projek anda yang seterusnya.

anda boleh menyemak semua kelas penolong dari siaran ini di perpustakaan baru yang saya buat yang dipanggil CSS-Helpers.

Pautan Perpustakaan yang berkaitan

anda boleh belajar dari dan meneroka struktur projek berikut:

• Mapbox StyleGuide - Base.css
• BASSCSS
• Kelas Utiliti Yayasan
• Kelas Bootstrap Helper
• kelas utiliti UIKit

bacaan selanjutnya

• mencabar amalan terbaik CSS
• ACSS: Memikirkan semula amalan terbaik CSS
• CSS Medium

soalan yang sering ditanya mengenai menggunakan kelas penolong untuk kering dan skala CSS

Apakah faedah menggunakan kelas penolong CSS? Mereka mempromosikan prinsip kering (tidak mengulangi diri sendiri), yang merupakan konsep asas dalam pengaturcaraan. Dengan menggunakan kelas penolong, anda boleh mengelakkan mengulangi sifat dan nilai CSS yang sama di seluruh stylesheet anda. Ini bukan sahaja menjadikan kod anda lebih bersih dan lebih mudah dibaca tetapi juga mengurangkan saiz fail, yang membawa kepada masa beban yang lebih cepat. Di samping itu, kelas penolong boleh digunakan semula di seluruh unsur dan komponen yang berbeza, meningkatkan skalabiliti kod CSS anda. Mereka juga memudahkan penyelenggaraan dan kemas kini yang lebih mudah, kerana perubahan hanya perlu dibuat di satu tempat. Anda hanya menentukan kelas dalam lembaran styles anda dan memberikannya sifat dan nilai yang dikehendaki. Sebagai contoh, jika anda sering perlu memusatkan teks, anda boleh membuat kelas penolong seperti ini:

.center-text {

text-align: center;

}

Anda kemudian boleh memohon kelas ini ke mana -mana elemen HTML untuk memusatkan teksnya. kelas ke elemen HTML tunggal. Ini membolehkan anda menggabungkan gaya dan kesan yang berbeza tanpa perlu membuat kelas berasingan untuk setiap kombinasi. Sebagai contoh, jika anda mempunyai kelas penolong untuk teks yang berpusat dan menukar warnanya, anda boleh menggunakan kedua -dua elemen yang sama seperti ini:

Ini adalah beberapa teks.

Apakah perbezaan antara kelas penolong dan kelas utiliti dalam CSS? Kedua-duanya merujuk kepada kelas yang berfungsi sebagai fungsi khusus, satu tujuan. Walau bagaimanapun, sesetengah pemaju membuat perbezaan antara kedua -duanya. Pada pandangan mereka, kelas penolong lebih kompleks dan mungkin mengandungi pelbagai sifat, manakala kelas utiliti lebih mudah dan biasanya mengandungi hanya satu harta. Kelas penolong boleh meningkatkan produktiviti anda dengan ketara semasa menulis CSS. Dengan merangkumi gaya biasa dalam kelas yang boleh diguna semula, anda boleh mengurangkan jumlah kod yang anda perlukan untuk menulis dan membuat stylesheet anda lebih mudah untuk dikendalikan. Ini dapat menjimatkan banyak masa, terutama pada projek yang lebih besar. Selain itu, kelas penolong dapat membantu anda mengekalkan konsistensi dalam reka bentuk anda, kerana mereka memastikan bahawa gaya yang sama digunakan dengan cara yang sama di seluruh unsur dan komponen yang berbeza. >

Walaupun kelas penolong menawarkan banyak faedah, mereka juga mempunyai beberapa kelemahan yang berpotensi. Salah satu kritikan utama ialah mereka boleh membawa kepada HTML kembung, kerana anda mungkin memohon pelbagai kelas untuk satu elemen. Ini boleh menjadikan kod HTML anda lebih sukar untuk dibaca dan diselenggarakan. Di samping itu, terlalu bergantung pada kelas penolong boleh mengakibatkan kekurangan makna semantik dalam kelas anda, yang boleh menjadikan stylesheet anda lebih sukar untuk difahami untuk pemaju lain. ?

Ya, anda boleh menggunakan kelas penolong dengan preprocessors CSS seperti sass atau kurang. Malah, alat ini boleh menjadikannya lebih mudah untuk membuat dan mengurus kelas penolong. Sebagai contoh, SASS membolehkan anda menggunakan mixins, yang seperti kelas penolong yang boleh menerima argumen. Ini membolehkan anda membuat gaya yang lebih fleksibel dan boleh diguna semula. Dengan merangkumi gaya biasa dalam kelas yang boleh diguna semula, anda boleh menggunakan gaya ini dengan mudah merentasi unsur -unsur dan komponen yang berbeza. Ini menjadikan kod anda lebih modular dan berskala, seperti yang anda boleh tambahkan, mengeluarkan, atau mengubah suai gaya tanpa menjejaskan bahagian lain kod anda. Tambahan pula, kelas penolong boleh membantu anda mengekalkan konsistensi dalam reka bentuk anda apabila projek anda berkembang.

Apakah beberapa contoh kelas penolong CSS yang biasa digunakan? Beberapa contoh termasuk kelas untuk penjajaran teks (mis., .Text-center), sifat paparan (mis., .D-blok), margin dan padding (mis., .M-0 atau .p-0), dan penglihatan (mis., tersembunyi atau. Kelas -kelas ini boleh digunakan untuk menggunakan gaya biasa dengan cepat tanpa perlu menulis sifat dan nilai CSS yang sama berulang kali.

Bagaimana saya boleh mengatur kelas penolong CSS saya? Satu pendekatan yang biasa adalah untuk mengelompokkannya dengan fungsi. Sebagai contoh, anda boleh mempunyai satu bahagian stylesheet anda untuk kelas yang berkaitan dengan tipografi, satu lagi untuk kelas susun atur, dan sebagainya. Pendekatan lain ialah menggunakan konvensyen penamaan yang menunjukkan fungsi setiap kelas. Sebagai contoh, Bootstrap menggunakan konvensyen penamaan di mana bahagian pertama nama kelas menunjukkan harta (mis., "M" untuk margin), dan bahagian kedua menunjukkan nilai (mis., "0" untuk 0 unit). Ini memudahkan untuk memahami apa yang dilakukan setiap kelas hanya dengan melihat namanya.

Atas ialah kandungan terperinci Menggunakan kelas penolong untuk kering dan skala CSS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!