Skip to content
Gallery
Front-end ehk eesrakendus
Front-end ehk eesrakendus
Share
Explore
II poolaasta

icon picker
Stiilide korrektne nimetamine

Sttilide nimetamine – naming convention
CSS nimetamise konventsioon ehk kokkulepe on süsteem, mis aitab hoida CSS-koodi korralikult organiseeritu ja arusaadavana. See muudab koodi hooldamise lihtsamaks ja aitab meeskonnaliikmetel kiiresti mõista, kuidas stiilireeglid on struktureeritud.
Siin on mõned levinud CSS-i naming konventsioonid:
BEM (Block Element Modifier):
BEM on populaarne nimetamiskonventsioon, mis eristab HTML-i elemente, mida CSS mõjutab.
Blokk on suurem osa (nt .nupp).
Element on osa blokist (nt .nupp__ikoon).
Modifikaatorid on stiilireeglite muutujad (nt .nupp--suur, .nupp--aktiivne).
Näide:
.nupp {
}
.nupp__ikoon {
}
.nupp--suur {
}
OOCSS (Object-Oriented CSS):
OOCSS keskendub komponentide korduvkasutatavusele ja eraldab struktuurilise ja kujundusliku stiili.
Stiilidele antakse klassid, mis kajastavad komponenti või objekti iseloomu, mitte selle välimust.
Näide:
.nupp {
}
.nupp-tekst {
}
.nupp-ikoon {
}
SMACSS (Scalable and Modular Architecture for CSS):
SMACSS pakub viise stiilide jaotamiseks erinevatesse kategooriatesse, nagu baas-, kujundus-, moodul- ja teemastiilid.
Näide:
/* Baasstiilid */
body {
}
a {
}

/* Kujundusstiilid */
.pealkiri {
}
.nupp {
}

/* Moodulstiilid */
.nupp__ikoon {
}
.menüü__link {
}

/* Teemastiilid */
.teema-peamine {
}
.teema-teine{
}
ATOMIC CSS:
Atomic CSS eelistab väga väikesi ja korduvkasutatavaid stiile, mis on tavaliselt väga spetsiifilised ja kasutavad üksikut omadust korraga.
Näide:
.bg-blue {
}
.color-white {
}
.fs-16 {
}
Igal nimetamiskonventsioonil on oma eelised ja sobib erinevatesse projektidesse. Oluline on valida ühes projektis sobiv konventsioon ja järgida seda järjekindlalt, et hoida CSS-koodi selge ja hõlpsasti hooldatavana.
Want to print your doc?
This is not the way.
Try clicking the ⋯ next to your doc name or using a keyboard shortcut (
CtrlP
) instead.