Object Oriented CSS (OOCSS) este un concept CSS care oferă reprezentare CSS rapidă, ușor de întreținut și compatibilă cu standardele. OOCSS utilizează principiile programării orientate pe obiecte (OOP), care vă permite să creați modele CSS care sunt proiectate pentru reutilizare, ceea ce reduce la rândul lor timpul de încărcare al paginilor web și crește semnificativ productivitatea acestora. Aceasta nu este o nouă tehnologie sau un mediu de dezvoltare, ci o abordare specială pentru a crea reguli care să vă permită să dați scalabilitatea și flexibilitatea codului CSS în utilizare.
Ce este un obiect CSS?
Abordarea orientată pe obiecte în CSS include două aspecte-cheie:
- Separarea structurii șablonului și a cochiliei sale.
Se presupune că fiecare fragment de cod CSS generat în cadrul șablonului poate fi utilizat prin specificarea coajălui (numele clasei) în locurile solicitate. Astfel, datorită capacității de a manipula diferite șabloane (obiecte), adică cochiliile acestora, obținem un instrument puternic și foarte flexibil pentru vizualizarea componentelor unei pagini web fără a le aglomera cu cod inutil. Cu alte cuvinte, numele de clasă sunt folosite pentru numele de obiecte și componentele acestora, ceea ce sporește foarte mult posibilitățile oferite de regulile HTML semantice.
Aceasta înseamnă minimizarea utilizării selectorilor construiți pe relații de relații ale elementelor HTML. Adică selectorii care indică elementele închise în blocul părinte. Proprietățile obiectului nu trebuie să depindă de poziția sa în document. De exemplu, la formatarea unui element de antet
imbricat în bloc cu clasa myObject în locul selectorului .myObject h2, trebuie să creați o clasă separată și să o aplicați la elementul dorit al antetului al doilea nivel, care poate fi oriunde în structura documentului.
Acest lucru ne oferă următoarele avantaje:
- Toate anteturile "curate" care nu conțin nume de clase
. vor avea un fel, indiferent de poziția lor.
- Același lucru se aplică și acelor elemente care aparțin aceleiași clase - ele vor arăta la fel în orice locație din pagină.
- Dacă aveți nevoie de un sub-element (în cazul nostru
. care este selectat de selectorul .myObject h2), afișat în modul obișnuit, standard (care este specific celui "curat"
elemente), atunci nu este nevoie să creați o regulă suplimentară care să înlocuiască regula existentă.
Ce să nu faci atunci când folosești abordarea OOCSS.
- Evitați prezența identificatorilor de elemente în selectori.
- Nu utilizați selectori pentru copii.
- De asemenea, nu se recomandă utilizarea Directivei importante!
- Nu urmați selectorii care selectau elementele după numele lor (de exemplu, h2 <…> ) adăugați nume de clase.
Beneficii.
- Reduce duplicarea codului.
- Îmbunătățește prietenia SEO a paginilor.
- Confort pentru întreținere, rafinare și optimizare.
- Codul sursă este construit pe structura ierarhică a formatării elementelor cu nume de clasă semnificative.
- Abilitatea de a reutiliza majoritatea componentelor.
- Editarea locală a codului obiect permite modificarea schemei generale a vizualizării proiectului.