Osnove objektno orijentiranog CSS-a (OOCSS)

Frontend razvoj se brzo pokreće s mnogim novim tehnikama koje se dodaju svake godine. To može biti borba za programere da drže korak sa svime. Između Sassa i PostCSS-a lako se izgubiti u moru razvojnih alata.

Jedna novija tehnika je Object-Oriented CSS, koja se također kratko naziva OOCSS. Ovo nije alat, nego CSS metodologija pisanja koja ima za cilj čine CSS modularnim i objektnim.

U ovom postu, želim vam predstaviti temeljne osnove OOCSS-a, i kako se te ideje mogu primijeniti na rad web-sučelja. Ova tehnika možda neće biti uspješna kod svakog razvojnog programera, ali vrijedi razumjeti nove koncepte da biste odlučili može li vaš radni proces imati koristi od njega.

Što čini CSS objektno orijentiranom?

Objektno orijentirano programiranje (OOP) je programska paradigma na koju se fokusira stvaranje objekata koji se mogu ponovno koristiti i uspostavljanje odnosa između njih, za razliku od proceduralnog programiranja koje organizira kod u postupke (rutine, potprograme ili funkcije).

OOP je postao široko korišten u oba JavaScript i pozadinski jezici u posljednjih nekoliko godina, no organiziranje CSS-a prema svojim načelima još je uvijek novi koncept.

“objekt” u OOCSS se odnosi na HTML element ili bilo što povezano s njim (kao što su CSS klase ili JavaScript metode). Na primjer, možda imate objekt widgeta na bočnoj traci koji se može replicirati za različite namjene (prijave na newsletter, blokove oglasa, nedavne postove itd.). CSS može ciljati te objekte masovno što čini skaliranje povjetarcem.

Rezimirajući OOCSS 'GitHub unos, CSS objekt može se sastojati od četiri stvari:

1. HTML čvor (i) DOM-a
2. CSS izjave o stilu tih čvorova
3. Komponente kao pozadinske slike
4. JavaScript ponašanja, slušatelji ili metode povezane s objektom

Općenito govoreći, CSS je objektno orijentiran kada se razmatra klase koje se mogu ponovno koristiti i ciljati na više elemenata stranice.

Mnogi programeri bi rekli da je OOCSS lakše dijeliti s drugima i lakše ih je pokupiti nakon mjeseci (ili godina) neaktivnog razvoja. To se može usporediti s drugim modularnim metodama kao što je SMACSS koji ima stroža pravila za kategorizaciju objekata u CSS-u.

Na OOCSS stranici s često postavljenim pitanjima postoji hrpa informacija ako vas zanima da saznate više. I kreator Nicole Sullivan često govori o OOCSS-u i kako se povezuje s modernim razvojem weba.

Odvojite strukturu od stila

Veliki dio OOCSS-a je pisanje koda koji razdvaja strukturu stranice (širina, visina, margine, padding) od izgleda (fontovi, boje, animacije). Ovo dopušta prilagođeni skinning koja se primjenjuje na više elemenata stranice bez utjecaja na strukturu.

Ovo je također korisno za projektiranje komponenti koje mogu biti kretao se po rasporedu s lakoćom. Na primjer, a “Najnoviji postovi” widget na bočnoj traci trebao bi se pomicati u podnožje ili iznad sadržaja uz održavanje sličnih stilova.

Evo primjera OOCSS-a za “Najnoviji postovi” widget koji je u ovom slučaju naš CSS objekt:

 / * Struktura * / .side-widget širina: 100%; obloga: 10px 5px;  / * Skinning * / .recent-posts familija fontova: Helvetica, Arial, sans-serif; boja: # 2b2b2b; font-size: 1.45em;  

Primijeti da raspored se upravlja pomoću .bočni dodatak klasa koja se može primijeniti i na više elemenata bočne trake, dok izgled se upravlja pomoću .Najnoviji postovi klasa koja se također može koristiti za obradu drugih widgeta. Na primjer, ako je .Najnoviji postovi widget premješten je u podnožje, možda neće zauzeti isto pozicioniranje, ali može imati isti izgled i dojam.

Također pogledajte ovaj sidebar primjer iz CodePen. Ona koristi različitu podjelu klasa za plovke i poravnavanje teksta tako da Replikacija neće zahtijevati dodatni CSS kod.

Odvojite spremnik od sadržaja

Odvajanje sadržaja od elementa spremnika je još jedno važno načelo OOCSS-a.

Na jednostavniji način, to samo znači da izbjegavate korištenje dječjih selektora kad god je to moguće. Prilikom prilagođavanja jedinstvenih elemenata stranice poput veza sidra, zaglavlja, blokova ili neuređenih popisa, trebali biste im dati jedinstvene klase, a ne selektore potomaka.

Evo jednostavnog primjera:

 / * OOCSS * / .bar-bar / * sadržaj bočne trake * / h2.sidebar-title / * specijalni h2 elementi stilova * / / * Non-OOCSS * / .sidebar / * isti sadržaj bočne trake * / .sidebar h2 / * dodaje više specifičnosti nego što je potrebno * / 

Iako nije užasno koristiti drugi format koda, preporučuje se da slijedite prvi format ako želite pisati čistu OOCSS.

