Objekt-orienteeritud CSS (OOCSS) põhialused

Frontendi areng liigub kiiresti, igal aastal lisatakse palju uusi tehnikaid. See võib olla võitlus arendajate jaoks, et kursis kõike. Sass'i ja PostCSSi vahel on kerge kaotada arendustööriistade merest.

Üks uuem tehnika on Object-Oriented CSS, mida nimetatakse ka lühikeseks OOCSS-ks. See ei ole vahend, vaid pigem CSS-i kirjutamise metoodika, mille eesmärk on muuta CSS modulaarne ja objektipõhine.

Selles postituses tahaksin tutvustada OOCSSi põhialused, ja kuidas neid ideid saab rakendada veebipõhise töö jaoks. See tehnika ei pruugi iga arendajaga hakkama saada, kuid tasub mõista uusi kontseptsioone, et otsustada, kas teie töövoog võiks sellest kasu saada.

Mis teeb CSS-i objektorienteeritud?

Objektile orienteeritud programmeerimine (OOP) on programmeerimise paradigma, mis keskendub korduvkasutatavate objektide loomine ja suhete loomine nende vahel, erinevalt menetluslikust programmeerimisest, mis korraldab koodi menetlusteks (rutiinid, alamprogrammid või funktsioonid).

OOP on mõlemas kasutuses laialdaselt kasutatud JavaScripti ja taustaprogrammi keeled viimastel aastatel on CSS-i korraldamine oma põhimõtete kohaselt siiski uus mõiste.

The “objekti” OOCSS-is viitab HTML-element või sellega seotud midagi (näiteks CSS klassid või JavaScript meetodid). Näiteks võib teil olla külgriba vidinobjekt, mida saab paljundada erinevatel eesmärkidel (uudiskirja registreerimine, reklaamiplokid, viimased postitused jne). CSS saab sihtige neid objekte massiliselt mis muudab mastaabimise.

Kokkuvõttes OOCSSi GitHubi kirje võib CSS-objekt koosneda neljast asjast:

1. DOMi HTML-sõlmed
2. CSS-deklaratsioonid nende sõlmede stiili kohta
3. Komponendid nagu taustpildid
4. JavaScripti käitumine, kuulajad või objektiga seotud meetodid

Üldiselt, CSS on objektiivne, kui ta arvab korduvkasutatavad klassid ja sihitavad mitmele lehele.

Paljud arendajad ütleksid, et OOCSS on teistega lihtsam jagada ja pärast kuude (või aastate) inaktiivset arengut. See on võrreldav teiste modulaarsete meetoditega nagu SMACSS, millel on rangemad reeglid objektide CSS-i kategoriseerimiseks.

OOCSS KKK lehel on hulk infot, kui olete uudishimulik. Ja looja Nicole Sullivan räägib tihti OOCSSist ja sellest, kuidas see seostub kaasaegse veebiarendusega.

Eraldi struktuur stiilist

Suur osa OOCSS-ist on kirjutada kood, mis eraldab lehekülje struktuuri (laius, kõrgus, marginaalid, polsterdus) välimusest (fonte, värve, animatsioone). See võimaldab kohandatud nülgimine rakendatakse mitmele lehele ilma struktuuri mõjutamata.

See on kasulik ka komponentide kavandamisel ümber paigutuse kergesti. Näiteks a “Viimased postitused” vidina külgriba peaks olema liikuv jalusesse või sisu ülalpool, säilitades samasuguse stiili.

Siin on näide OOCSS kohta a “Viimased postitused” vidin, mis antud juhul on meie CSS-objekt:

 / * Struktuur * / .side-vidin laius: 100%; polsterdus: 10px 5px;  / * Nülgimine * / .recent-posts font-family: Helvetica, Arial, sans-serif; värv: # 2b2b2b; fondi suurus: 1.45em;  

Märka seda paigutus haldab .külg-vidin klassi, mida saab kasutada ka mitme külgriba elemendi jaoks välimus haldab .Viimased postitused klassi, mida võiks kasutada ka teiste vidinate nahale. Näiteks, kui .Viimased postitused vidin liigutati jalusesse, see ei pruugi samasugust positsioneerimist teha, kuid see võib olla sama välimus ja tunne.

Vaadake ka seda külgriba näidet CodePenist. See kasutab ujukite ja teksti joondamise klasside selget eraldamist nii, et replikatsioon ei nõua täiendavat CSS-koodi.

Eraldi mahuti sisu

Sisu eraldamine konteineri elemendist OOCSS on veel üks oluline põhimõte.

Lihtsamalt öeldes tähendab see ainult seda, et peaksite alati vältima laste valiku kasutamist. Kõikide unikaalsete leheküljeelementide, nagu ankurlinkide, päiste, blokkvootide või järjekorras olevate nimekirjade kohandamisel peaksite andma neile unikaalsed klassid, mitte järeltulijad.

Siin on lihtne näide:

 / * OOCSS * / .sidebar / * külgriba sisu * / h2.sidebar-title / * spetsiaalsed h2 elemendi stiilid * / / * mitte-OOCSS * / .sidebar / * sama külgriba sisu * / .sidebar h2 / * lisab rohkem spetsiifilisust kui vaja * / 

Kuigi teise koodivormi kasutamine ei ole kohutav, on soovitatav järgida esimest vormingut, kui soovite kirjutada puhast OOCSS-i.

Arengu suunised

