Lembaran gaya yang tidak teratur dengan tiga metodologi CSS ini-industri IT-php.cn

Tame Unruly Style Sheets With These Three CSS Methodologies

Artikel ini adalah sebahagian daripada siri artikel dengan kerjasama SiteGround. Terima kasih kerana menyokong rakan kongsi yang membuat SitePoint mungkin.

Artikel ini akan meneroka tiga kaedah seni bina CSS yang berjaya, termasuk prinsip, matlamat dan kelebihan mereka.

mata utama

BEM, SMACSS dan ECSS adalah tiga kaedah untuk menguruskan seni bina CSS, masing -masing dengan prinsip, matlamat dan kelebihannya sendiri.

bem (pengubahsuaian blok-elemen) memberi tumpuan kepada penyelenggaraan jangka panjang yang mudah untuk kebolehgunaan semula projek dan komponen, menggunakan konvensyen penamaan pintar untuk mengatur kod CSS ke dalam modul yang boleh diguna semula.
SMACSS (Senibina CSS Extensible dan Modular) mengklasifikasikan peraturan CSS untuk mengenal pasti corak dan membuat panduan untuk menulis CSS yang boleh dipelihara dan boleh diguna semula, dengan konvensyen penamaan fleksibel yang membantu organisasi kod dan kecekapan pasukan.
ECSS (CSS kekal) menekankan pengasingan, merangkumi semua kod yang diperlukan untuk membina setiap komponen dalam folder bersama sendiri dan menggunakan konvensyen penamaan CSS yang ketat. Dalam jangka masa panjang, pendekatan ini menyokong penyelenggaraan mudah dan meminimumkan peningkatan saiz fail.

Kenapa kod CSS keluar dari kawalan?

Memelihara kod CSS yang nipis, boleh diguna semula dan dikekalkan sangat sukar. Ini boleh berlaku dalam projek kecil, sederhana dan besar, terutamanya dalam projek -projek dengan pelbagai pemaju yang terlibat jika anda gagal melaksanakan sebarang peraturan pengekodan dan organisasi secara konsisten. Apabila asas kod adalah besar, mengalami banyak perubahan dari masa ke masa, dan tidak mempunyai organisasi, pasukan sering memilih untuk menambah peraturan gaya baru pada akhir dokumen stylesheet dan bukannya mengeluarkan sebahagian daripada kod atau mengubah suai kod sedia ada. Sebab utama adalah bahawa kesan penyuntingan atau memadam pernyataan CSS tidak dapat diramalkan dan boleh menyebabkan rehat reka bentuk di suatu tempat dalam projek. Ini adalah strategi yang gagal yang membawa kepada duplikasi kod, isu keutamaan (peraturan gaya utama menjadi pertempuran), dan inflasi keseluruhan. Biasanya, memilih kaedah yang paling sesuai dengan keperluan anda adalah proses berulang yang bermula dengan membiasakan diri dengan kaedah yang ada. Berikut adalah tiga cara untuk membantu anda menangani cabaran helaian gaya yang tidak kemas.

bem

BEM bermaksud pengubahsuaian blok-elemen. Ia adalah kaedah seni bina yang dicipta oleh Yandex untuk membina CSS. Matlamat kaedah BEM adalah untuk membangunkan laman web yang cepat dilancarkan dan disokong jangka panjang. Ia membantu mewujudkan komponen antara muka yang boleh dilanjutkan dan boleh diguna semula. Laman web bem Tame Unruly Style Sheets With These Three CSS Methodologies

Konsep utama di sini adalah kemudahan jangka panjang penyelenggaraan projek dan komponen kebolehgunaan. Strategi teras BEM adalah untuk mengatur kod CSS ke dalam modul yang boleh diguna semula dengan bantuan konvensyen penamaan pintar. Mari kita lihat lebih dekat.

Apa itu blok?

Mengenal pasti blok adalah langkah utama dalam menggunakan kaedah BEM. Blok adalah A & GT; Dalam HTML, blok diwakili oleh atribut kelas. Dokumentasi BEM.

Apabila memutuskan apa yang hendak dirawat sebagai blok, tanya diri anda jika anda boleh memadamkan bahagian kod tersebut dengan mudah dan gunakannya di tempat lain. Sebagai contoh, anda boleh merawat header atau footer laman web sebagai blok. Anda boleh dengan selamat blok sarang, sebagai contoh, anda boleh meletakkan blok menu di dalam blok header.

<ul class="menu"></ul>

Salin selepas log masuk

Oleh kerana pada dasarnya anda harus dapat menggunakan semula blok di mana -mana di halaman, CSS blok tidak seharusnya menetapkan sebarang margin atau peraturan kedudukan. Akhirnya, apabila memilih nama, pastikan nama itu menerangkan apa blok itu, bukan bagaimana ia kelihatan atau menyatakan. Dalam erti kata lain, namanya harus menjawab soalan ini: Apa itu? (mis. Header, menu, dan lain -lain), bukan apa yang kelihatan seperti itu? (mis., Header tetap, menu kecil, dan lain -lain).

