Senibina CSS dan tiga tiang CSS yang boleh dipelihara

mata utama

Seni bina CSS yang boleh dipelihara adalah penting untuk mengelakkan lembaran gaya yang sukar untuk dikekalkan, kerana lembaran gaya yang sukar untuk dikekalkan boleh mempunyai kesan sampingan yang tidak dijangka dan memerlukan penulisan semula CSS aplikasi yang menyeluruh.

• Tiga konsep asas atau tiang membentuk asas reka bentuk seni bina CSS: blok bangunan (seperti sass, pemilih CSS yang cekap, sintaks bem, dll. prinsip.
• Prinsip -prinsip kejuruteraan perisian seperti pemisahan kebimbangan dan prinsip -prinsip pepejal boleh digunakan untuk CSS untuk memastikan bahawa model kod realiti dengan cara yang dapat dipelihara. Ini termasuk menggunakan prinsip seperti kering (jangan ulangi diri anda) dan basah (kami suka menaip) untuk meningkatkan pemeliharaan kod.
• cuba menggabungkan dalam CSS, seperti menggunakan mixin dan warisan, dapat memberikan struktur yang lebih kuat dan mengurangkan keperluan untuk menentukan kelas untuk setiap kombinasi, membolehkan penyelenggaraan CSS yang lebih mudah.

Unsur -unsur seni bina CSS

Jika anda pernah mewarisi CSS yang buruk dan diwajibkan untuk mengekalkannya, anda mungkin mempunyai simpati bagi orang lain yang akan mengekalkan kod anda pada masa akan datang. Dalam kes -kes yang melampau, pemaju tidak mempunyai pilihan tetapi untuk menulis semula CSS permohonan sepenuhnya. Ekstrem ini berlaku apabila setiap patch memperkenalkan pelbagai kesan sampingan yang tidak dijangka. Sebaik sahaja ini dicapai, stylesheet anda menjadi sukar untuk dikekalkan.

Anda kini boleh mengelakkan kesulitan untuk masa depan anda dengan membuat keputusan yang boleh dipercayai secara seni bina. Inilah sebabnya sangat penting untuk belajar bagaimana membina seni bina CSS yang boleh dipelihara dalam amalan.

Jika anda tidak mahu menjadi orang yang melewati kod yang buruk, anda mungkin ingin tahu cara membuat CSS yang boleh dipelihara dari awal. Di mana anda akan bermula? Mari kita lihat unsur -unsur seni bina CSS yang patut dipertimbangkan ketika membina projek yang sempurna.

tiga tiang yang dapat mengekalkan CSS

Tonton "menjadi wira CSS of the Office: CSS Architecture" kursus untuk belajar untuk membuat CSS berstruktur, diselenggarakan dan berskala!

Ikon Main Video

Lihat kursus ini Lihat kursus ini Apabila mereka bentuk seni bina CSS sistem perisian, tiga konsep patut dipertimbangkan. Konsep -konsep ini sangat asas dan kita boleh memikirkannya sebagai tiang yang menyokong struktur bangunan. Kami memerlukan ketiga-tiga tiang ini untuk memastikan CSS kami di bawah ujian masa dan tidak runtuh menjadi kekacauan yang sukar untuk dikekalkan.

Pilar pertama mentakrifkan blok bangunan seni bina CSS. Blok bangunan ini mengandungi pelbagai penyelesaian dan alat, seperti menggunakan SASS, menulis pemilih CSS yang efisien, sintaks pemodelan blok-elemen (BEM), menggunakan kelas dan bukannya atribut ID, dan menggunakan saudara-mara di mana unit yang sesuai.

Walaupun pandangan ini dapat meningkatkan kualiti kod CSS anda dengan ketara, kami memerlukan tahap organisasi yang lebih tinggi untuk sistematik sistematisasi kerja kami. Oleh itu, kita memerlukan tiang kedua yang memberi tumpuan kepada orkestrasi blok bangunan untuk membina CSS hierarki yang boleh dipercayai. Fikirkan lapisan ini sebagai rangka seni bina CSS. Sekiranya anda berminat dengan dua seni bina CSS yang siap sedia, anda boleh mengkaji lebih lanjut ITCSS dan SMACSS.

Dengan menggunakan prinsip kejuruteraan perisian, kod kami menjadi dipercayai. Ini adalah tiang ketiga dalam penulisan CSS yang boleh dipelihara.

Guna prinsip kejuruteraan perisian ke CSS

Terdapat banyak prinsip yang berbeza untuk mereka bentuk perisian tahan lama.

Prinsip -prinsip ini menyediakan tujuan untuk menggunakan alat dan penyelesaian CSS anda dengan memastikan bahawa model kod CSS anda realiti dengan cara yang boleh dipelihara. Tanpa prinsip -prinsip ini, menggunakan mana -mana seni bina CSS kebanyakannya hanya satu ritual. Jika anda tidak mengikuti prinsip kejuruteraan perisian untuk menulis CSS, apabila saiz kod menjadi sukar untuk dikekalkan, ia sering terhempas dan runtuh.

Jika anda seorang jurutera perisian dengan banyak pengalaman dalam bahasa pengaturcaraan tertentu, anda mungkin merasa sangat mengejutkan untuk menerapkan prinsip -prinsip ini kepada bahasa deklaratif seperti CSS. Walau bagaimanapun, dalam praktiknya, CSS telah menjadi bahasa yang matang, sama dengan bahasa lain, struktur adalah bijak tentang kod yang diperlukan. Mari kita periksa aplikasi praktikal beberapa prinsip utama.

Pemisahan kebimbangan

Pemisahan kebimbangan adalah prinsip reka bentuk perisian yang bertanggungjawab untuk menentukan tanggungjawab pemisahan yang jelas dalam penyelesaian perisian. Aplikasi yang paling jelas untuk CSS adalah pemisahan antara kelas untuk gaya dan kelas untuk fungsi. Kelas gaya tidak boleh muncul dalam kod JavaScript, dan kelas yang berkaitan dengan fungsi tidak boleh muncul dalam stylesheets.

Prinsip Pepejal

Robert C. Martin mentakrifkan lima prinsip pepejal. Beberapa prinsip ini juga digunakan untuk CSS dan bahasa pengaturcaraan lain.

Dalam kursus seni bina CSS saya, anda akan mendapati banyak aplikasi yang berbeza yang memperincikan cara menggunakan prinsip -prinsip pepejal ini dalam konteks kod CSS, termasuk prinsip tanggungjawab tunggal dan prinsip pembukaan dan penutupan.

Dalam hierarki lembaran gaya, kami menggunakan prinsip tanggungjawab tunggal. Sebagai contoh, lapisan dalam seni bina ITCSS mengandungi reset atau prosedur normalisasi. Gaya tag dibina di atas program normalisasi, dan gaya komponen dibina di atas gaya tag. Setiap peringkat mempunyai tanggungjawab tunggal dan jelas.

Contoh yang paling terkenal menggunakan prinsip kejuruteraan perisian kepada kod CSS adalah perbandingan antara CSS kering dan basah. Kering berdiri untuk "jangan ulangi diri", sementara basah bermaksud "Kami suka menaip."

membuat kod kering lebih banyak diselenggara kerana apabila anda menukar kod kering, anda hanya perlu melakukan perubahan di satu tempat dan anda pasti pasti anda tidak perlu mencari seluruh asas kod CSS untuk penampilan lain keadaan kod yang sama.

Apabila CSS anda basah, anda boleh mengeringkannya dengan mengenal pasti bahagian umum kod dan abstrak fungsi umum ini ke dalam kelas asas (atau mixin jika menggunakan preprocessor).

menggunakan kelas asas dan subkelas dalam kod dipanggil warisan, yang dilaksanakan menggunakan @Extend dalam SASS. Apabila kita menggunakan Arahan Mixin atau @Mixin menggunakan istilah SASS, kita menggunakan kombinasi. Warisan, komposisi, dan penggunaan pemalar SASS adalah alat yang berkuasa untuk melakukan abstraksi.

Cuba menggabungkan dalam CSS

mari kita lihat contoh praktikal. Katakan terdapat empat jenis segi empat tepat di pangkalan kod kami. Rectangle sejagat, segi empat tepat bulat, segi empat tepat hijau dan segi empat tepat hijau bulat.

kita boleh menggunakan konvensyen penamaan bem untuk menandakan setiap komponen segi empat tepat seperti berikut:

<code><div class="rectangle"></div>
<div class="rectangle--rounded"></div>
<div class="rectangle--green"></div>
<div class="rectangle--rounded--green"></div></code>

mari kita tentukan empat kelas ini dalam sass menggunakan warisan. Kami bermula dengan kelas asas .Rectangle dan membuat kelas pengubah yang menggunakan SASS @Extend untuk mewarisi gaya kelas asas:

<code>.rectangle {    
  width: 200px;  
  height: 100px;  
  margin: 20px;  
  padding: 20px;  
  display: inline-block;  
  border: 1px solid black;
}
.rectangle--rounded {  
  @extend .rectangle;
  border-radius: 20px;
}

.rectangle--green {  
@extend .rectangle; 
  background-color: green;
}

.rectangle--rounded--green {  
  @extend .rectangle--rounded;  
  @extend .rectangle--green;
}</code>

Strukturnya jelas, dan kami tidak mengulangi diri kami dalam kelas yang diubah suai. Walau bagaimanapun, mewujudkan hierarki lima pengubah akan menghasilkan 31 definisi kelas, yang kebanyakannya tidak lebih daripada koleksi arahan @Extend.

Gabungan ini memberikan kita struktur yang lebih kuat. Untuk mewujudkan struktur yang benar -benar fleksibel, kita hanya memerlukan kelas segi empat tepat dan dua campuran:

<code>@mixin rounded {  
  border-radius: 20px;  
}

@mixin green { 
  background-color: green;
}</code>

Katakan kami mempunyai kotak ciri khas.

<code><div class="feature-box"></div></code>

Jika kotak ciri dibulatkan, tetapi tidak hijau, kita hanya perlu mengembangkan kelas segi empat tepat dan memasukkan campuran yang menjadikan segi empat tepat menjadi bulat:

<code>.my-rectangle {  
  @extend .rectangle;  
  @include rounded;  
}</code>

Struktur adalah fleksibel tanpa menentukan kelas untuk setiap kombinasi.

ke arah seni bina CSS yang lebih baik

kita dapat menyimpulkan bahawa prinsip kejuruteraan perisian digunakan untuk CSS dan mana -mana bahasa pengaturcaraan lain. Prinsip -prinsip ini jatuh di antara dua peringkat: tahap mikro blok bangunan CSS dan tahap makro blok bangunan ini. Oleh itu, adalah bermanfaat untuk mempelajari cara menerapkan prinsip -prinsip ini dalam amalan ketika membuat CSS yang dapat dipelihara.

Untuk membantu menjelaskan dan menunjukkan aplikasi praktikal prinsip-prinsip ini, saya mencipta kursus mengenai arsitektur CSS rock-pepejal;

Dalam kursus ini, kami akan meneroka tiga tiang seni bina CSS dan menekankan prinsip -prinsip kejuruteraan perisian. Bukan sahaja anda akan mempelajari prinsip -prinsip ini secara teorinya, tetapi anda juga akan berpeluang menggunakannya dalam banyak contoh praktikal.

Sebagai contoh, kami akan mengumpulkan sejumlah besar catatan blog dan mengetahui mengapa kod CSS yang disediakan sukar dikekalkan. Kami secara beransur-ansur akan menyelesaikan proses refactoring CSS, menggunakan prinsip-prinsip yang diperkenalkan secara ringkas dalam artikel ini dan mendalam dalam video kursus.

Saya telah membangunkan seksyen khusus untuk meletakkan tiga tiang seni bina CSS menjadi amalan dengan membuat perpustakaan komponen kecil menggunakan seni bina dan sass ITCSS. Jika anda berminat untuk mempelajari lebih lanjut mengenai seni bina CSS, sila daftar untuk kursus dan temui kami dalam kursus!

soalan yang sering ditanya mengenai seni bina CSS dan CSS yang boleh dipelihara

Apakah kepentingan seni bina CSS dalam pembangunan web?

CSS Architecture memainkan peranan penting dalam pembangunan web. Ia menyediakan cara berstruktur untuk menulis kod CSS, menjadikan kod lebih mudah difahami, mengekalkan dan melanjutkan. Dengan seni bina CSS yang jelas, pemaju boleh mengelakkan isu-isu seperti konflik tertentu, penamaan konflik, dan duplikasi kod. Ia juga memudahkan penggunaan semula kod dan mengurangkan masa dan usaha yang diperlukan untuk membina laman web.

Bagaimanakah kaedah OOCSS menggalakkan CSS yang boleh dipelihara?

CSS berorientasikan objek (OOCSS) adalah cara untuk mempromosikan penggunaan semula kod dan lebih cepat dan lebih cekap. Ia menggalakkan pemaju untuk memikirkan CSS sebagai sistem objek, masing -masing dengan sifat dan tingkah laku sendiri. OOCSS menjadikannya lebih mudah untuk membuat CSS berskala dan dikekalkan dengan memisahkan struktur dari penampilan dan bekas dari kandungan.

Apakah peranan kaedah BEM dalam seni bina CSS?

Blok, Elemen, Pengubah (BEM) adalah konvensyen penamaan yang digunakan untuk kelas dalam HTML dan CSS. Ia menyediakan struktur yang jelas dan ketat yang menjadikan kod lebih mudah dibaca dan difahami. Pendekatan BEM membantu mewujudkan seni bina CSS yang mantap dan berskala dengan mengurangkan peluang untuk penamaan dan konflik tertentu.

Bagaimanakah kaedah SMACSS membantu mencipta CSS yang boleh dipelihara?

Arsitektur berskala dan modular (SMACSS) untuk CSS adalah panduan gaya yang menggalakkan modulariti dan skalabiliti. Ia membahagikan peraturan CSS menjadi lima jenis: asas, susun atur, modul, negeri, dan tema, masing -masing dengan tujuan khususnya. Klasifikasi ini membantu mengatur kod CSS, menjadikannya lebih mudah untuk mengekalkan dan skala.

Apakah kepentingan kaedah ITCSS dalam seni bina CSS?

Segitiga CSS (ITCSS) yang terbalik adalah cara untuk membantu menguruskan CSS berskala besar. Ia menganjurkan CSS ke dalam beberapa lapisan, setiap lapisan yang mempunyai peranan khususnya. Struktur hierarki ini memastikan bahawa gaya yang paling umum dimuatkan dahulu dan lebih banyak gaya spesifik dimuatkan, dengan itu mengurangkan peluang masalah tertentu.

Bagaimanakah pembolehubah CSS menggalakkan CSS yang boleh dipelihara?

pembolehubah CSS (juga dikenali sebagai CSS Custom Ciri -ciri) membolehkan pemaju untuk menentukan nilai yang boleh diguna semula. Mereka dapat meningkatkan penyelenggaraan dengan mengurangkan duplikasi kod dan membuat perubahan global lebih mudah. Sebagai contoh, menentukan warna sebagai pembolehubah membolehkan anda menggunakannya semula sepanjang stylesheet dan mengubahnya di satu tempat.

Apakah peranan preprocessors CSS dalam CSS yang boleh dipelihara?

Preprocessors CSS seperti SASS dan kurang menyediakan ciri -ciri seperti pembolehubah, bersarang, campuran, dan fungsi yang tidak tersedia dalam CSS biasa. Ciri -ciri ini dapat meningkatkan pemeliharaan dan kebolehbacaan kod anda, menjadikannya lebih mudah untuk menulis CSS yang kompleks.

Bagaimanakah seni bina berasaskan komponen mempromosikan CSS yang boleh dipelihara?

Senibina berasaskan komponen memudahkan penciptaan komponen yang boleh diguna semula, masing-masing dengan HTML, CSS, dan JavaScript sendiri. Pendekatan ini menjadikan kod ini lebih modular dan lebih mudah untuk dikekalkan, kerana perubahan kepada satu komponen tidak menjejaskan orang lain.

Apakah kepentingan panduan gaya dalam seni bina CSS?

Panduan gaya

menyediakan satu set piawaian penulisan CSS. Ia memastikan konsistensi dalam asas kod dan menjadikan kod lebih mudah dibaca dan diselenggarakan. Panduan gaya boleh termasuk konvensyen penamaan, peraturan pemformatan, dan amalan terbaik.

Bagaimana alat CSS LINT mempromosikan CSS yang boleh dikekalkan?

Alat CSS LINT seperti Stylelint dapat membantu melaksanakan piawaian pengekodan dan menangkap isu -isu yang berpotensi sebelum menjadi masalah. Mereka secara automatik dapat menyelesaikan masalah tertentu dan memberi nasihat kepada orang lain, dengan itu meningkatkan kualiti kod dan penyelenggaraan.

Atas ialah kandungan terperinci Senibina CSS dan tiga tiang CSS yang boleh dipelihara. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!