SASS at BEM

Ipinaliliwanag ng artikulong ito ang SASS at BEM.

Ipapaliwanag namin ang mga konsepto at paraan ng pagpapatupad upang maiwasan ang kalituhan at pagiging marupok na madalas mangyari kapag lumalaki ang CSS, gamit ang SASS at BEM, sa pamamagitan ng kongkretong mga halimbawa.

YouTube Video

SASS at BEM

Habang dumadami ang mga file at screen, nagkakaroon ng mga isyu ang CSS tulad ng 'Hindi ko alam kung saan nadefine ang style na ito' at 'Dahil sa maliit na pagbabago, nasira ang itsura sa ibang screen.'.

Ito ay dahil ang CSS ay likas na wika na walang sapilitang design rules. Kung patuloy kang magsusulat nang walang plano, dadami ang hindi inaasahang dependencies.

Ang SASS at BEM ay mga praktikal na teknik upang gawing planado at madaling pamahalaan ang CSS, at hindi lang basta sinusulat, kaya naiiwasan ang mga ganitong problema. Sa pamamagitan ng pagsanib ng dalawa, mapapalabo mo ang kahulugan ng mga style at sabay na mapapahusay ang readability, reusability, at maintainability.

Mga Dahilan kung Bakit Madaling Lumalabo ang CSS

Ang CSS kagaya ng sumusunod ay maaaring mahirap intindihin kung paano ito gumagana kapag tinitingnan mo ulit ang code pagkatapos ng ilang panahon.

 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}

• Sa halimbawa na ito, ang parehong .title class ay maaaring mag-iba ng itsura depende sa pwesto nito, kaya hindi mo agad masasabi kung aling style ang ma-aapply dito sa .title.
• Sa ganitong paraan, habang lumalalim ang mga selector at mas dumedepende sa parent elements, nagiging mahirap hulaan ang lawak ng epekto ng CSS at nagiging madali itong masira kapag binago.

Ang BEM ay isang naming convention na 'ipinapahayag ang papel sa pamamagitan ng pangalan'

Ang BEM ay nangangahulugang Block / Element / Modifier, at isinasama sa pangalan kung anong component ang nire-represent ng class at anong estado ito.

• Block ay isang independiyenteng component.
• Element ay isang panloob na bahagi ng Block.
• Modifier ay tumutukoy sa isang estado o variation.

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

Gamit ang ganitong naming convention, maaari mong mahulaan ang istruktura at papel base lang sa HTML.

Batayang anyo ng HTML gamit ang BEM

Narito ang halimbawa ng isang card UI na ipinahayag sa HTML gamit ang BEM.

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

Mula pa lang sa pangalan ng class, mauunawaan mo na ito ay isang 'card component', 'title na nasa loob nito', at may 'emphasized state'. Ito ang pinakamalaking kalamangan ng BEM.

Gayunpaman, kapag BEM lang ang ginamit, maaaring lumaki ang CSS.

Kung isusulat mo ang BEM nang direkta sa CSS, madalas dumadami ang code.

 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}

Dito, gamit ang SASS, magkakaroon ka ng maayos na code na napapanatili ang istruktura.

Maaaring ipahayag nang natural ang BEM gamit ang SASS nesting

Sa paggamit ng SASS nesting, maaari mong direktang ipakita ang estruktura ng BEM sa iyong code.

 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}

Ang '&' ay tumutukoy sa parent selector at napakabisa sa BEM naming.

Ang CSS na nagawa mula sa SASS na ito

Ang SASS sa itaas ay nacocompile bilang CSS na gaya ng sumusunod.

 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}

Kahit pareho ang itsura, malaki ang nabawas sa bigat ng pag-iisip para sa developer.

Pagdisenyo para sa ligtas na paggamit ng Modifiers

Dahil ang Modifiers sa BEM ay kumakatawan sa 'mga estado', mahalaga na limitahan ang paggamit nito sa overrides lamang.

 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}

Nagiging mas matatag ang disenyo kapag itinuturing ang Modifier bilang 'pagbabago', hindi lang 'dagdag'.

Limitahan ang nesting ng Element sa isang antas lamang

Sa BEM, mahalagang hindi masyadong palalimin ang nesting ng mga element.

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

Ang mga element na sobrang lalim gaya ng .card__header__title ay senyales na dapat mong pag-isipan ang paghati ng Block.

Halimbawa ng estruktura ng SASS file

Panghuli, narito ang halimbawa ng estruktura ng SASS na praktikal para sa totoong mga proyekto.

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

Kapag pinamahalaan mo bawat component bilang 1 block = 1 file, hindi ito madaling masira.

Halimbawa ng 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}

Dahil lahat ay nakapaloob sa unit na ito, madali ang pagtanggal, paglilipat, at paggamit muli.

Buod

Ang SASS at BEM ay hindi lang basta nauusong mga teknik—praktikal na paraan ito upang gawing planado ang CSS.

• Nililinaw ng BEM ang ibig sabihin at papel.
• Pinapadali ng SASS ang pagsulat habang napapanatili ang estruktura.
• Kapag pinagsama ang dalawa, hindi madaling masira o magkaproblema ang CSS.

Sulatin natin ang CSS ngayon sa paraang maiintindihan ng sarili mo sa hinaharap.

Maaari mong sundan ang artikulo sa itaas gamit ang Visual Studio Code sa aming YouTube channel. Paki-check din ang aming YouTube channel.

YouTube Video