Apakah unsur -unsur?

Menurut kaedah BEM, elemen adalah sebahagian daripada blok A & GT, yang tidak mempunyai makna bebas dan secara semantik dikaitkan dengan bloknya. Dapatkan bem

Berikut adalah beberapa prinsip yang digunakan untuk unsur -unsur:

unsur hanya boleh wujud di blok
unsur tidak boleh tergolong dalam elemen lain, mereka hanya boleh menjadi sebahagian daripada blok
anda boleh membina elemen bersarang
Nama elemen menerangkan tujuannya, bukan penampilannya.

Apakah pengubah suai?

Pengubahsuaian adalah entiti yang mentakrifkan penampilan, keadaan, atau tingkah laku blok atau elemen. Dokumentasi BEM

Contohnya, blok header boleh

ditetapkan di bahagian atas halaman, blok akordion boleh

pada atau off , blok butang boleh dilumpuhkan , dan sebagainya. Konvensyen penamaan untuk pengubah BEM adalah seperti berikut: blok elemen pengubahsuaian. Ini adalah teras kaedah BEM. Di samping itu, BEM juga menyediakan prinsip organisasi struktur dokumen, satu set alat dan komuniti aktif untuk menyokongnya. kelebihan menggunakan bem

Berikut adalah beberapa kelebihan menggunakan BEM dalam projek anda:

pemaju baru dapat dengan cepat memahami hubungan antara komponen dalam tag dan peraturan CSS

Arsitektur CSS berskala dan modular (SMACSS) adalah kaedah pembangunan web yang digunakan untuk mengatur dan menulis kod CSS. Penciptanya Jonathan Snook menerangkannya seperti berikut: & gt; Smacss adalah cara untuk memeriksa proses reka bentuk dan menyesuaikan rangka kerja yang ketat ini kepada proses pemikiran yang fleksibel. Apabila menggunakan CSS, ia cuba mendokumenkan pendekatan yang konsisten untuk pembangunan tapak. Laman web SMACSS

terasnya adalah untuk mengklasifikasikan peraturan CSS. Klasifikasi membawa corak, di mana anda mengulangi beberapa kali dalam reka bentuk anda, di mana anda boleh membangunkan panduan untuk menulis CSS yang boleh dipelihara dan boleh diguna semula. Kategori teras SMACSS adalah:

Asas - Kategori ini mengandungi peraturan CSS yang mengawal penampilan lalai elemen. Pemilih termasuk pemilih elemen tunggal, pemilih atribut, pemilih kelas pseudo, pemilih saudara, dll. Sebagai contoh, html, badan, a, a: hover, dll.
susun atur - Kategori ini digunakan untuk halaman gaya yang membahagikan halaman ke dalam bahagian.
Modul -Modul direka bentuk komponen gaya blok bangunan seperti menu, kotak dialog, kotak carian, dll.
- Kategori ini merangkumi penerangan mengenai susun atur atau modul dalam keadaan tertentu (mis., Terlihat atau tersembunyi, diperluaskan atau ditutup, dll) atau pandangan tertentu (mis., Rumah atau halaman dalaman) gaya.
Topic - Kategori ini sama dengan keadaan kerana ia mengandungi peraturan CSS yang bertanggungjawab untuk penampilan susun atur dan modul. Tidak semua projek memerlukan kategori tambahan ini, tetapi ia sentiasa baik untuk mengetahui kewujudannya.

SMACSS menamakan konvensyen

Berkaitan dengan kategori yang digariskan di atas, SMACSS mencadangkan konvensyen penamaan untuk membantu produktiviti organisasi kod dan pasukan pembangunan. Peraturan susun atur, keadaan, dan modul adalah awalan dengan nama atau singkatan yang bermakna. Untuk peraturan susun atur, seperti susun atur, grid- dan bahkan mudah l- adalah awalan yang boleh diterima. Bagi peraturan negara, Konvensyen adalah untuk menggunakan adalah-sebagai awalan negeri, seperti IS Handden, IS-Visible, dll. Bagi modul, gunakan nama komponen yang anda bina, seperti .muu, .dialog, dll. Sebagai contoh, untuk gaya dialog yang dibuka, anda boleh menggunakan pemilih seperti .dialog.is-dibuka dalam CSS. Unsur -unsur yang berkaitan dalam modul dan varian modul yang sama harus diawali dengan nama asas modul. Juga, cuba untuk tidak menggunakan ID, pemilih elemen, atau pemilih bersarang. Sebagai contoh, untuk memilih item menu dalam modul yang dinamakan

