Základy objektovo orientovaného CSS (OOCSS)

Vývoj frontu sa pohybuje rýchlo s mnohými novými technikami, ktoré sa pridávajú každý rok. Môže to byť problém pre vývojárov, aby sa držali krok so všetkým. Medzi Sass a PostCSS je ľahké sa stratiť v mori vývojových nástrojov.

Jednou novšou technikou je objektovo orientovaný CSS, ktorý sa krátko nazýva aj OOCSS. Toto nie je nástroj, ale skôr metodika písania CSS, ktorej cieľom je robiť CSS modulárne a objektovo založené.

V tomto príspevku by som rád predstavil základné základy OOCSS, a ako sa tieto myšlienky môžu použiť pri práci na webových stránkach. Táto technika nemusí s každým vývojárom zachytiť, ale stojí za pochopenie nových konceptov, aby ste sa rozhodli, či by to z nich mohlo mať prospech.

Čo robí CSS objektovo orientované?

Objektovo orientované programovanie (OOP) je paradigmou programovania, na ktorú sa zameriava vytváranie opakovane použiteľných objektov a vytváranie vzťahov medzi nimi, na rozdiel od procedurálneho programovania, ktoré organizuje kód do procedúr (rutiny, podprogramy alebo funkcie).

OOP sa v oboch prípadoch široko používa Jazyk JavaScript a podporné jazyky v posledných rokoch, ale organizovanie CSS podľa jeho princípov je stále novým konceptom.

“objekt” v OOCSS odkazuje na Prvok HTML alebo všetko, čo s ňou súvisí (ako sú triedy CSS alebo metódy JavaScript). Môžete napríklad mať objekt widget bočného panela, ktorý by sa mohol replikovať na rôzne účely (registrácia newsletteru, reklamné bloky, najnovšie príspevky atď.). CSS môže zamerať tieto objekty en masse čo vytvára škálovanie.

Zhrnutie vstupu GitHub OOCSS, objekt CSS môže pozostávať zo štyroch vecí:

1. Uzly HTML DOM
2. CSS vyhlásenia o štýle týchto uzlov
3. Komponenty, ako sú obrázky na pozadí
4. JavaScript správanie, poslucháči alebo metódy spojené s objektom

Všeobecne povedané, CSS je objektovo orientovaný, keď to vezme do úvahy ktoré sú opakovane použiteľné a zamerané na prvky viacerých stránok.

Mnohí vývojári by povedali, že OOCSS je ľahšie zdieľať s ostatnými a ľahko sa vyzdvihnú po mesiacoch (alebo rokoch) neaktívneho vývoja. To je v porovnaní s inými modulárnymi metódami ako SMACSS, ktoré majú prísnejšie pravidlá pre kategorizáciu objektov v CSS.

Stránka OOCSS FAQ obsahuje veľa informácií, ak ste zvedaví viac informácií. A tvorca Nicole Sullivan často hovorí o OOCSS a ako súvisí s moderným vývojom webu.

Samostatná štruktúra od štýlu

Veľká časť OOCSS píše kód, ktorý oddeľuje štruktúru stránky (šírku, výšku, okraje, polstrovanie) od vzhľadu (písma, farby, animácie). Toto povoľuje zakázané zvrhnutie kože ktoré sa majú použiť na prvky viacerých stránok bez ovplyvnenia štruktúry.

To je tiež užitočné pri navrhovaní komponentov, ktoré môžu byť presunula sa okolo rozloženia S ľahkosťou. Napríklad a “Posledné príspevky” widget v bočnom paneli by sa mal pohybovať do päty alebo nad obsahom pri zachovaní podobných štýlov.

Tu je príklad OOCSS pre a “Posledné príspevky” widget, ktorý je v tomto prípade náš CSS objekt:

 / * Štruktúra * / .side-widget šírka: 100%; polstrovanie: 10px 5px;  / * Skinning * / .recent-posts font-family: Helvetica, Arial, sans-serif; farba: # 2b2b2b; font-size: 1.45;  

Všimni si dispozície sa spravuje pomocou .bočné widgetu triedy, ktorá by mohla byť použitá aj pre viaceré prvky bočného panela, zatiaľ čo vzhľad sa spravuje pomocou .Posledné príspevky triedy, ktorá by sa dala použiť aj na pokrytie ďalších widgetov. Napríklad, ak .Posledné príspevky miniaplikácia bola presunutá do päty, nemusí mať rovnaké umiestnenie, ale môže mať rovnaký vzhľad a dojem.

Pozrite sa tiež na tento príklad bočného panela z programu CodePen. Používa zreteľné oddelenie tried pre plaváky a zarovnanie textu tak, aby replikácia nebude vyžadovať ďalší kód CSS.

Oddeľte kontajner od obsahu

Oddeľovanie obsahu od jeho elementu kontajnera je ďalším dôležitým princípom OOCSS.

Zjednodušene povedané, znamená to len to, že by ste sa mali vyhnúť používaniu detských selektorov vždy, keď je to možné. Pri prispôsobovaní akýchkoľvek jedinečných prvkov stránky, ako sú kotvové odkazy, hlavičky, blokové bloky alebo neusporiadané zoznamy, mali by ste im poskytnúť jedinečné triedy, a nie výberové riadky.

Tu je jednoduchý príklad:

 / * OOCSS * /. Sidebar / * postranný panel obsah * / h2.sidebar-title / * špeciálne štýly h2 prvkov * / / * h2 / * pridáva špecifičnosť, ako je potrebné * / 

Hoci to nie je strašné používať druhý formát kódu, je veľmi odporúčané sledovať prvý formát, ak chcete napísať čistý OOCSS.

