CSS Formatiranje
Tokom našeg rada na više projekata često dolazi do zabune oko pravilnog korištenja CSS-a. Ovajdokument je ovde da pruži pojašnjenje.
Pretprocesor SASS 3 uvodi novu sintaksu poznatu kao SCSS koja se koristi u našim projektima.
Jedna od najvažnijih stvari koju treba naučiti je gnežđenje u Sassu.
Dva najčešće korištena sistema vodiča su RSCSS i BEM. Proći ćemo kroz osnove oba sistema kako bismo osigurali da se pravilno koriste u bilo kojim trenutnim i budućim projektima
Generalna pravila
Prvo ćemo pogledati neka opšta pravila CSS-a koja treba slediti.
- Pri pisanju CSS-a treba koristiti klase, dok ID-ove treba izbegavati.
- Koristite SCSS sintaksu, nikako SASS sintaksu.
- Koristite dva razmaka za uvlačenje.
- Kada koristite više selektora u deklaraciji pravila, dajte svakom selektoru svoju liniju.
- Kada treba koristiti pomoćnu klasu margine ili paddinga, prvo pogledajte da li bi se mogla
ugraditi u CSS pravila elemenata, kako biste izbjegli dodavanje previše klasa u jedan element. - Ne gnezdi selektore u više od 2 nivoa.
RSCSS
Komponente
Kada radite sa RSCSS, trebali biste razmišljati u komponentama. Svaki dio UI-a trebalo bi posmatrati kao zasebnu komponentu.
Klase komponenata treba imenovati s dve reči, s crticom u sredini.
Neki od primera imenovanja uključuju:
- Search-form,
- Photo-container,
- Primary-button
Elementi
Svaka komponenta sadrži elemente. Klase trebaju imati samo jednu reč.
Ako element sadrži više reči, treba ih spojiti u jednu.
Na primer:
- userimg,
- smalltext,
- navlink.
Treba izbegavati upotrebu imena i id oznaka prilikom pisanja CSS-a.
Varijante
Varijante mogu biti koristene za imena komponenata i elemenata
Imena klasa za varijante sadrze prefix sa tackom
Na primeer:
- Class=”button-primary –large”,
- Class=”avatar –round”
- Class=”input-form –wide”
U primeru ispod, razložili smo komponente u elemente I pokazali primenu RSCSS-a u realnom svetu
Slika pokazuje jednostavno polje unosa sa dugmetom i tekst sa placeholder-om.Prvo, identifikovacemo komponente i razloziti ih u elemente.
Komponente ukljucuju polje za unos i submit dugme
Sada, vreme je da napišemo CSS klase. Imenovaćemo komponentu, element i varijablu.
.signup-form {
.inputfield {
...
}
.submitbtn {
...
&.-inverted {
..
}
}
}
Za imenovanje elementa povezali smo dve reči (nismo koristili tačku ili podvlaku). Varijabla je korištena za definisanje stila dugmeta. Stoga će se na elementu button morati koristiti i submitbtn i -inverted klasa.
BEM
BEM je metodologija koja je bazirana na Block – Element – Modifier sistemu. Koriste se samo selektori naziva klase, a ID-ove treba izbegavati.
Blocks
Blokovi se mogu ugnezditi ili međusobno komunicirati. Slični su komponentama u RSCSS-u i semantički su jednaki.
Blokovi obično imaju naziv klase s jednom rečju ili dve reči odvojene crticom. Imena blokova mogu se sastojati od latiničnih slova, znamenki i crtica.
Elementi
Elementi su delovi blokova.
Imena elemenata mogu se sastojati od latiničnih slova, znamenki, crtica i donjih crta. Ime klase formira se s imenom bloka, plus dve donje crte i imenom elementa. Na primer: "forminput"
Modifikatori
Modifikatori se koriste na elementima da pokažu promenu izgleda, ponašanja ili stanja. Dizajn elemenata se menja dodavanjem ili uklanjanjem modifikatora.
Imena modifikatora mogu se sastojati od latiničnih slova, znamenki, crtica i donjih crta.Naziv klase modifikatora formira se uzimajući ime klase elementa i dodajući dve crtice plus ime modifikatora. Kada element ima modifikator, mora imati i klasu elementa i klasu modifikatora.
Na primer: "blockinput blockinput - -dashed".
U sledećem primeru ćemo pokazati na praktičnom primeru BEM metodologije.
Slika iznad pokazuje blok koji sadrži klasu “form”. Sastavljenaje od polja za unos i submit dugmeta.
Dalje, identifikovali smo elemente unutar bloka. Ti elementi su "input" i "submit". Element "submit" ima modifikator izgleda koji čini dugme širim.
Prema svim ovim informacijama, naša lista stilova bit će napisana kao:
.form { }
.form__input { }
.form__submit { }
.form__submit--wide { }
HTML datoteka izgledat ce ovako:
<form class="form">
<input class="form__input" placeholder="your email address" />
<input type="submit" class="form__submit form__submit--wide" />
</form>
Nadamo se da vam je ovaj članak pomogao da razumete osnove RSCSS-a i BEM-a, kao i konvencije imenovanja klasa.
Pogledajte druge detaljne članke u vezi sa svojstvima CSS-a kao što je ovaj: CSS pozicije, SASS i MANJE ugneždenje, CSS kolone.