CSS - Arhitektura i BEM konvencija

CSS kod treba da bude dobro struktuiran, modularan, za višekratnu upotrebu i proširiv. Prilikom razvijanja projekta najbolje ga je podijeliti u 3 faze:

1. Prije nego se počne sa samim kodiranjem, razmisliti o izgledu web sajta ili aplikacije. Komponente treba da upravljaju dizajnom, u kojem stranicu ili aplikaciju razbijamo na modularne djelove koji će činiti komplikovaniji interfejs. Raspored je ono što će držati komponente zajedno. Komponente treba da budu dizajnirane na takav način da se mogu koristiti i u drugim projektima ili segmentima aplikacije, a da pritom ostanu nezavisne od svojih roditelja.

2. Kreiranje layout-a sa HTML i CSS sa doslednim sistemom imena klasa. BEM je odličan metod za imenovanje klasa.

3. Korišćenje foldera i fajlova za izgradnju logičke CSS arhitekture. Jedna od najprikladnijih topologija je sistem 7-1, koji sugeriše da imamo 7 odvojenih fascikli za djelimične CSS (ili SASS¹ datoteke) i jednu glavnu CSS datoteku za uvoz drugih datoteka.

Folderi:

• abstracts/ - ovdje postavljamo promjenljive ili mixins (za Sass).
• base/ - za postavljanje osnovnih stilova.
• layout/ - za definisanje rasporeda elemenata u projektu.
• themes/ - realizacija različitih vizuelnih tema.
• components/ - posjeduje po jedan fajl ili folder za svaku komponentu u zavisnosti od složenosti iste.
• pages/ - stil za specifične stilove projekta.
• vendors/ - CSS kod trećih strana.

BEM

CSS selekcija treba da cilja elemente direktno, upotrebom klasa umjesto selektovanja tipova, potomaka ili kaskade. Uklanjanjem kaskade, slobodni smo da pomjeramo i ponovo koristimo blokove na stranici. Blokovi mogu biti ugniježdeni unutar drugih blokova. Odrediti šablon, a zatim i blokove sa po jednom odgovornošću.

BEM je popularan pristup apstraktnog razmišljanja o našem interfejsu. Sve ovo se može podieliti na tri koncepta:

1. B - odnosi se na blok, koji je nezavisni dio našeg dizajna i može se ponovo koristiti.
2. E - odnosi se na element. Element pripada bloku i ne može se koristiti izvan bloka kojem pripada.
3. M - modifikator se koristi za blok ili element da izrazi promjene u podrazumijevanom stanju objekta.

/* BEM  način imenovanja selektora */
.block {
}
.block__element {
}
.block--modifier {
}
.block__element--modifier {
}