Memperkenalkan CCSS (komponen CSS)

3

Kunci Takeaways

CCSS (komponen CSS) adalah seni bina CSS yang direka untuk memudahkan pengalaman pengarang untuk aplikasi web yang besar, menjadikannya dapat dikekalkan, dapat dikendalikan, dan berskala. Ia menggalakkan pembangunan web berasaskan komponen, di mana markup dan gaya dibundel menjadi elemen HTML yang boleh diguna semula.

Prinsip utama CCS termasuk membuat komponen kecil, bebas, boleh diguna semula; memastikan komponen adalah modular dan terpencil; Menulis CSS yang boleh direka dan boleh diramal; dan mendokumentasikan semua komponen CSS dengan jelas.

CCSS menggunakan struktur direktori tertentu dan konvensyen penamaan, sebahagian besarnya berdasarkan metodologi SMACSS dan BEM. Ia juga menggalakkan penggunaan pelari tugas seperti Grunt untuk mengautomasikan tugas biasa, seperti kompilasi CSS atau pengesahan HTML.

• CCSS meningkatkan skalabilitas, pemeliharaan, dan prestasi aplikasi web dengan membuat gaya modular, mengurangkan risiko gaya yang bertempur di seluruh aplikasi, dan membolehkan penyemak imbas hanya menghuraikan gaya untuk komponen yang diberikan. Ia serasi dengan mana-mana rangka kerja JavaScript dan boleh digunakan dengan pra-pemproses CSS seperti SASS, LACK, atau STYLUS.
CCSS, atau komponen CSS, adalah seni bina yang memudahkan pengalaman pengarang CSS untuk aplikasi web yang besar.
Aplikasi web yang besar umumnya mempunyai banyak fail CSS dan sering mempunyai banyak pemaju yang bekerja pada fail tersebut secara serentak. Dengan kemunculan banyak kerangka, garis panduan, alat, dan metodologi (OOCSS, SMACSS, BEM, dan lain -lain), pemaju memerlukan seni bina CSS yang dapat dikekalkan, boleh diurus, dan berskala.
Sebagai jurutera frontend, saya percaya bahawa pembangunan web berasaskan komponen adalah cara ke hadapan. Komponen web adalah koleksi piawaian yang sedang berjalan melalui W3C. Mereka membolehkan kita membungkus markup dan gaya ke dalam unsur -unsur HTML yang boleh diguna semula yang

benar -benar terkandung

. Apa ini bermakna kita perlu mula berfikir tentang pembangunan CSS berasaskan komponen. Walaupun pembuat penyemak imbas melaksanakan piawaian ini, kita boleh menggunakan

encapsulation soft

sementara itu.

Mari kita lihat dengan tepat apa CCSS dan bagaimana anda boleh menggunakannya dalam anda menubuhkan seni bina CSS untuk aplikasi web yang kompleks. unsur -unsur CCSS di bawah adalah elemen utama yang digunakan sama ada sepenuhnya atau dengan cara yang diubahsuai untuk mencapai konfigurasi terbaik untuk seni bina CCSS.

SMACSS

SMACSS, yang dicipta oleh Jonathan Snook, bermaksud seni bina berskala dan modular untuk CSS. Ia lebih daripada panduan gaya daripada rangka kerja tegar. Baca tentang SMACSS untuk latar belakang struktur seperti yang digunakan CCSS.

bem

bem, yang dicipta oleh pemaju di Yandex, bermaksud "blok", "elemen", "pengubah". Ia adalah metodologi front-end yang merupakan cara pemikiran baru ketika membangunkan antara muka web. Lelaki di Yandex datang dengan BEM dan maklumat lanjut boleh didapati dalam artikel yang sangat baik Harry Roberts.

sass

Sass adalah CSS dengan kuasa -kuasa besar. Saya sangat mengesyorkannya tetapi anda juga boleh menggunakan kurang jika anda lebih suka. Sila rujuk dokumentasi SASS untuk maklumat lanjut.

kompas