menu , jangan tulis pemilih seperti ini: .menu li a, tetapi gunakan sesuatu seperti .menu-link atau .menu-item. Tidak seperti BEM, SMACSS tidak menetapkan konvensyen penamaan yang ketat. Jonathan Snook menjelaskan: & gt; ... Jangan merasa seperti anda perlu mengikuti garis panduan ini. Buat perjanjian, rekod, dan berpegang kepadanya. Laman web SMACSS

kelebihan menggunakan SMACSS

Beberapa kelebihan kaedah SMACSS untuk pengekodan CSS termasuk:

ECSS

~~CSS kekal atau ECSS adalah panduan untuk menulis stylesheets untuk projek web yang besar, cepat berubah, dan lama. Laman web ECSS~~

Pendekatan CSS ini benar-benar menarik minat saya terhadap pandangan asal pengarangnya Ben Frain untuk mengendalikan cabaran CSS berskala besar. Konsep teras ECSS adalah pengasingan. Pengasingan bermakna setiap komponen adalah unit bebas kod, tiada kebergantungan, tiada beban konteks, boleh diguna semula dan boleh ditanggalkan tanpa risiko kebocoran gaya. Ini terutamanya dicapai oleh:

merangkumi semua kod (bukan sahaja CSS, tetapi semua teknik yang diperlukan untuk membina setiap komponen) dalam folder kongsi sendiri.
Setiap kali anda memerlukan komponen yang serupa dengan komponen sedia ada tetapi dengan beberapa variasi, walaupun variasi kecil, buat komponen yang sama sekali baru.
Gunakan konvensyen penamaan CSS yang ketat

Menurut titik kedua di atas, jelaslah bahawa atribut dan nilai mengulangi tidak menjadi masalah bagi ECSS. Dalam hal ini, ECSS mewakili perbezaan asas dari kaedah seperti BEM dan SMACSS, yang memanjangkan atau abstrak komponen sedia ada, dengan itu mengelakkan atau mengelakkan duplikasi kod sebanyak mungkin. Adakah ini bermakna bahawa ECSS akan menghasilkan fail lembaran gaya besar? tidak pasti. Selepas beberapa ujian dengan pemampatan fail, Ben Frain menyimpulkan bahawa kerana "GZIP sangat berkesan dalam memampatkan rentetan pendua", perbezaan saiz fail antara menggunakan ECSS dan kaedah lain yang cenderung abstrak dan bukannya pendua adalah sangat baik kecil.

faedah menggunakan ECSS

Berikut adalah manfaat yang boleh diperolehi dengan menggunakan kaedah ECSS dan menerima pandangannya mengenai pengulangan:

kod CSS lebih mudah dikekalkan dengan mengekalkan pengasingan setiap mod visual
Walaupun anda akan menemui sifat dan nilai pendua, kenaikan saiz fail masih kecil dalam jangka masa panjang. Ini kerana modul adalah unit mandiri, bebas, dan anda boleh dengan cepat memadam modul yang anda tidak perlu lagi pada bila-bila masa tanpa bimbang tentang melanggar reka bentuk
Semua fail bahasa/teknikal yang diperlukan untuk membuat modul berkongsi folder yang sama, yang menjadikannya sangat mudah untuk mengedit dan memadam kandungan secara fizikal yang tidak lagi diperlukan.

Anda boleh membaca semua butiran pendekatan inovatif ini dalam CSS Kegigihan Buku Frain.

Kesimpulan

Menulis kod CSS yang boleh dipelihara dan teratur adalah mencabar. Dalam artikel ini, saya memperkenalkan tiga cara untuk membantu tugas ini. Ini bukan senarai lengkap, dan tidak ada kaedah ini akan menyelesaikan semua masalah yang mungkin anda hadapi dalam projek anda. Cubalah sahaja dan lihat apa yang berfungsi untuk anda. Anda juga boleh cuba menggunakan BEM dan SMACSS dalam kombinasi, dan juga mengembangkan pendekatan anda sendiri berdasarkan set soalan yang anda tetapkan. Apakah peraturan keemasan anda untuk menulis kod CSS yang teratur dan mudah diuruskan? Adakah anda berfikir menggunakan pendekatan seni bina CSS dapat melegakan kesakitan? Klik kotak komen untuk memberitahu saya.

soalan yang sering ditanya mengenai kaedah seni bina CSS

Apakah perbezaan utama antara kaedah OOCSS, SMACSS dan BEM?