Usmernenia pre rozvoj

Je ťažké naštartovať presné špecifikácie, pretože vývojári neustále diskutujú o účeloch OOCSS. Ale tu je niekoľko návrhov, ktoré vám pomôžu napísať čistejší kód OOCSS:

• Pracovať s triedy namiesto ID pre styling.
• Skúsiť zdržať sa viacjazyčnej špecifity triedy potomkov ak nie je potrebné.
• vymedziť jedinečné štýly s opakovateľnými triedami (napr. plaváky, clearfix, jedinečné zásobníky fontov).
• Rozšíriť prvky s cieľovými triedami namiesto rodičovských tried.
• Usporiadajte svoj štýl do sekcií, zvážte pridanie obsahu.

Upozorňujeme, že vývojári by mali stále používať identifikátory na zacielenie na jazyk JavaScript, ale nie sú pre CSS potrebné, pretože sú príliš špecifické. Ak jeden objekt používa ID pre štýl CSS, nikdy sa nedá replikovať, pretože identifikátory sú jedinečné identifikátory. Ak používate iba štýly na štýl dedičstvo je oveľa jednoduchšie predvídať.

Navyše triedy môžu byť spojené pre ďalšie funkcie. Jediný prvok by mohol mať 10+ tried pripojených k nemu. Zatiaľ čo 10+ tried na jednom prvku nie je niečo, čo by som osobne odporúčam, umožňuje vývojárom zhromažďovať knižnicu opakovane použiteľných štýlov pre neobmedzené prvky stránky.

Názvy tried v rámci OOCSS sú trochu kontroverzné a nie sú v kameňoch. Mnoho vývojárov dáva prednosť tomu, aby hodiny zostávali krátke a do určitej miery.

Veľmi populárne je aj puzdro na camel .errorBox namiesto .error-box. Ak sa pozriete na názov triedy v dokumentácii OOCSS, všimnete si, že prípad ťavy je “úradné” odporúčania. Nie je nič zlého s pomlčkami, ale spravidla je najlepšie dodržiavať pokyny OOCSS.

OOCSS + Sass

Väčšina webových vývojárov už miluje Sass a rýchlo prekonala komunitu frontend. Ak ste ešte nepokúsili Sassa, stojí za to, že mu to urobíte. Umožňuje vám napísať kód s premennými, funkciami, metódami hniezdenia a kompilácie, ako sú matematické funkcie.

V príslušných rukách by Sass a OOCSS mohli byť zápasom v nebi. Nájdete tu vynikajúci zápis o tomto na blogu Sass Way.

Napríklad pomocou funkcie Sass @extend môžete použiť vlastnosti jednej triedy na inú triedu. Vlastnosti nie sú duplicitné, ale dve triedy sú skombinované s voličom čiar. Týmto spôsobom môžete aktualizovať vlastnosti CSS na jednom mieste.

Ak neustále píšete štýly šablón, ušetrí by to hodiny písania a pomoc automatizovať proces OOCSS.

Pamätajte tiež na to správa kódu je veľkou súčasťou OOCSS. Pomocou nástroja Sass sa vaša práca uľahčuje pomocou premenných, mixinov a pokročilých nástrojov na lustovanie viazaných do pracovného postupu.

Kľúčovým atribútom veľkého kódu OOCSS je možnosť zdieľať ho s kýmkoľvek, dokonca aj neskôr, a budete ju môcť ľahko vyzdvihnúť.

Výkonnosť

OOCSS má fungovať hladko a bez veľkého zmätku. Vývojári vyskúšajú svoje najlepšie nie opakovať sa na každom kroku, v skutočnosti to je predpoklad pre vývoj DRY. Postupom času môže technológia OOCSS viesť k stovkám tried CSS s jednotlivými vlastnosťami, ktoré sa v danom dokumente uplatňujú desiatky krát.

Vzhľadom k tomu, že OOCSS je stále nová téma, je ťažké diskutovať o téme nadúvania. Mnoho súborov CSS sa nakoniec nafúkne s malou štruktúrou, zatiaľ čo OOCSS poskytuje tuhú štruktúru a (ideálne) menej nadúvanie. Najväčší záujem o výkon by bol v HTML, kde niektoré prvky môžu hromadiť niekoľko rôznych tried pre usporiadanie štruktúry a dizajnu.

Zaujímavé diskusie o tejto téme nájdete na stránkach, ako sú Stack Overflow a CSS-Triky.

Moje odporúčanie je pokúsiť sa vybudovať vzorový projekt a uvidíte, ako to ide. Ak sa zamilujete do OOCSS, môže radikálne zmeniť spôsob, akým kódujete webové stránky. Alternatívne, ak to nenávidíš, stále sa učíš nová technika a myslíš kriticky na to, ako funguje. Je to win-win bez ohľadu na to, čo.

Získajte obsadené písanie OOCSS

Najlepší spôsob, ako sa naučiť čokoľvek v rozvoji webu, je praktizovať. Ak ste už pochopili základy CSS, potom ste na ceste!

Vzhľadom k tomu, že OOCSS nevyžaduje predbežné spracovanie, môžete ho vyskúšať pomocou online IDE, ako napríklad CodePen. Jednoduché projekty sú najlepšie pre začatie a zlepšenie vašich vedomostí odtiaľ.

Pozrite sa na tieto zdroje na podporu vášho výskumu v rozvíjajúcej sa oblasti OOCSS.

• Oficiálna webová stránka OOCSS
• Objektovo orientované CSS: Čo, ako a prečo
• OOCSS + Sass = najlepší spôsob, ako CSS
• Úvod do objektovo orientovaného CSS