Kompas tidak mempunyai definisi kelas; Ia adalah lanjutan untuk SASS yang menyediakan banyak utiliti. Ia digunakan untuk campuran umum yang berguna, dan kompilasi sass. Compass mixins harus hampir selalu digunakan dalam kes -kes di mana awalan vendor diperlukan. Ini sekali lagi adalah bagus dan bourbon, pada pandangan pertama adalah alternatif yang hebat.

Prinsip CCSS

mari kita lihat prinsip utama CCSS.

berasaskan komponen

Tulis komponen kecil dan bebas yang boleh diguna semula. Komponen CSS yang boleh diguna semula adalah salah satu yang tidak wujud hanya pada bahagian tertentu pokok DOM atau memerlukan penggunaan jenis elemen tertentu. Sekiranya perlu, elemen HTML tambahan harus digunakan untuk membuat komponen boleh diguna semula.

modular dan terpencil

Komponen sepatutnya mempunyai segala yang diperlukan untuk bahagian tertentu UI dan mempunyai tumpuan tunggal. Setiap komponen harus diasingkan, yang bermaksud ia tidak secara langsung mengubah atau bergantung pada komponen lain.

Pengasingan lebih penting daripada penggunaan semula kod di seluruh komponen apabila penggunaan semula boleh meningkatkan kebergantungan dan gandingan yang ketat, akhirnya menjadikan CSS kurang dapat diurus.

Composable

Apabila mengarang CSS dengan cara yang bertujuan untuk mengurangkan jumlah masa yang dihabiskan untuk menulisnya, seseorang harus memikirkannya dengan cara untuk menghabiskan lebih banyak masa menukar kelas HTML pada unsur -unsur untuk mengubah atau menambah gaya. Lebih mudah bagi semua pemaju untuk pengarang CSS apabila ia seperti memasang blok LEGO daripada melawan perang CSS. Kelas CSS adalah blok bangunan yang harus digunakan untuk menyusun gaya.

diramal

Predicability Means apabila anda pengarang CSS, peraturan anda berkelakuan seperti yang anda harapkan. Ini penting untuk aplikasi besar yang mempunyai banyak halaman. Elakkan menggunakan pemilih yang terlalu rumit dan nama kelas generik, kerana ini boleh membawa kepada CSS yang tidak dapat diramalkan.

Dokumentasi

Kebanyakan orang menganggap CSS adalah jelas. Malah, ini biasanya tidak berlaku! Komponen CSS mesti mempunyai dokumentasi yang jelas yang menggambarkan apa yang mereka lakukan dan bagaimana ia harus digunakan.

Struktur direktori

di bawah adalah struktur direktori contoh untuk visualisasi yang lebih mudah. Saya juga telah memasukkan persediaan contoh dalam repo CCSS GitHub.

styles
    ├── bootstrap.css
    ├── ext
    │   ├── bootstrap
    │   │   ├── _settings.scss
    │   │   └── bootstrap.scss
    │   └── font-awesome
    │       └── font-awesome.scss
    ├── font-awesome.css
    ├── images.css
    ├── main.css
    └── scss
        ├── _config.scss
        ├── base
        │   ├── _animation-classes.scss
        │   ├── _base-classes.scss
        │   ├── _base.scss
        │   └── images.scss
        ├── components
        │   ├── directives
        │   │   ├── _empty-state.scss
        │   │   ├── _legend.scss
        │   │   └── _status-message.scss
        │   ├── pages
        │   │   ├── _404.scss
        │   │   └── _redirect.scss
        │   └── standard
        │       ├── _alarm-state.scss
        │       ├── _graph-message.scss
        │       └── _panel.scss
        ├── main.scss
        ├── mixins
        │   ├── _animation.scss
        │   ├── _bem.scss
        │   └── _icon.scss
        └── themes
            └── _light.scss

