Bazele Obiectiv-orientate CSS (OOCSS)

Dezvoltarea frontierelor se mișcă repede cu multe tehnici noi adăugate în fiecare an. Poate fi o luptă pentru dezvoltatori să țină pasul cu totul. Între Sass și PostCSS este ușor să te pierzi în mare de instrumente de dezvoltare.

O tehnică mai recentă este Object-Oriented CSS, denumită și OOCSS pe scurt. Acesta nu este un instrument, ci o metodologie de scriere a CSS care are ca scop face CSS modular și bazat pe obiecte.

În acest post, aș dori să introduc Fundamentele fundamentale ale OOCSS, și modul în care aceste idei pot fi aplicate pentru a avansa munca web. Această tehnică poate să nu se prindă cu fiecare dezvoltator, dar merită înțelese noțiuni noi pentru a decide dacă fluxul de lucru ar putea beneficia de el.

Ce face CSS Object-Oriented?

Object-oriented programming (OOP) este o paradigmă de programare pe care se concentrează crearea obiectelor reutilizabile și stabilirea relațiilor între ele, spre deosebire de programarea procedurală care organizează codul în proceduri (rutine, subrutine sau funcții).

POR a devenit pe scară largă în ambele Limbile JavaScript și limbajul de backend în ultimii ani, dar organizarea CSS în conformitate cu principiile sale este încă un concept nou.

“obiect” în OOCSS se referă la o Elementul HTML sau ceva asociat cu acesta (cum ar fi clasele CSS sau metodele JavaScript). De exemplu, este posibil să aveți un obiect widget lateral care ar putea fi replicat în scopuri diferite (înscrierea în buletine de știri, blocuri de anunțuri, postări recente etc.). CSS poate vizați aceste obiecte en masse ceea ce face ca scalarea sa fie briza.

Rezumând intrarea GitHub a OOCSS, un obiect CSS poate consta din patru lucruri:

1. Nodurile HTML ale DOM
2. Declarații CSS despre stilul acestor noduri
3. Componente precum imaginile de fundal
4. Comportamente JavaScript, ascultători sau metode asociate unui obiect

În general, CSS este orientat pe obiect atunci când ia în considerare clase care sunt reutilizabile și vizat la mai multe elemente de pagină.

Mulți dezvoltatori ar spune că OOCSS este mai ușor de împărtășit cu ceilalți și este mai ușor de preluat după luni sau ani de dezvoltare inactivă. Aceasta se compară cu alte metode modulare, cum ar fi SMACSS, care are reguli mai stricte pentru clasificarea obiectelor în CSS.

Pagina cu întrebări frecvente OOCSS are o grămadă de informații dacă sunteți curios să aflați mai multe. Și creatorul Nicole Sullivan discută adesea despre OOCSS și cum se leagă de dezvoltarea web modernă.

Structura separată de stil

O mare parte din OOCSS scrie un cod care separă structura paginii (lățime, înălțime, margini, umplutură) de aspect (fonturi, culori, animații). Asta permite jupuire personalizată pentru a fi aplicate pe mai multe elemente de pagină fără a afecta structura.

Acest lucru este, de asemenea, util pentru proiectarea componentelor care pot fi sa mutat în jurul layout-ului cu ușurință. De exemplu, a “Postări recente” widgetul din bara laterală ar trebui să poată fi mutat în subsol sau deasupra conținutului, menținând în același timp stiluri similare.

Iată un exemplu de OOCSS pentru a “Postări recente” widget care în acest caz este obiectul nostru CSS:

 / * Structura * / .side-widget lățime: 100%; padding: 10px 5px;  / * Skinning * / .recent-posts font-family: Helvetica, Arial, sans-serif; culoare: # 2b2b2b; font-size: 1.45em;  

Observa asta schemă este gestionat cu .side-widget clasa care ar putea fi aplicată și elementelor bara laterală multiple, în timp ce aspect este gestionat cu .Postări recente de clasă care ar putea fi, de asemenea, folosite pentru a pielea alte widget-uri. De exemplu, dacă .Postări recente widget-ul a fost mutat în subsol, s-ar putea să nu aibă aceeași poziție, dar ar putea avea același aspect și simț.

De asemenea, aruncați o privire la acest exemplu de bara laterală de la CodePen. Utilizează o separare distinctă a claselor pentru flotoare și alinierea textului, astfel încât să se facă replicarea nu va necesita un cod CSS suplimentar.

Separați containerul de conținut

Se separă conținutul din elementul său container este un alt principiu important al OOCSS.

În termeni simpli, acest lucru înseamnă numai că ar trebui să evitați utilizarea selectorilor de copii ori de câte ori este posibil. Când particularizați elemente unice ale paginii, cum ar fi linkurile de ancoră, anteturile, blocurile sau listele neordonate, trebuie să le oferiți clase unice, mai degrabă decât selectori descendenți.

Iată un exemplu simplu:

 / * OOCSS * /. Sidebar / * continutul bara laterala * / h2.sidebar-title / * stiluri speciale h2 element * / / * Non-OOCSS * h2 / * adaugă mai multă specificitate decât este necesar * / 

Deși nu este îngrozitor să utilizați cel de-al doilea format de cod, este foarte recomandat să urmați primul format dacă doriți să scrieți OOCSS curat.

Instrucțiuni de dezvoltare