Täpne spetsifikatsioon on keeruline, sest arendajad arutavad pidevalt OOCSSi eesmärki. Aga siin on mõned soovitused, mis aitavad teil kirjutada puhtama OOCSS koodi:

• Töötama koos ID-de asemel stiili jaoks.
• Proovi hoiduda mitmetasandilise järglase klassi spetsiifilisusest kui vaja.
• Määrake kordumatu klassidega unikaalsed stiilid (nt ujukid, selgepiirid, unikaalsed fondipakid).
• Laiendage elemente sihtrühmadega mitte vanemate klasside puhul.
• Korraldage oma stiilitabel sektsioonidesse, kaaluda sisukorra lisamist.

Pange tähele, et arendajad peaksid siiski kasutama JavaScripti sihtimiseks ID-sid, kuid neid ei nõuta CSS-i jaoks, sest nad on liiga spetsiifilised. Kui üks objekt kasutab CSS-stiili ID-d, ei saa seda kunagi kopeerida, kuna ID-d on unikaalsed identifikaatorid. Kui kasutate siis stiilide jaoks ainult klasse pärandist on palju lihtsam ennustada.

Lisaks saab klasside lisafunktsioone ühendada. Ühele elemendile võib lisada 10+ klassi. Kuigi 10 + klassid ühel elemendil ei ole midagi, mida ma isiklikult sooviksin, võimaldab see arendajatel koguda korduvkasutatavate stiilide raamatukogu piiramatute leheküljeelementide jaoks.

OOCSS-i klassi nimed on mõnevõrra vastuolulised ja mitte kivisse paigutatud. Paljud arendajad eelistavad hoida klassid lühikesed ja punktini.

Näiteks on populaarne kaameli juhtum .errorBox selle asemel .viga. Kui vaatate klassi nime OOCSSi dokumentatsioonis, märkate kaameli juhtumit “ametnik” soovitus. Kriipsudega pole midagi valesti, kuid reeglina on kõige parem järgida OOCSSi juhiseid.

OOCSS + Sass

Enamik veebiarendajaid armastab juba Sassit ja see on kiiresti jõudnud esiplaanile. Kui sa pole Sass'it juba proovinud, siis tasub seda teha. See võimaldab teil kirjutada koodi muutujate, funktsioonide, pesitsus- ja kompileerimismeetoditega nagu matemaatilised funktsioonid.

Pädevates kätes võiks Sass ja OOCSS olla taevas tehtud mäng. Sass Way blogis leiate selle kohta suurepärase kirja.

Näiteks Sassi kasutamine @extend direktiiviga saate rakendada ühe klassi omadusi teisele klassile. Omadusi ei dubleerita, vaid need kaks klassi on ühendatud komaga. Nii saate CSS-i omadusi ühes kohas värskendada.

Kui sa kirjutad pidevalt stiili, säästaks see tundide arv ja abi automatiseerida OOCSS protsessi.

Samuti pidage meeles seda koodide hooldus on OOCSSi suur osa. Kasutades Sassit, muutub teie töö lihtsamaks muutujate, segude ja täiustatud linting tööriistadega, mis on seotud töövoogu.

Suur OOCSS-koodi peamine atribuut on võime seda kellelegi jagada, isegi ennast hilisemal kuupäeval ja saaksid seda kergesti kätte saada.

Tulemuslikkuse kaalutlused

OOCSS on mõeldud toimima sujuvalt ja ilma palju segadust tekitamata. Arendajad püüavad oma parima mitte korrata ennast igal sammul, tegelikult on see DRY arengu taga. Aja jooksul võib OOCSS-tehnik kaasa tuua sadade CSS-klasside, millel on antud dokumendis kümneid kordi individuaalsed omadused.

Kuna OOCSS on ikka veel uus teema, siis on raske paistetada. Paljud CSS-failid paisuvad väikese struktuuriga, samas kui OOCSS pakub jäikat struktuuri ja (ideaalis) vähem paistetust. Suurim tulemuslikkuse probleem oleks HTML-is, kus mõned elemendid võivad koguneda paar erinevat klassi paigutuse struktuuri ja kujunduse jaoks.

Leiad huvitavaid arutelusid selle teema kohta sellistel saitidel nagu Stack Overflow ja CSS-Tricks.

Minu soovitus on prooviprojekti loomine ja näha, kuidas see toimub. Kui sa armastad OOCSS-i, võib see veebisaitide koodide muutmise radikaalselt muutuda. Teise võimalusena, kui sa vihkad seda, õpid endiselt uut tehnikat ja mõtled kriitiliselt selle toimimise kohta. See on win-win ükskõik mida.

Hangi hõivatud kirjutamine OOCSS

Parim viis veebiarenduses midagi õppida on harjutada. Kui sa juba mõistad CSS-i põhitõdesid, siis sa oled hästi oma tee!

Kuna OOCSS ei vaja eeltöötlemist, võite seda proovida online-IDE-ga, näiteks CodePeniga. Lihtsad projektid on kõige parem alustada ja parandada oma teadmisi sealt.

Heitke pilk nende ressurssidega, et täiustada oma uurimistööd OOCSSi arenevas valdkonnas.

• OOCSSi ametlik veebisait
• Objekt-orienteeritud CSS: mida, kuidas ja miks
• OOCSS + Sass = Parim viis CSS-ile
• Sissejuhatus objektorienteeritud CSS-i