hanya mengedit/ pengarang fail dalam SCSS/ folder dalam pokok folder yang ditunjukkan di atas. Ini membolehkan mengemas kini perpustakaan luaran dengan mudah, yang berada dalam folder ext/ folder. Banyak aplikasi bermula dengan rangka kerja CSS luaran seperti bootstrap atau asas, jadi saya menambahkannya dalam persediaan contoh di dalam ext/. Tetapi ia benar -benar baik untuk mempunyai semua CSS yang ditulis dari awal; Semua yang lain yang disebutkan di atas masih berlaku.

Contoh komponen/ direktori sangat sesuai untuk aplikasi AngularJS, tetapi boleh disesuaikan untuk rangka kerja atau aplikasi lain. Maklumat lanjut ada di bahagian "Senibina" di bawah.

Dalam halaman HTML, sertakan semua fail .css dari gaya/ folder, yang mengandungi semua CSS yang disusun (dari Grunt, Compass, dll.). Jangan sekali -kali mengubahnya.

Konvensyen Penamaan - Bem yang dipermudahkan

u-classname-kelas asas/utiliti global
IMG-Classname-Kelas Imej Global
Animate-ClassName-Kelas Animasi Global
ComponentName - Komponen Standard (B)
ComponentName-ElementName-Elemen Komponen (E)
ComponentName-Modifiername-Pengubah Komponen (M)

Nota gaya nama komponen UpperCamelcase untuk menunjukkan bahawa ia adalah elemen induk; Ini menunjukkan bahawa ia adalah sempadan

komponen . Nama elemen dan pengubahsuaian adalah ElementName dan Modifiername, masing -masing. Jangan gunakan tanda hubung (-) untuk memisahkan nama komponen, kerana ini menandakan permulaan nama elemen/elemen.

Senibina dan Reka Bentuk

mari kita pertimbangkan seni bina yang digalakkan oleh CCSS.

grunt

Grunt adalah pelari tugas yang hebat yang boleh mengautomasikan banyak kerja biasa (seperti menyusun CSS atau mengesahkan HTML). Terdapat juga pelari tugas lain; Aliran kerja yang ideal melibatkan penggunaan satu untuk menonton fail di bawah pembangunan dan mengkompilasi semula CSS apabila perubahan dibuat.

organisasi fail

Lihat lagi pada struktur direktori, yang berasal dari SMACSS. Perhatikan ext/ direktori, yang mengandungi semua kerangka luaran (seperti bootstrap). Untuk terus menaik taraf, ini tidak boleh diubah suai; Sebaliknya, mengatasi dan melanjutkan harus diletakkan di dalam asas/ direktori.

asas/ di mana anda menyimpan gaya asas global yang digunakan di seluruh aplikasi.

_base.scss adalah gaya asas untuk pemilih elemen sahaja. Ini adalah "CSS Reset".

_base-classes.scss adalah semua kelas utiliti yang digunakan di seluruh aplikasi di banyak halaman, pandangan, dan komponen. Nama kelas awalan dengan u-

images.scss digunakan sebagai sumber kompilasi SCSS. Ia harus menentukan dan menyamakan semua imej tapak sebagai data uris. /app/styles/images.css dihasilkan dari fail ini.

_animate.scss memegang semua kelas animasi seluruh aplikasi.

_bootstrap-overrides.scss memegang rangka kerja yang hanya menimpa. Kadang -kadang tahap kekhususan rangka kerja pemilih sangat tinggi yang mengatasi mereka memerlukan pemilih yang panjang. Mengatasi tahap global tidak boleh dilakukan dalam konteks komponen SCSS. Sebaliknya, semua override global pergi ke sini.

Komponen

Sebarang unit CSS yang boleh diguna semula yang tidak disebutkan di atas dianggap sebagai "komponen". Kami menggunakan AngularJS supaya saya mengkategorikannya kepada 3 jenis komponen CSS: Lihat/Page, Arahan, dan Standard; Oleh itu, struktur direktori yang diperoleh dari SMACSS.