Este greu să citești specificațiile exacte, deoarece dezvoltatorii dezbat în mod constant scopul OOCSS. Dar aici sunt câteva sugestii care vă pot ajuta să scrieți codul OOCSS mai curat:

• Lucreaza cu clase în loc de ID-uri pentru stil.
• Încercați să abțineți de la specificul de clasă descendentă pe mai multe niveluri dacă nu este necesar.
• Defini stiluri unice cu clase repetabile (de exemplu, plutitoare, clarfix, stive de fonturi unice).
• Extindeți elementele cu clase direcționate mai degrabă decât clasele părinților.
• Organizați-vă foaia de stil în secțiuni, vă recomandăm să adăugați un cuprins.

Rețineți că dezvoltatorii ar trebui să utilizeze încă ID-uri pentru direcționarea în JavaScript, dar nu sunt necesare pentru CSS deoarece sunt prea specifice. Dacă un obiect utilizează un ID pentru stilul CSS, acesta nu poate fi replicat niciodată, deoarece ID-urile sunt identificatori unici. Dacă folosiți numai clase pentru styling atunci moștenirea devine mult mai ușor de anticipat.

În plus, clasele pot fi legate împreună pentru caracteristici suplimentare. Un singur element ar putea avea 10 clase atașate la acesta. În timp ce 10 clase pe un element nu sunt ceva pe care l-aș recomanda personal, permite dezvoltatorilor să adune o bibliotecă de stiluri reutilizabile pentru elemente de pagină nelimitate.

Numele de clase din OOCSS sunt oarecum controversate și nu sunt piatră. Mulți dezvoltatori preferă să păstreze clasele scurte și la un punct.

Cazul Camel este, de asemenea, popular, de exemplu .errorBox in loc de .Eroare-box. Dacă vă uitați la denumirea clasei în documentația OOCSS, veți observa cazul cămilă este “oficial” recomandare. Nu este nimic în neregulă cu liniuțele, dar, de regulă, este mai bine să urmați liniile directoare OOCSS.

OOCSS + Sass

Majoritatea dezvoltatorilor web iubesc deja Sass și au depășit rapid comunitatea frontend. Dacă nu ați încercat deja Sass, merită să faceți o lovitură. Vă permite să scrieți coduri cu variabile, funcții, metode de cuibărit și de compilare cum ar fi funcțiile matematice.

În mâinile potrivite, Sass și OOCSS ar putea fi un meci făcut în ceruri. Veți găsi o scriere excelentă despre acest lucru pe blogul Sass Way.

De exemplu, folosind Sass @extinde puteți aplica proprietățile unei clase într-o altă clasă. Proprietățile nu sunt duplicate, ci, în schimb, cele două clase sunt combinate cu un selector de virgule. În acest fel, puteți actualiza proprietățile CSS într-o singură locație.

Dacă scrieți în mod constant foile de stil, acest lucru ar economisi ore de tastare și ajutor automatiza procesul OOCSS.

De asemenea, amintiți-vă întreținerea codurilor este o mare parte a OOCSS. Folosind Sass, munca ta devine mai ușoară cu variabilele, mixurile și instrumentele avansate de lăcuit legate de fluxul de lucru.

Un atribut cheie al unui mare cod OOCSS este capacitatea de ao împărtăși cu oricine, chiar tu însuți la o dată ulterioară și să poți să o iei cu ușurință.

Consideratii privind performanta

OOCSS este menit să funcționeze fără probleme și fără prea multă confuzie. Dezvoltatorii încearcă să facă cele mai bune rezultate nu să se repete la fiecare pas, de fapt aceasta este premisa în spatele dezvoltării DRY. În timp, tehnica OOCSS poate duce la sute de clase CSS cu proprietăți individuale aplicate de zeci de ori într-un document dat.

Din moment ce OOCSS este încă un subiect nou, este dificil de argumentat pe tema umflatului. Multe fișiere CSS se termină cu o structură mică, în timp ce OOCSS oferă o structură rigidă și (în mod ideal) mai puțin umflată. Cea mai mare preocupare de performanță ar fi în HTML, unde unele elemente pot acumula o mână de clase diferite pentru structura și designul layout-ului.

Veți găsi discuții interesante despre acest subiect pe site-uri precum Stack Overflow și CSS-Tricks.

Recomandarea mea este să încercați să construiți un exemplu de proiect și să vedeți cum merge. Dacă vă îndrăgostiți de OOCSS, se poate schimba radical modul în care codați site-urile Web. Alternativ, dacă o urâți, învățați încă o tehnică nouă și gândiți critic la modul în care operează. Este câștig-câștig, indiferent de ce.

Obțineți scris OOCSS ocupat

Cea mai bună modalitate de a învăța ceva în dezvoltarea web este de a practica. Dacă deja înțelegeți elementele de bază ale CSS, atunci sunteți pe drum!

Din moment ce OOCSS nu necesită preprocesare, puteți încerca cu IDE online, cum ar fi CodePen. Proiectele simple sunt cele mai bune pentru a începe, și pentru a vă îmbunătăți cunoștințele de acolo.

Aruncati o privire asupra acestor resurse pentru a va continua cercetarea in domeniul evolutiv al OOCSS.

• Site-ul oficial OOCSS
• Obiect-orientate CSS: Ce, cum și de ce
• OOCSS + Sass = Cel mai bun mod de a CSS
• O introducere la CSS orientat pe obiecte