SASS dan BEM

Artikel ini menerangkan tentang SASS dan BEM.

Kami akan menerangkan konsep dan kaedah pelaksanaan untuk mencegah kekeliruan dan kelemahan yang cenderung berlaku apabila CSS menjadi berskala besar, menggunakan SASS dan BEM dengan contoh-contoh yang konkrit.

YouTube Video

SASS dan BEM

Apabila bilangan fail dan skrin meningkat, CSS cenderung menghadapi masalah seperti 'Saya tidak tahu di mana gaya ini ditetapkan' dan 'Perubahan kecil sahaja sudah merosakkan penampilan di skrin lain.'.

Ini kerana CSS secara semula jadi ialah bahasa yang tidak menetapkan peraturan reka bentuk. Jika anda terus menulis tanpa perancangan, kebergantungan yang tidak disengajakan akan bertambah.

SASS dan BEM ialah teknik praktikal untuk mengubah CSS daripada sesuatu yang ditulis secara rawak menjadi sesuatu yang direka dan diurus dengan baik, sekaligus mencegah masalah seperti itu. Dengan menggabungkan kedua-duanya, anda boleh menjelaskan maksud gaya dan pada masa yang sama meningkatkan kebolehbacaan, kebolehgunaan semula, dan kemudahan penyelenggaraan.

Sebab CSS mudah menjadi sukar untuk diurus

CSS seperti berikut boleh menjadi sukar untuk difahami bagaimana ia berfungsi apabila anda melihat semula kod tersebut.

 1.title {
 2  font-size: 16px;
 3  color: #333;
 4}
 5
 6.container .title {
 7  font-size: 18px;
 8}
 9
10.sidebar .container .title {
11  color: red;
12}

• Dalam contoh ini, kelas .title yang sama kelihatan berbeza bergantung kepada di mana ia diletakkan, jadi anda tidak dapat mengetahui dengan segera gaya mana yang akan digunakan pada .title ini.
• Dengan cara ini, apabila penyeleksi semakin mendalam dan bergantung pada elemen induk, CSS menjadi lebih sukar untuk diramal jangkauan pengaruhnya dan mudah rosak apabila diubah suai.

BEM ialah konvensyen penamaan yang 'menyatakan peranan melalui nama'

BEM adalah singkatan kepada Block / Element / Modifier, dan memasukkan dalam nama tersebut komponen apa yang diwakili oleh kelas itu dan dalam keadaan apa.

• Block ialah komponen yang berdikari.
• Element ialah elemen dalaman kepada Block.
• Modifier mewakili keadaan atau variasi.

1.card {}
2.card__title {}
3.card--highlighted {}

Dengan konvensyen penamaan ini, anda boleh menjangka struktur dan peranan hanya dengan melihat HTML.

Bentuk asas HTML menggunakan BEM

Berikut ialah contoh UI kad yang diwakili dalam HTML menggunakan BEM.

1<div class="card card--highlighted">
2  <h2 class="card__title">Title</h2>
3  <p class="card__text">Description</p>
4</div>

Daripada nama kelas sahaja, anda dapat faham bahawa ini ialah 'komponen card', 'title di dalamnya', dan 'keadaan ditekankan'. Ini adalah kelebihan terbesar BEM.

Namun, BEM sahaja boleh menyebabkan CSS yang terlalu panjang.

Jika anda menulis BEM secara terus dalam CSS, jumlah kod biasanya akan meningkat.

 1.card {
 2  padding: 16px;
 3}
 4
 5.card__title {
 6  font-size: 18px;
 7}
 8
 9.card__text {
10  font-size: 14px;
11}
12
13.card--highlighted {
14  border: 2px solid orange;
15}

Di sini, dengan menggunakan SASS, anda boleh mendapatkan kod yang teratur dan mengekalkan strukturnya.

Gunakan penetapan bersarang SASS untuk mengekspresikan BEM secara semulajadi

Dengan menggunakan penetapan bersarang dalam SASS, anda boleh mencerminkan struktur BEM terus dalam kod anda.

 1.card {
 2  padding: 16px;
 3
 4  &__title {
 5    font-size: 18px;
 6  }
 7
 8  &__text {
 9    font-size: 14px;
10  }
11
12  &--highlighted {
13    border: 2px solid orange;
14  }
15}

& merujuk kepada penyeleksi induk dan berfungsi sangat baik dengan penamaan BEM.

CSS yang dijana daripada SASS ini

SASS di atas akan disusun menjadi CSS seperti berikut.

 1.card {
 2  padding: 16px;
 3}
 4
 5.card__title {
 6  font-size: 18px;
 7}
 8
 9.card__text {
10  font-size: 14px;
11}
12
13.card--highlighted {
14  border: 2px solid orange;
15}

Walaupun penampilan adalah sama, beban kognitif untuk pembangun berkurangan dengan ketara.

Reka bentuk untuk penggunaan Modifier yang selamat

Kerana Modifier dalam BEM mewakili 'keadaan', kuncinya adalah menghadkan penggunaannya untuk ganti nilai sahaja.

 1.button {
 2  padding: 8px 12px;
 3  background: #eee;
 4
 5  &--primary {
 6    background: blue;
 7    color: white;
 8  }
 9
10  &--disabled {
11    opacity: 0.5;
12    pointer-events: none;
13  }
14}

Reka bentuk menjadi lebih stabil jika Modifier dianggap bukan sebagai 'penambahan' tetapi sebagai 'perubahan'.

Hadkan bersarang Element kepada satu tahap sahaja

Dalam BEM, penting untuk tidak membuat elemen bersarang terlalu dalam.

1.card {
2  &__header {
3    font-weight: bold;
4  }
5
6  &__body {
7    margin-top: 8px;
8  }
9}

Elemen bertingkat seperti .card__header__title ialah tanda bahawa anda harus mempertimbangkan untuk memisahkan Block.

Contoh struktur fail SASS

Akhir sekali, berikut ialah contoh struktur SASS yang praktikal untuk projek sebenar.

1styles/
2├── base/
3│   └── reset.scss
4├── components/
5│   ├── card.scss
6│   └── button.scss
7├── layout/
8│   └── header.scss
9└── main.scss

Jika anda mengurus setiap komponen sebagai 1 block = 1 fail, lebih sukar untuk berlaku kerosakan.

Contoh card.scss

 1.card {
 2  padding: 16px;
 3  border: 1px solid #ccc;
 4
 5  &__title {
 6    font-size: 18px;
 7  }
 8
 9  &__text {
10    color: #666;
11  }
12}

Kerana semuanya terurus dalam unit ini, penghapusan, pemindahan dan penggunaan semula menjadi mudah.

Ringkasan

SASS dan BEM bukan sekadar teknik popular—ia adalah pendekatan praktikal untuk menjadikan CSS sebagai kod yang boleh direka bentuk.

• BEM memberikan nama kepada maksud dan peranan.
• SASS membolehkan penulisan yang mudah sambil mengekalkan struktur.
• Menggabungkan kedua-duanya menjadikan CSS kurang mudah rosak.

Mari kita tulis CSS hari ini dengan cara yang diri anda pada masa depan boleh faham.

Anda boleh mengikuti artikel di atas menggunakan Visual Studio Code di saluran YouTube kami. Sila lihat juga saluran YouTube kami.

YouTube Video