Dalam persediaan contoh dalam repositori GitHub, saya membuat folder eksplisit untuk menjadi jelas. Jika permohonan anda kecil, anda boleh memasukkannya ke dalam satu folder. Semua komponen mengikuti konvensyen penamaan BEM yang diubahsuai dalam kombinasi dengan unta. Ini mendapat saya kemenangan hebat dalam menggalakkan ahli pasukan lain untuk mengikuti sintaks gaya BEM. Ia juga mengelakkan banyak kekeliruan apabila bergerak dari menggunakan gaya BEM yang tipikal dengan aksara-,-, dan __, yang menjana nama kelas seperti Modul-Name__child-Name-Name-Modifier-Name!

juga penting bahawa perintah definisi kelas CSS dalam komponen mencerminkan paparan HTML. Ini menjadikannya lebih mudah untuk mengimbas, gaya, mengedit, dan memohon kelas. Akhirnya, adalah idea yang baik untuk mempunyai panduan gaya yang luas untuk aplikasi web dan ikut garis panduan untuk CSS dan SASS (mis. Elakkan @extend).

contoh CCSS

rujuk kod untuk persediaan contoh CSS.

Berikut adalah komponen contoh dalam sass:

styles
    ├── bootstrap.css
    ├── ext
    │   ├── bootstrap
    │   │   ├── _settings.scss
    │   │   └── bootstrap.scss
    │   └── font-awesome
    │       └── font-awesome.scss
    ├── font-awesome.css
    ├── images.css
    ├── main.css
    └── scss
        ├── _config.scss
        ├── base
        │   ├── _animation-classes.scss
        │   ├── _base-classes.scss
        │   ├── _base.scss
        │   └── images.scss
        ├── components
        │   ├── directives
        │   │   ├── _empty-state.scss
        │   │   ├── _legend.scss
        │   │   └── _status-message.scss
        │   ├── pages
        │   │   ├── _404.scss
        │   │   └── _redirect.scss
        │   └── standard
        │       ├── _alarm-state.scss
        │       ├── _graph-message.scss
        │       └── _panel.scss
        ├── main.scss
        ├── mixins
        │   ├── _animation.scss
        │   ├── _bem.scss
        │   └── _icon.scss
        └── themes
            └── _light.scss

ini disusun kepada CSS berikut:

<span>.ProductRating {
</span>  <span>// nested element
</span><span>  <span>@include e(title) {</span>
</span>    <span>...
</span>  <span>}
</span>  <span>// nested element
</span><span>  <span>@include e(star) {</span>
</span>    <span>...
</span>    <span>// nested element's modifier
</span><span>    <span>@include m(active) {</span>
</span>      <span>...
</span>    <span>}
</span>  <span>}
</span><span>}</span>

dan HTML anda mungkin kelihatan seperti ini:

<span><span>.ProductRating</span> {
</span>  ...
<span>}
</span><span>// nested element
</span><span><span>.ProductRating-title</span> {
</span>  ...
<span>}
</span><span>// nested element
</span><span><span>.ProductRating-star</span> {
</span>  ...
<span>}
</span>// nested element's <span>modifier
</span><span><span>.ProductRating-star--active</span> {
</span>  ...
<span>}</span>

Anda boleh merujuk kepada BEM Mixin yang dipermudahkan, yang menggunakan pemilih rujukan untuk mencapai ini dan lebih mudah daripada @at-root. Bekerja dengan BEM menjadi lebih mudah dalam SASS 3.3, yang memberi kita keupayaan untuk menulis kod yang boleh dipelihara yang mudah difahami.

Menyumbang

Sumbangan dalam repo GitHub dalam bentuk isu/PR untuk menambah lebih banyak contoh, penambahbaikan dengan pemprosesan pos, penjelasan, dan lain -lain adalah paling membantu.

dan pastikan anda menyemak repo untuk kredit dan sumber berguna yang berkaitan dengan CCSS. Sekiranya anda mempunyai sebarang pertanyaan atau komen, hantarkannya dalam komen di bawah atau di repo github.

soalan yang sering ditanya mengenai komponen CSS (CCSS)