OOCSS, SMACSS, dan BEM adalah semua kaedah CSS yang direka untuk membantu pemaju menulis CSS yang bersih, dikekalkan, dan berskala. OOCSS atau CSS berorientasikan objek menggalakkan pemaju untuk menulis semula kod yang boleh diguna semula, berorientasikan objek. Ia memberi tumpuan kepada memisahkan struktur dari penampilan dan memisahkan bekas dari kandungan. SMACSS, atau arsitektur CSS yang boleh dilanjutkan dan modular, memberikan panduan mengenai mengklasifikasikan peraturan CSS untuk menjadikan kod anda lebih fleksibel dan boleh diurus. Pengubahsuaian elemen BEM atau blok adalah konvensyen penamaan yang menjadikan CSS anda lebih mudah dibaca dan difahami. Ia membahagikan UI ke dalam blok berasingan yang boleh digunakan semula dan digabungkan.

Bagaimana untuk melaksanakan standard pengekodan WordPress dalam CSS?

WordPress mempunyai set standard pengekodan CSS sendiri untuk memastikan konsistensi dan kebolehbacaan antara projek yang berbeza. Piawaian ini termasuk peraturan untuk menamakan konvensyen, lekapan, jarak dan komen. Untuk melaksanakan piawaian ini, anda boleh menggunakan alat CSS LINT dengan konfigurasi WordPress, seperti stylelint.

Apakah peranan helaian gaya dalam pembangunan web?

Watch "Menjadi wira CSS di pejabat dan mencipta CSS berstruktur, diselenggarakan dan berskala dengan seni bina CSS"! Tonton kursus ini Stylesheet adalah borang fail atau kod yang mentakrifkan susun atur dan reka bentuk laman web. Ia mengawal rendering visual elemen HTML pada halaman, termasuk susun atur, warna, fon, dan animasi. CSS (Lembaran Gaya Cascade) adalah bahasa lembaran gaya yang paling biasa digunakan.

Bagaimanakah kaedah CSS meningkatkan proses reka bentuk web saya?

Kaedah CSS dapat meningkatkan proses reka bentuk web anda dengan menjadikan CSS anda lebih teratur, boleh diguna semula dan berskala. Mereka menyediakan cara berstruktur untuk menulis CSS, yang membantu mengurangkan kerumitan kod, memudahkan untuk memahami dan mengekalkan, dan meningkatkan prestasi.

Apakah amalan terbaik untuk menulis CSS dalam HTML?

Amalan terbaik untuk menulis CSS dalam HTML termasuk memisahkan gaya dari kandungan menggunakan stylesheets luaran, menggunakan pemilih dengan cekap, mengumpulkan gaya berkaitan, menggunakan sifat tersendiri, dan kod anotasi untuk kejelasan. Ia juga penting untuk mengesahkan CSS anda untuk memastikan ia bebas ralat dan serasi dengan pelayar yang berbeza.

bagaimana membuat kod CSS saya lebih mudah untuk dijaga?

Untuk menjadikan kod CSS anda lebih mudah untuk dikekalkan, anda boleh menggunakan kaedah CSS seperti OOCSS, SMACSS, atau BEM, yang menyediakan panduan untuk membina dan mengatur kod anda. Strategi lain termasuk memodulasi CSS, menggunakan preprocessors seperti SASS atau kurang, dan mengikuti konvensyen penamaan.

Apakah kelebihan menggunakan preprocessors CSS?

preprocessors CSS seperti SASS dan kurang membolehkan anda menggunakan pembolehubah, bersarang, campuran, dan fungsi dalam CSS, yang boleh menjadikan kod anda lebih mudah untuk dibaca dan diselenggara. Mereka juga membolehkan anda menulis lebih banyak CSS ringkas dan lebih kuat.

Bagaimana untuk memastikan CSS saya serasi dengan penyemak imbas yang berbeza?

Untuk memastikan bahawa CSS anda serasi dengan pelayar yang berbeza, anda boleh menggunakan alat seperti yang saya gunakan, yang menunjukkan keserasian sifat CSS dalam pelayar yang berbeza. Untuk atribut CSS yang tidak disokong sepenuhnya oleh semua pelayar, ia juga penting untuk menggunakan awalan vendor.

Apakah kepentingan CSS dalam reka bentuk web?

CSS adalah penting dalam reka bentuk web kerana ia mengawal persembahan visual kandungan pada laman web. Ia membolehkan anda membuat laman web yang menarik dengan reka bentuk dan susun atur yang konsisten. Ia juga membolehkan anda menyesuaikan persembahan berdasarkan pelbagai jenis peranti seperti desktop, tablet, dan telefon bimbit.

Bagaimana untuk mengetahui lebih lanjut mengenai kaedah CSS?

Terdapat banyak sumber untuk mempelajari kaedah CSS dalam talian. SitePoint, Smashing Magazine, dan Rangkaian Pemaju Mozilla menyediakan artikel dan tutorial yang mendalam. Anda juga boleh mencari kursus dalam talian di platform seperti Coursera dan Udemy.

Atas ialah kandungan terperinci Lembaran gaya yang tidak teratur dengan tiga metodologi CSS ini. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!