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 (
Stiilide korrektne nimetamine