Apakah perbezaan utama antara CCSS dan CSS tradisional? Ia direka untuk membolehkan pemisahan kandungan dari persembahan, termasuk susun atur, warna, dan fon. Sebaliknya, CCSS (komponen CSS) adalah pendekatan moden untuk gaya di mana gaya secara langsung dikaitkan dengan komponen khusus mereka. Ini bermakna gaya -gaya yang dilancarkan secara tempatan ke komponen, mengurangkan risiko gaya bertembung merentasi permohonan anda. Pendekatan ini menjadikan gaya anda lebih banyak diselenggarakan, modular, dan lebih mudah untuk skala. Dalam CSS tradisional, ketika projek berkembang, fail CSS juga tumbuh, menjadikannya sukar untuk dikendalikan. Walau bagaimanapun, dalam CCSS, setiap komponen mempunyai gaya tersendiri, menjadikannya lebih mudah untuk mengurus dan skala. Anda boleh dengan mudah mengemas kini atau mengubahsuai komponen tanpa menjejaskan seluruh aplikasi. Sama ada anda menggunakan React, Angular, Vue, atau rangka kerja lain, anda boleh menggunakan CCSS untuk gaya komponen anda. Ini menjadikan CCSS sebagai alat serba boleh untuk mana-mana pemaju front-end.

Bagaimana CCSS mengendalikan gaya global? Anda boleh menentukan gaya global dalam fail berasingan dan mengimportnya ke dalam komponen anda seperti yang diperlukan. Ini membolehkan anda mengekalkan rupa dan rasa yang konsisten merentasi aplikasi anda semasa masih mendapat manfaat daripada modulariti CCSS. Untuk digunakan, mempunyai beberapa batasan. Mereka tidak boleh menggunakan pertanyaan media, kelas pseudo, atau elemen pseudo. Mereka juga mempunyai kekhususan tertinggi, yang boleh menyebabkan kesukaran dalam gaya utama. CCSS, sebaliknya, menawarkan kuasa penuh CSS, termasuk keupayaan untuk menggunakan pertanyaan media, kelas pseudo, dan elemen pseudo. Ia juga mempunyai kekhususan yang lebih rendah daripada gaya sebaris, menjadikannya lebih mudah untuk mengatasi gaya apabila perlu. boleh meningkatkan prestasi aplikasi web dengan ketara. Dalam CSS tradisional, penyemak imbas perlu menghuraikan keseluruhan fail CSS untuk menjadikan halaman, yang boleh melambatkan proses rendering. Walau bagaimanapun, dengan CCSS, penyemak imbas hanya perlu menghuraikan gaya untuk komponen yang sedang diberikan, mengakibatkan masa beban halaman yang lebih cepat.

Bolehkah saya menggunakan CSS pra-pemproses dengan CCSS? Ini membolehkan anda memanfaatkan kuasa pra-pemproses ini, seperti pembolehubah, campuran, dan peraturan bersarang, sementara masih mendapat manfaat daripada modularity dan skalabilitas CCSS.

Salah satu kelebihan utama CCSS ialah ia menghapuskan masalah yang berkaitan dengan kekhususan CSS. Oleh kerana setiap komponen mempunyai gaya tersendiri, tidak perlu bimbang tentang gaya yang bertembung atau mengatasi satu sama lain. Ini menjadikannya lebih mudah untuk menguruskan gaya anda dan mengurangkan risiko pepijat yang berkaitan dengan kekhususan CSS.

Bolehkah saya menggunakan CCSS untuk reka bentuk responsif? Sama seperti CSS tradisional, CCSS menyokong pertanyaan media, yang membolehkan anda menggunakan gaya yang berbeza bergantung pada saiz skrin peranti. Ini memudahkan untuk membuat reka bentuk responsif yang kelihatan hebat pada semua peranti. dan lebih mudah untuk dikendalikan. Setiap komponen mempunyai gaya tersendiri, jadi jika anda perlu mengemas kini atau mengubahsuai komponen, anda hanya perlu menukar gaya untuk komponen tertentu. Ini mengurangkan risiko memperkenalkan pepijat dan menjadikannya lebih mudah untuk mengemas kini atau refactor kod anda.

Atas ialah kandungan terperinci Memperkenalkan CCSS (komponen CSS). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!