Ajar anda langkah demi langkah struktur CSS SMACSS

Artikel ini membawakan anda pengetahuan yang berkaitan tentang seni bina css SMACSS Ia juga akan membincangkan tentang apa itu smacss dan isu berkaitan tentang klasifikasi seni bina ini.

Oleh kerana CSS hanya mempunyai satu skop, jika kita tidak memberi perhatian untuk menjaga kod CSS, ia akan menyukarkan kod yang kita tulis untuk dibaca dan diselenggara, jadi kita gunakan hierarki halaman web itu sendiri, mengabstrak metodologi BEM.

Kaedah klasifikasi tiga lapisan mudah BEM tidak mempunyai masalah dalam menangani tapak web bersaiz kecil dan sederhana, tetapi mungkin lebih sukar untuk menangani gaya tapak web yang kompleks. Kita perlu mencari cara yang lebih baik.

Maka lahirlah SMACSS hubungan antara SMACSS dan BEM sedikit seperti hubungan antara susun atur Flex dan susun atur Grid dalam reka letak.

Tetapi sila ambil perhatian bahawa SMACSS dan BEM tidak pernah menjadi masalah kemasukan dan kemasukan sebelum ini Sama seperti semasa menggunakan susun atur Flex dan susun atur Grid, apabila menyusun struktur laman web, kami akan memilih Grid, biasa dan mudah dua-. dimensi Susun atur akan menggunakan Flex, dan kami akan menggunakan kaedah yang sesuai pada masa yang tepat dan BEM adalah serupa Sebaik sahaja anda menguasai idea, aplikasi adalah perkara remeh.

Jika anda masih belum mempelajari BEM, anda boleh merujuk artikel BEM tentang Seni Bina CSS.

Apa itu SMACSS

Tidak sukar untuk berfikir bahawa SMACSS adalah singkatan, iaitu pembukaan laman web Nota: Scalable and Modular Architecture untuk CSS, maksud nama itu sangat jelas, iaitu menulis modulariti dan struktur CSS yang disesuaikan dan berskala.

Apabila anda selesai mempelajari SMACSS, anda akan mempunyai pemahaman yang lebih mendalam tentang Seni Bina Berskala dan Modular untuk CSS.

Bagaimana cara menyebut SMACSS walaupun SMACSS bukan perkataan, ia mempunyai sebutan tersendiri, yang disebut sama dengan {smacks}.

Pengkelasan SMACSS

Jika anda menjumpai kata inti untuk BEM, ia adalah berlapis Jika anda juga menjumpai kata inti untuk SMACSS, ia mesti ada perbezaan satu perkataan . Mari kita lihat bagaimana SMACSS mengklasifikasikan.

Teras SMACSS ialah pengelasan, yang secara khusus membahagikan gaya projek kepada lima kategori:

• Asas (Asas)

• Susun atur

• Modul

• Negeri (negeri)

• Tema( Topik)

Seterusnya, mari kita lihat kandungan khusus lima bahagian tersebut.

Asas

Peraturan Asas (Asas) biasanya meletakkan gaya lalai. Gaya lalai ini pada asasnya ialah pemilih elemen, tetapi ia juga boleh termasuk pemilih atribut, pemilih kelas pseudo, pemilih anak dan pemilih adik beradik. Pada asasnya, gaya asas mentakrifkan bagaimana elemen harus kelihatan di mana-mana pada halaman.

Contohnya:

html {
    margin: 0;
    font-family: sans-serif;
}
a {
    color: #000;
}
button {
    color: #ababab;
    border: 1px solid #f2f2f2;
}

Kami melihat bahawa kod Base sangat serupa dengan penetapan semula CSS.

Untuk bahagian kod ini, kami biasanya mendapatkan bantuan daripada Normalize.css atau sanitize.css, dan tidak perlu melengkapkannya sendiri.

Layout

Mari kita bezakan bahagian mana dalam laman web itu milik Layout dan bahagian mana yang tergolong dalam Modul Lihat tangkapan skrin laman web di bawah:

Mari kita buat pembahagian kasar dahulu, terutamanya termasuk kepala, badan, ekor, dll. Ini tergolong dalam Reka Letak.

Mari lakukan satu lagi pembahagian terperinci Elemen dalam Reka Letak boleh dibahagikan lagi, seperti bar navigasi, dll. Ini adalah modul komponen.

Reka letak sangat hampir dengan teg HTML Sebagai rangka tapak web, ia bertanggungjawab untuk reka letak, dan Modul lebih bertanggungjawab untuk paparan dan interaksi perniagaan.

Hubungan antara Reka Letak dan Modul ialah (> bermaksud kemasukan):

Reka letak > Modul

Jika tapak web kompleks, ia boleh sebenarnya jadi begini :

> Tata Letak > bahagian mungkin Terdapat satu atau lebih modul.

Nama kelas susun atur am bermula dengan .l-.

Perlu diambil perhatian bahawa kenyataan rasmi mengatakan bahawa reka letak utama boleh menggunakan pemilih ID, dan reka letak kedua menggunakan pemilih kelas, saya rasa kelas harus digunakan sepenuhnya.

Ambil contoh:

.l-header {}
.l-primarynav {}
.l-main-content {}

<div class="l-article">
    <article class="post">
        <header class="post-header">
            <h2 class="post-title"></h2>
            <span class="post-author"></span>
        </header>
        <section class="post-body">
            <img  class="post-image" src="..." alt="Ajar anda langkah demi langkah struktur CSS SMACSS" >
            <div class="post-content">
                <p class="post-paragraph"></p>
                <p class="post-paragraph"></p>
            </div>
        </section>
        <footer class="post-footer"></footer>
    </article>
</div>

.is-collapsed {}
.is-expanded {}
.is-active {}
.is-highlighted {}
.is-hidden {}
.is-shown {}
.is-successful {}

.button-large {
    width: 60px;
    height: 60px;
}

<button class="button-large">Like</button>