Încă de prin 2009, un webmaster renumit, pe nume Nicole Sullivan a pus bazele celei mai interesante metode de a scrie CSS.Era numită CSS Orientat pe Obiect.CSSOO e unul din acele lucruri care mi-a lăsat o impresie foarte bună, încă de când l-am auzit ca și concept și e cu siguranță una din chestiile pe care i l-aș spune oricărui web developer.Pentru mine, chestiile cu adevărat importante sunt:
- să nu folosesc nicioadată id-uri pentru a face referință la un element, astea le las pentru Javascript;
- nu specific elementele; și
- folosesc clase multiple pentru a stila elementele.
Prima se înțelege de la sine.Dacă stilezi un id ajungi într-o fundătură, nu vei mai putea să îl reutilizezi.Făcând referință la elemente cu ajutorul claselor, ai întotdeauna posibilitatea să reutilizezi stiluri; și singura problemă la ele e ordinea în care elementele se succed.
A doua se leagă de prima, atunci când faci referință la un anumit tip de element ajungi din nou într-o fundătură, fără a fi totuși necesar.Într-adevăr este mai flexibilă decât utilizarea unui id, dar nu e necesară căci va crea probleme specifice care din experiență vă pot spune că duc la un cod CSS foarte aglomerat.Ai putea să extrapolezi diferite scenarii cu privire la de ce nu ar trebui să faci referință la elemente specifice, dar pentru mine cel mai convingător este că nu am nevoie.
A treia e unde partea cu orientat pe obiect intră în acțiune.Să zicem ca ai un sub-header(.subhead) în textul tău cu culoarea albastră, italic și majuscule și altul(.minor-subhead) care e gri și italic.
Ai putea scrie așa:
[cc lang=’css’]
.subhead {
padding: 20px 0 10px 0;
font-family: Georgia, serif;
font-style: italic;
letter-spacing: 1px;
text-transform: uppercase;
color: #00f;
}
.minor-subhead {
padding: 20px 0 10px 0;
font-family: Georgia, serif;
font-style: italic;
color: #999
}
[/cc]
Iar codul HTML corespunzător ar arăta cam așa:
[cc lang=”html”]
[/cc]
Dar putem face totul mult mai bine:
[cc lang=”css”]
.subhead {
padding: 20px 0 10px 0;
font-family: Georgia, serif;
font-style: italic;
}
.subhead-major {
letter-spacing: 1px;
text-transform: uppercase;
color: #00f;
}
.subhead-minor {
color: #999
}
[/cc]
Iar codul HTML corespunzător va fi:
[cc lang=”html”]
[/cc]
Așa, mult mai bine…
Oricât de bune ți-ar fi intențiile câteodată viața îți dă peste bot și vei ajunge să ai ceva de genul…#main h3.subhead { color: #f0f !important; }.Nu fi dezamăgit căci se mai întâmplă.Dacă vezi CSS-ul la acest site o să vezi și chestii unde ti-ai pune întrebarea…ce prost a scris asta.Important ar fi ca atunci când vezi în codul tău astfel de chestii să acorzi timpul pentru a remedia problema căci la un proiect de mare anvergură, diferența se simte substanțial.