Ați întâlnit vreodată expresia "Conținut - rege"? Dacă sunteți un dezvoltator web și munca dvs. este adesea asociată cu crearea de conținut, atunci cu siguranță ați îndeplinit. Aceasta este practic o regulă fundamentală în atragerea vizitatorilor la site.
Cu toate acestea, unii dezvoltatori web pot contesta această afirmație prin faptul că viteza este mai importantă. Și pentru mine, apropo, acest punct de vedere începe să-mi placă din ce în ce mai mult. În ultimii ani, mulți experți au sugerat diverse modalități de creștere a productivității site-urilor web, care, fără îndoială, au atras un nou trafic de calitate.
Din păcate, cei mai mulți dezvoltatori care lucrează în acest domeniu au acordat mai multă atenție performanțelor jpeg și altor aspecte. pierderea din vedere a CSS.
Astăzi, vreau să vă îndrept atenția doar la aspectul pierdut - CSS orientat pe obiect și, de asemenea, să vă spun despre cum vă poate ajuta să îmbunătățiți productivitatea și capacitatea de a menține paginile web.
Ca și în cazul oricărei codări orientate pe obiecte, obiectivul OOCSS este de a reutiliza codul, precum și capacitatea de a obține cât mai aproape de foi de stil generice și eficiente, care sunt mult mai ușor de utilizat și de menținut.
După cum sa descris despre OOCSS pe pagina wiki de la GitHub. OOCSS se bazează pe două principii fundamentale.
Separarea "ascunde" de structură
Aproape fiecare element dintr-o pagină web decorată are proprietăți vizuale diferite (adică "skin-uri") care pot fi repetate într-un context diferit. Încearcă să te gândești la formarea brandului site-ului: culori, gradații "ușoare", creând granițe vizibile sau invizibile. Pe de altă parte, există și proprietăți invizibile (adică structură), care pot fi repetate.
Atunci când aceste proprietăți diferite sunt împărțite în module bazate pe clase, ele pot fi refolosite și pot fi aplicate oricăror elemente, rezultând același rezultat. Să comparăm unele dintre ele cu codul și după cod, pentru a înțelege despre ce vorbesc.
Înainte de aplicarea principiilor OOCSS, trebuie să aveți aproximativ un astfel de cod CSS:
3 dintre elementele de mai sus sunt decorate cu clase unice și sunt aplicate folosind selectorul de identificare, care definește clasele și care nu pot fi refolosite. Dar aici se poate vedea și că mai multe clase coincid între ele. Stilurile de bază pot fi folosite ca branding sau, cu alte cuvinte, pentru a crea un sentiment de coerență în design.
După un mic gând despre structura și structura stilurilor, putem rezuma stilul de bază astfel încât codul CSS se termină astfel:
Acum, toate elementele folosesc clase, iar stilurile de bază sunt combinate într-o singură "piele", cu posibilitatea reutilizării, iar acum nu mai este nevoie să reutilizați extrasele inutile ale codului de stil. Trebuie doar să aplicăm clasei de piele tuturor elementelor și să obținem același rezultat ca în primul exemplu. Astfel, putem folosi codul mult mai puțin și putem avea capacitatea de a reutiliza stilurile.
Separarea containerelor și a conținutului
Al doilea principiu, descris pe pagina wiki de la GitHub, este separarea recipientelor de umplutura lor. Pentru a ilustra de ce este important acest lucru, vom lua în considerare următorul cod CSS:
Aceste stiluri vor fi aplicate oricăror anteturi de nivel 3 care sunt copii ai elementului #sidebar. Dar ce se întâmplă dacă trebuie să aplicăm același stil titlurilor de nivel 3 care se află în subsol, cu excepția dimensiunii fontului și a umbrei textului modificat?
În acest caz, trebuie să facem astfel:
Fie putem ajunge cu ceva mai puțin puternic:
Acum nu este nevoie să repetăm stilurile și nici nu trebuie să ne gândim la ele. Cu ajutorul OOCSS, putem gândi în prealabil ceea ce este comun între diferitele elemente, apoi combinăm aceste proprietăți într-o foaie de stil separată, care poate fi aplicată de câte ori este necesar.
Styles declarate în exemplele de mai sus folosind selectorul ereditar nu pot fi reutilizate, deoarece acestea depind de recipient special (în acest caz, atât panoul lateral și de la subsol).
Când aplicăm metoda de creare a modulelor prin clase inerente în OOCSS, putem fi siguri că stilurile noastre nu depind de nici un container. Aceasta înseamnă că pot fi folosite în orice parte a documentului, indiferent de structură.
Un exemplu din viață
Deci, haideți să ne uităm la ceva care a fost la începutul dezvoltării stilului antetului site-ului:
Iată câteva stiluri unice pentru elementul .header-inside. Dar restul poate forma un modul cu posibilitatea reutilizării. Ie avem abilitatea de a abroga stilurile structurale într-o clasă separată pentru reutilizare. Iată ce obținem ca rezultat:
Stilurile aparținând clasei .globalwidth acoperă următoarele:
* lățime fixă
* Centrare cu margine: automat
* poziționarea relativă pentru a crea un context de poziționare pentru copii
* Spațiu de 20 de pixeli pe partea stângă și pe partea dreaptă
* parametrul de depășire este ascuns, ceea ce evită apariția umplerii excesive a conținutului care depășește.
Acum putem folosi aceste stiluri cu orice element care necesită astfel de parametri, pur și simplu prin atașarea clasei cerute, în loc să scrie o linie suplimentară de cod CSS.
În ceea ce privește site-ul meu, am folosit aceste stiluri structurale cu elemente ale conținutului principal, precum și ale elementelor interne ale subsolului. În funcție de design, aceste stiluri pot fi aplicate și în navigația orizontală, care este adesea localizată între antetul site-ului și conținutul sau la orice alt element pe care doriți să îl centrați pe pagină și fixați lățimea acestuia.
După adăugarea stilurilor globale la aceste elemente, aspectul nostru ar trebui să arate cam așa:
Cineva ar putea crede că acest tip de abstracție de stiluri conduce codul HTML într-o mizerie și contrazice principiile structurării paginii.
Dar lăsând la o parte toate disputele privind efectul acestei metode asupra marcajului, este puțin probabil ca cineva să poată contesta faptul că această metodă este cea mai convenabilă și ne permite să urmărim cu ușurință zonele necesare ale codului, să le ținem la curent.
Unul dintre pionierii din OOCSS este Nicole Sullivan (Nicole Sullivan). A creat un modul cu posibilitatea reutilizării sub numele de Obiect media. Datorită lui, judecând după cuvintele sale, puteți salva sute de linii de cod.
Obiectul Media este un exemplu excelent al puterii OOCSS, deoarece poate consta din elemente media de orice dimensiune și conțin conținut. Deși multe stiluri care se aplică conținutului din interiorul acestuia (și chiar dimensiunii elementului media în sine) pot fi schimbate, obiectul Media însuși are stiluri de bază care ajută la evitarea repetării inutile.
M-am referit deja la unele beneficii ale OOCSS, dar să aruncăm o privire mai atentă.
Avantajele în performanță ar trebui să fie destul de suficiente. Dacă aveți mai puține stiluri recurente în cod, dimensiunea paginii va fi mai mică în consecință, ceea ce va duce la încărcarea mai rapidă.
Este adevărat că codul HTML va fi un pic "bătut" și acest lucru poate crește dimensiunea fișierelor HTML, dar în majoritatea cazurilor aceste pierderi mici sunt mult mai mult decât compensate de performanța mărită care poate fi obținută prin foi de stil optimizate.
Apoi, ar trebui să evidențiați și faptul că de fiecare dată când re-trimiteți la un anumit stil, creați în continuare elemente noi decorate, fără a genera noi linii de cod. Pentru proiectele mari, cu un volum mare de trafic, acest lucru poate juca un rol-cheie.
Stiluri cu capacitatea de a-și menține relevanța
Datorită programului OOCSS, în loc să crească în mod constant documente CSS cu inconsecvențe constante în semantică, va exista un set convenabil de module care pot fi folosite la cerere.
Când faceți modificări la un site Web deja activ, nu trebuie să adăugați stiluri noi la sfârșitul documentului dvs. CSS. În schimb, puteți reutiliza stilurile existente și le puteți extinde pe baza seturilor de reguli deja aplicate.
Cu această abordare, puteți dezvolta cu ușurință pagini complete folosind doar o mică selecție de cod CSS. Orice modul CSS existent poate servi drept bază pentru toate paginile noi, iar orice nou cod CSS va fi minim. În unele cazuri, puteți crea chiar pagini noi complet decorate fără o singură linie de cod CSS.
Aceste beneficii vă permit, de asemenea, să vă extindeți capacitățile în ceea ce privește mesele în cascadă. Din moment ce stilurile sunt acum modulare, chiar și noii dezvoltatori vor înțelege pur și simplu structura paginii.
Lucruri de știut
OOCSS a generat deja o mare controversă în comunități și a împărțit dezvoltatorii în suporteri și adversari. Să încercăm să rezolvăm un pic cu câteva neînțelegeri de bază.
Puteți utiliza în continuare ID-ul
Dacă decideți să vă dedicați în întregime OOCSS, atunci stilurile dvs. se vor baza, în cea mai mare parte, pe clase CSS și nu va trebui să utilizați ID-ul.
Din acest motiv, multe greșeli au tras concluzii că OOCSS te obligă să abandonezi identitatea. Această opinie este incorectă.
Aici regula este să nu folosiți ID-ul în selectori. Ie doar perfect este faptul că puteți aplica principiile OOCSS (și pentru a evita stilul cu selectori de identificare), folosind încă ID-ul în cod HTML pentru j # 097; vascript sau ca identificatori pentru fragmente de cod.
Desigur, puteți întâlni situația când ați aplicat deja ID-ul unui element, în unicitatea căruia sunteți sigur (ă). Deci, aveți posibilitatea să salvați câteva octeți fără a adăuga o clasă la acest element. Prin urmare, în loc de stil, va folosi selectorul de identificare. Dar chiar și în această situație va fi mult mai sigur să se bazeze pe clasă. Acest lucru vă va permite să vă asigurați că nu veți avea probleme în viitor.
Lucrul cu proiecte mici
În ceea ce privește site-urile mici și aplicațiile, OOCSS, desigur, poate fi superfluă. În general, nu vă sfătuiesc să luați acest articol ca model de model, deoarece OOCSS poate sau nu să fie adecvat în funcție de proiectul respectiv.
Cu toate acestea, cred că este timpul să ne gândim la implementarea OOCSS în proiectele noastre cel puțin la nivelul minim. Odată ce ați stăpânit această tehnică, sunt sigur că va fi mult mai ușor pentru dvs. să lucrați cu proiecte mari, grave, în care beneficiile aplicației vor fi foarte vizibile.
Un ghid mic pentru aplicație
Mă grăbesc să vă avertizez că puteți petrece suficient timp înainte de a putea opera cu pricepere OOCSS. Încă nu l-am stăpânit complet, așa că abia îmi pot răspunde la întrebări în acest domeniu.
Dar iată ce trebuie să înțelegeți încă de la început. Acest lucru vă va ajuta să vă integrați în OOCSS:
* Evitați selectorul pas cu pas (adică nu utilizați bara. Side h3)
* Nu folosiți ID pentru stil
* Nu atașați clase la elementele din foile de stil (adică nu utilizați div.header sau h1.title)
* Cu excepția cazurilor rare, încercați să nu utilizați! Important
* Utilizați CSS Lint pentru a verifica codul CSS (și a fi pregătit în prealabil pentru setările nebunești)
* Utilizați grila CSS
Desigur, vor exista cazuri când unele dintre aceste reguli au nevoie (sau pot) să fie rupte. Dar, în general, toate aceste cunoștințe și abilități vă vor duce la un nou nivel de dezvoltare.
Articole similare
Trimiteți-le prietenilor: