Osnove objektno usmerjenega CSS (OOCSS)

Frontendov razvoj se hitro premika z mnogimi novimi tehnikami, ki se dodajo vsako leto. Lahko je boj za razvijalce, da se držijo vsega. Med Sass in PostCSS je enostavno izgubiti v morju razvojnih orodij.

Ena novejša tehnika je Object-Oriented CSS, imenovana tudi OOCSS za krajše. To ni orodje, ampak metodologija pisanja CSS, ki si prizadeva naredite CSS modularno in objektno zasnovano.

V tej objavi bi rada uvedla temeljne osnove OOCSS, in kako se te ideje lahko uporabijo za spletno delo. Ta tehnika morda ne bo zajela vsakega razvijalca, vendar je vredno razumeti nove koncepte, da se odloči, ali bi lahko vaš potek dela koristil.

Kaj naredi objektno usmerjeno CSS?

Objektno usmerjeno programiranje (OOP) je programska paradigma, na katero se osredotočamo ustvarjanje predmetov, ki jih je mogoče ponovno uporabiti in vzpostavljanje odnosov v nasprotju s postopkovnim programiranjem, ki kodo organizira v postopke (rutine, podprograme ali funkcije).

OOP je postal zelo uporaben v obeh JavaScript in jeziki v ozadju v zadnjih nekaj letih pa je oblikovanje CSS po načelih še vedno nov koncept.

The “predmet” v OOCSS se nanaša na Element HTML ali karkoli, ki je z njim povezana (npr. CSS razredi ali metode JavaScript). Na primer, lahko imate predmet pripomočka za stransko vrstico, ki bi se lahko kopiral za različne namene (prijava na novice, bloki oglasov, nedavne objave itd.). CSS lahko ciljno usmerite te predmete zaradi česar je luščenje vetrič.

Če povzamemo vnos OOCSS GitHub, lahko CSS objekt vsebuje štiri stvari:

1. HTML vozlišče DOM-a
2. Izjave CSS o slogu teh vozlišč
3. Komponente, kot so slike ozadja
4. JavaScript vedenja, poslušalci ali metode, povezane z objektom

Splošno gledano je CSS objektno usmerjen, ko se zdi razrede, ki jih je mogoče ponovno uporabiti in ciljati na več elementov strani.

Mnogi razvijalci bi rekli, da je OOCSS lažje deliti z drugimi in ga lažje pobrati po mesecih (ali letih) neaktivnega razvoja. To se primerja z drugimi modularnimi metodami, kot je SMACSS, ki ima strožja pravila za kategoriziranje objektov v CSS.

Na strani s pogostimi vprašanji OOCSS je na voljo veliko informacij, če vas zanima več. In ustvarjalec Nicole Sullivan pogosto govori o OOCSS in kako se povezuje z modernim razvojem spletnih strani.

Ločeno strukturo od sloga

Velik del OOCSS je pisanje kode, ki ločuje strukturo strani (širina, višina, robovi, oblazinjenje) od videza (pisave, barve, animacije). To omogoča po meri kože uporabiti na več elementih strani brez vpliva na strukturo.

To je uporabno tudi za oblikovanje komponent, ki so lahko premaknili po postavitvi z lahkoto. Na primer: a “Zadnje objave” Pripomoček v stranski vrstici mora biti premakljiv v nogo ali nad vsebino, hkrati pa ohranja podobne sloge.

Tukaj je primer OOCSS za a “Zadnje objave” gradnik, ki je v tem primeru naš CSS objekt:

 / * Struktura * / .side-widget širina: 100%; oblazinjenje: 10px 5px;  / * Skinning * / .recent-posts družina pisav: Helvetica, Arial, sans-serif; barva: # 2b2b2b; velikost pisave: 1.45em;  

To opazite postavitev upravlja z .stranski widget razred, ki se lahko uporabi tudi za več elementov stranske vrstice, medtem ko. \ t videz upravlja z .Zadnje objave razred, ki bi se lahko uporabil tudi za obdelavo drugih pripomočkov. Na primer, če .Zadnje objave Pripomoček je bil premaknjen na nogo, morda ne bo imel enakih položajev, lahko pa ima enak videz in občutek.

Oglejte si tudi ta primer iz CodePen-a. Uporablja ločeno razdelitev razredov za plovbe in poravnavo besedila, tako da Replikacija ne bo zahtevala dodatne kode CSS.

Ločeno vsebino iz vsebine

Ločevanje vsebine od vsebnika je še eno pomembno načelo OOCSS.

Na enostavnejši način to pomeni le, da se izogibate uporabi selektorjev otrok, kadar je to mogoče. Pri prilagajanju posameznih elementov strani, kot so sidrne povezave, glave, kvadrati ali neurejeni seznami, jim morate dati unikatne razrede in ne selektorje potomcev.

Tu je preprost primer:

 / * OOCSS * / .sidebar / * vsebina stranske vrstice * / h2.sidebar-title / * posebni slogi elementov h2 * / / * Non-OOCSS * / .sidebar / * vsebina iste stranske vrstice * / .sidebar h2 / * dodaja več specifičnosti kot je potrebno * / 

Čeprav ni strašno uporabljati drugo obliko kode, je zelo priporočljivo, da sledite prvemu formatu, če želite pisati čisto OOCSS.