Smjernice za razvoj

Teško je odrediti precizne specifikacije jer programeri stalno raspravljaju o svrsi OOCSS-a. Ali ovdje je neke prijedloge koji vam mogu pomoći u pisanju OOCSS koda:

• Raditi sa klase umjesto ID-ova za styling.
• Pokušati suzdržati se od višestupanjske klasne specifičnosti nasljednika osim ako je potrebno.
• Definirati jedinstvene stilove s ponovljivim klasama (npr. floats, clearfix, jedinstveni skupovi fontova).
• Proširite elemente s ciljanim razredima umjesto roditeljskih klasa.
• Organizirajte svoj stilski list u dijelove, razmislite o dodavanju sadržaja.

Imajte na umu da programeri i dalje trebaju koristiti ID-ove za JavaScript ciljanje, ali oni nisu potrebni za CSS jer previše su specifični. Ako jedan objekt koristi ID za CSS styling, nikad se ne može replicirati jer su ID-ovi jedinstveni identifikatori. Ako tada koristite samo klase za styling nasljeđivanje postaje mnogo lakše predvidjeti.

Osim toga, klase se mogu povezati zajedno za dodatne značajke. Jedan element mogao bi imati 10 + klase. Dok 10 + klase na jednom elementu nije nešto što bih osobno preporučio, on dopušta programerima da skupljaju biblioteku stilova za višestruke upotrebe za neograničene elemente stranice..

Imena klasa unutar OOCSS-a donekle su kontroverzna, a ne u kamenu. Mnogi razvojni inženjeri radije drže nastavu kratkom i točnom.

Camel slučaj je također popularan, na primjer .errorBox umjesto .greška-box. Ako pogledate nazivanje razreda u dokumentaciji OOCSS-a, primijetit ćete da je slučaj kamila “službeno” preporuka. Nema ništa loše s crtama, ali u pravilu je najbolje slijediti OOCSS smjernice.

OOCSS + Sass

Većina web programera već voli Sass i brzo je preuzela zajednicu sučelja. Ako već niste isprobali Sass, vrijedi ga dati. To vam omogućuje da pišete kod s varijablama, funkcije, gniježđenje i kompilacije metode kao što su matematičke funkcije.

U kompetentnim rukama, Sass i OOCSS mogli bi biti utakmica napravljena na nebu. Na blogu Sass Way pronaći ćete izvrstan zapisnik.

Na primjer, koristeći Sass @extend Možete primijeniti svojstva jedne klase na drugu klasu. Svojstva se ne udvostručuju, već se dva razreda kombiniraju s odabirom zareza. Na taj način možete ažurirati CSS svojstva na jednom mjestu.

Ako stalno pišete stilove, to bi uštedjelo sati tipkanja i pomoć automatizirati proces OOCSS.

Također zapamtite to održavanje koda je veliki dio OOCSS-a. Koristeći Sass, vaš posao postaje lakši s varijablama, miksinima i naprednim alatima za vezanje u tijek rada.

Ključni atribut velikog OOCSS koda je sposobnost dijeljenja s drugima, čak i sebe kasnije, i biti u mogućnosti to podići s lakoćom.

Razmatranja izvedbe

OOCSS je namijenjen za rad glatko i bez mnogo konfuzije. Programeri nastoje dati sve od sebe ne da se ponavljaju na svakom koraku, zapravo to je premisa iza razvoja SUHIH. S vremenom, tehnika OOCSS može dovesti do stotina CSS klasa s pojedinačnim svojstvima koje se primjenjuju na desetke puta u danom dokumentu.

Budući da je OOCSS još uvijek nova tema, teško je raspravljati o temi nadimanja. Mnoge CSS datoteke završavaju otečene sa malo strukture, dok OOCSS osigurava krutu strukturu i (idealno) manje nadimanje. Najveća zabrinutost zbog performansi bila bi u HTML-u gdje neki elementi mogu akumulirati pregršt različitih klasa za strukturu izgleda i dizajn.

Zanimljive rasprave o ovoj temi naći ćete na stranicama kao što su Stack Overflow i CSS-Tricks.

Moja preporuka je pokušati izgraditi uzorak projekta i vidjeti kako to ide. Ako se zaljubite u OOCSS, može radikalno promijeniti način na koji kodirate web-lokacije. Alternativno, ako ga mrzite, još uvijek učite novu tehniku ​​i kritički razmišljate o tome kako ona djeluje. To je win-win bez obzira na sve.

Budite zauzeti pisanjem OOCSS-a

Najbolji način da se nešto nauči u razvoju weba jest praksa. Ako već razumijete osnove CSS-a onda ste na dobrom putu!

Budući da OOCSS ne zahtijeva pretprocesiranje, možete ga isprobati s online IDE-om, kao što je CodePen. Jednostavni projekti su najbolji za početak i poboljšanje vašeg znanja od tamo.

Pogledajte ove resurse kako biste unaprijedili svoja istraživanja u razvoju područja OOCSS-a.

• Službena web-stranica OOCSS-a
• Objektno orijentirani CSS: što, kako i zašto
• OOCSS + Sass = Najbolji način za CSS
• Uvod u objektno orijentirani CSS