Smernice za razvoj

Težko je določiti natančne specifikacije, ker razvijalci nenehno razpravljajo o namenu OOCSS. Ampak tukaj so nekaj predlogov, ki vam lahko pomagajo napisati čistejšo kodo OOCSS:

• Delo z namesto ID-jev za oblikovanje.
• Poskusi vzdržati se razredne specifičnosti na več ravneh razen če je potrebno.
• Definiraj edinstvene sloge s ponovljivimi razredi (npr. plovci, clearfix, edinstvene skladovnice).
• Razširi elemente ciljnih razredov namesto starševskih razredov.
• Organizirajte svoj slogovni slog v odseke, razmislite o dodajanju kazala.

Upoštevajte, da morajo razvijalci še vedno uporabljati ID-je za ciljanje JavaScripta, vendar za CSS niso potrebni, ker preveč so specifični. Če en objekt uporablja ID za oblikovanje CSS, ga nikoli ne morete podvojiti, ker so ID-ji edinstveni identifikatorji. Če uporabljate samo razrede za oblikovanje dedovanje postane veliko lažje napovedati.

Poleg tega lahko razrede povežemo za dodatne funkcije. En element bi lahko imel 10 + razredov. Medtem ko 10 + razredov na enem elementu ni nekaj, kar bi jaz osebno priporočil, omogoča razvijalcem, da zberejo knjižnico stilov za večkratno uporabo za neomejene elemente strani..

Imena razredov znotraj OOCSS so nekoliko sporna in niso v kamnu. Mnogi razvijalci se raje držijo razredov kratek in do točke.

Primer je tudi priljubljen primer kamele .errorBox namesto .škatla z napako. Če pogledate klasifikacijsko poimenovanje v dokumentaciji OOCSS, boste opazili, da je primer kamele “uradni” priporočilo. Nič ni narobe s pomišljaji, vendar je praviloma najbolje upoštevati smernice OOCSS.

OOCSS + Sass

Večina spletnih razvijalcev že ljubi Sass in je hitro prehitela skupnost frontendov. Če še niste preizkusili Sassa, je vredno, da to naredite. Omogoča vam pisanje kode s spremenljivkami, funkcijami, metodami gnezdenja in prevajanja, kot so matematične funkcije.

V kompetentnih rokah bi lahko bila Sass in OOCSS tekma v nebesih. O tem boste našli odličen zapisnik na blogu The Sass Way.

Na primer, z uporabo Sass @extend direktivo lahko uporabite lastnosti enega razreda na drug razred. Lastnosti niso podvojene, ampak sta dva razreda kombinirana z izbirnikom vejic. Na ta način lahko posodobite lastnosti CSS na eni lokaciji.

Če nenehno pišete slogi, bi to prihranilo ur tipkanja in pomoč avtomatizirati proces OOCSS.

Zapomnite si tudi to vzdrževanje kode je velik del OOCSS. Z uporabo Sass se vaše delo lažje prilagodi spremenljivkam, kombinacijam in naprednim orodjem, ki so vezani na delovni tok.

Ključni atribut velike kode OOCSS je sposobnost, da jo delite z nikomer, kasneje tudi sami in ga lahko zlahka poberete.

Premisleki o uspešnosti

OOCSS naj bi deloval gladko in brez velike zmede. Razvijalci poskušajo po svojih najboljših močeh ne ponavljati na vsakem koraku, pravzaprav to je predpogoj za razvoj SUHIH. Sčasoma lahko tehnika OOCSS privede do več sto razredov CSS s posameznimi lastnostmi, ki se v danem dokumentu uporabljajo desetkrat.

Ker je OOCSS še vedno nova tema, je težko razpravljati o temi napihnjenosti. Številne datoteke CSS na koncu postanejo napihnjene z malo strukture, medtem ko OOCSS zagotavlja togo strukturo in (idealno) manj napihnjenosti. Največja zaskrbljenost zaradi uspešnosti bi bila v HTML-ju, kjer se lahko nekateri elementi kopičijo peščica različnih razredov za strukturo postavitve in oblikovanje.

Zanimive razprave o tej temi boste našli na spletnih mestih, kot sta Stack Overflow in CSS-Tricks.

Moje priporočilo je, da poskusite zgraditi vzorčni projekt in poglejte, kako gre. Če se zaljubite v OOCSS, lahko to korenito spremeni način kodiranja spletnih mest. Če pa sovražite, se še vedno učite nove tehnike in kritično razmišljate, kako deluje. To je win-win, ne glede na to.

Zasedeno pisanje OOCSS

Najboljši način, da se kaj naučite v razvoju spletnih strani, je praksa. Če že razumete osnove CSS-ja, potem ste na dobri poti!

Ker OOCSS ne zahteva predobdelave, ga lahko poskusite s spletnim IDE, kot je CodePen. Enostavni projekti so najboljši za začetek in izboljšanje vašega znanja od tam.

Oglejte si te vire za nadaljnje raziskovanje na razvijajočem se področju OOCSS.

• Uradna spletna stran OOCSS
• Objektno usmerjen CSS: kaj, kako in zakaj
• OOCSS + Sass = Najboljši način za CSS
• Uvod v objektno usmerjen CSS