Pochopenie metodík písania CSS

V tomto príspevku budeme vidieť čo sú metodiky písania CSS, niektoré známe metodológie a ako môžu byť užitočné pre optimalizáciu nášho CSS kódu. Začnime najjednoduchšou otázkou, aby sme získali loptu. Čo je metodika?

Metodika je systém metód. Premýšľajte o metóde ako o jednoduchom spôsobe, ako robiť niečo systematicky, v určitom prednastavenom spôsobe, ako robiť veci na dosiahnutie výsledku, ktorý chceme.

Ak chcete dosiahnuť lepšie výsledky, zlepšujeme naše metódy lepším plánovaním, zmena poradia, zjednodušenie krokov - bez ohľadu na to, čo funguje rýchlejšie a je viac účinný.

Metodológia CSS

Teraz poďme hovoriť o metodológii CSS. Rovnako ako so všetkým v živote, máme aj spôsob písania CSS: niektoré písať reset CSS najskôr, nejaké štýly rozloženia miest naposledy, niektoré začínajú s dvoma až tromi triedami pre styling elementu, niektoré zapisujú všetky kódy CSS jediný súbor.

Naše uprednostňované metódy boli buď zavedené sami v priebehu času, alebo boli ovplyvnené inými, alebo požadované na našom pracovisku alebo kvôli všetkým vyššie uvedeným. Ale v priebehu času formulovali veteráni CSS metodiky na písanie CSS to sú viac flexibilné, definované, opätovne použiteľné, zrozumiteľné a ovládateľný.

Budeme sa pozrieť na tieto formulované metodiky, ktoré budú zahŕňať:

OOCSS (Object Oriented CSS)
BEM (blok, prvok, modifikátor)
ACSS (Atomic CSS)
SMACSS (škálovateľná a modulárna architektúra pre CSS)

Poznámka: Žiadne z nižšie uvedených konceptov by sa nemalo zamieňať s akýmkoľvek rámcom, knižnicou alebo nástrojom, ktoré môžu mať rovnaký názov a koncept ako tieto metodiky. Tento príspevok sa týka len metodík na písanie CSS.

1. OOCSS

Vyvinutý Nicole Sullivan v roku 2008, kľúčové pojmy OOCSS (Object Oriented CSS) zahŕňajú CSS objekt identifikácia, oddelenie štruktúry a vizuálnych štýlov a vyhýbanie sa štýlu založenému na umiestnení.

V OOCSS je prvý krok, ktorý navrhuje Nicole, aby sme urobili identifikovať objekty v CSS.

“V podstate je objekt "CSS" opakujúcim sa vizuálnym vzorom, ktorý je možné získať v samostatnom úryvku kódu HTML, CSS a pravdepodobne JavaScript. Tento objekt sa potom môže opätovne použiť po celom webe. - Nicole Sullivanová, Github (OOCSS)“

Vezmite si napríklad túto štruktúru z tejto stránky. Tu je niečo, čo je opakujúci sa vizuálny vzor a má vlastné nezávislé HTML a / alebo CSS:

Máme tu dva typy objektov, väčší náhľad titulov, ktoré budeme nazývať post-náhľad primárnych a bočný panel s názvami, ktoré budeme nazývať post-náhľad-sekundárne.

Musíme oddelenú štruktúru a pleť (tj štýly, ktoré vytvárajú vzhľad objektov). Tieto dva typy objektov majú rôzne štruktúry, jeden je vo väčšej škatuli, aj keď vyzerá podobne, s obrázkami vľavo a titulmi vpravo.

Dajte obrázky oboch predmetov triedy post-náhľad-image a pridajte kód, ktorý umiestni obrázok doľava. To nám zabraňuje opakovaniu kódu umiestnenia obrazu do objektov v CSS. Ak existujú iné podobné objekty, opakovane používame post-náhľad-image pre nich.

Oddelenie kože môže byť tiež vykonané pre jednoduchšie štýly, ako je hraníc alebo pozadia. Ak máte viac objektov s rovnakým modrým okrajom, vytvorenie samostatnej triedy pre modrý okraj a pridanie do objektov znížiť počet kópií modrých okrajov v CSS.

Nicole tiež navrhuje nie pridať štýly na základe polohy, napríklad namiesto zacielenia na všetky odkazy vo vnútri konkrétnej div zvýrazniť, dať tieto odkazy a zvýrazňovacie triedy s príslušnými štýlmi CSS. Týmto spôsobom, keď potrebujete zvýrazniť odkaz v nejakej inej časti stránky, môžete znova použiť triedu zvýrazňovača.

Profesionáli OOCSS: Opakovateľné kópie vizuálneho štýlu, flexibilné kódy umiestnenia, redukcia hlboko vnorených selektorov.

Zápory OOCSS: Bez primeraného množstva opakujúcich sa vizuálnych vzorov sa oddeľujúca štruktúra a kódy vizuálneho štýlu zdajú zbytočné.

2. BEM

Vyvinuté vývojármi spoločnosti Yandex v roku 2009, kľúčové koncepty pre BEM (Block, Element, Modifier) zahŕňajú identifikáciu blok, element & modifikátor a zodpovedajúcim spôsobom ich menovať.

“blok” je v podstate rovnaký ako “objekt”(z predchádzajúceho príkladu), an “element” odkazuje na komponenty bloku (obrázok, názov, náhľadový text vo vyššie uvedenom náhľad-post- objekty). “modifikátor” sa môže použiť, ak sa zmení stav bloku alebo prvku, napríklad keď do položky ponuky pridáte aktívnu triedu, aby ste ju zvýraznili, aktívna trieda pôsobí ako váš modifikátor.

Akonáhle identifikujete súčasti, označte ich podľa toho. Napríklad:

blok ponuky bude mať triedy Ponuka
jeho položky budú mať triedy menu__item (blok a prvok sú oddelené dvojitým podčiarkom)
modifikátor pre vypnutý stav menu môže mať triedy menu_disabled (modifikátor vymedzený jedným podčiarkom)
môže byť modifikátor pre vypnutý stav položky ponuky menu__item_disabled.

Pre modifikátory môžeme tiež použiť key_value formát pre pomenovanie. Ak napríklad rozlišujeme všetky položky ponuky, ktoré odkazujú na zastarané články, môžeme im dať triedy menu__item_status_obsolete, a na štýl akýchkoľvek položiek ponuky, ktoré odkazujú na dokumenty, ktoré sú v procese čakania, môže byť názov triedy menu__item_status_pending.

Názvy môžu byť upravené na to, čo vám vyhovuje. Myšlienkou je byť schopný identifikovať, bloky, prvky a modifikátory z názvov triedy. Pozrite sa na niektoré z názvových systémov uvedených na stránke BEM.

Stránka BEM sa tiež uvádza ako môže byť segmentácia blokov, prvkov a modifikátorov zavedená aj do súborového systému CSS. Bloky ako “tlačidla” a “vstupy” môžu mať vlastné priečinky obsahujúce súbory (.css, .js), ktoré sú spojené s týmito blokmi, čo uľahčuje, keď chceme importovať tieto bloky do iných projektov.

Výhody BEM:Jednoduché používanie názvov tried a zníženie hĺbkových voličov CSS.

Nevýhody BEM:Aby sme zachovali názvy zdravé, spoločnosť BEM odporúča, aby sme zabránili plynulému hniezdeniu prvkov.

3. ACSS

Slávny Yahoo, niekde blízko konca prvého dekáda 21. storočia^st storočia, kľúčové pojmy ACSS pozostávajú z vytvárania tried pre najviac atómovú úroveň štýlu, t.j. páru vlastností a hodnôt, a potom ich použite v HTML podľa potreby.

Je ťažké určiť, kedy bol prvýkrát vyvinutý ACSS (Atomic CSS) od chvíle, keď sa koncept už dlho používa. Vývojári používajú triedy ako napr .clearfix pretečenie: skryté na dlhú dobu. Myšlienkou v ACSS je mať triedu pre takmer každý opakovane použiteľný dvojicu vlastností a hodnôt bez obsahu budeme potrebovať na našich stránkach a pridať tieto triedy v prípade potreby na prvky HTML.

Nižšie je uvedený príklad tried založených na ACSS a ich používaní v jazyku HTML.

 .mr-8 okraj-doprava: 8px; .fl-r float: right;

Ako vidíte, počet tried sa zvýši pomocou tejto metódy a HTML bude preplnené všetkými týmito triedami. Táto metóda nie je 100% efektívna, ale môže byť užitočná v prípade potreby. Yahoo to používa.

Výhody ACSS:Styling HTML bez ponechania HTML.

Nevýhody ACSS:Príliš veľa tried, nie príliš elegantné a možno by ste to mohli nenávidieť.

4. SMACSS

Vyvinutý v roku 2011 Jonathan Snook SMACSS (škálovateľná a modulárna architektúra pre CSS) funguje identifikáciou 5 rôznych typov pravidiel štýlu. Na základe týchto názvov sú vytvorené názvy triedy a systém archivovania.

“SMACSS je spôsob, ako preskúmať svoj proces návrhu a ako spôsob, ako tieto rigidné rámce zapadnúť do flexibilného procesu myslenia. - Jonathan Snook”

SMACSS identifikuje 5 typov pravidiel štýlu základňa, rozloženie, modul, stav, a téma.

Základné štýly sú predvolené štýly namierené na základné značky HTML, napríklad
, .
Štýly rozloženia sú štýly, ktoré sa používajú na definovanie rozloženia stránky, ako je kódovanie, na ktorom sa nachádzajú záhlavia, päta a bočné ponuky.
Štýly modulov sú špecifické pre modul ako galéria alebo prezentácia.
Štátne štýly slúžia na zvýraznenie prvkov s premenlivými stavmi, ako sú skryté alebo zakázané.
Téma sa používa na zmenu vizuálnej schémy stránky.

Rôzne pravidlá štýlu je možné identifikovať pomocou predpony v názve triedy, napríklad l-header (pre rozvrhnutie) alebo t-header (pre tému). Tieto rôzne typy pravidiel môžeme usporiadať tak, že ich umiestnime do samostatných súborov a priečinkov.

Náskok SMACSS:Lepšie organizovaný kód.

Nevýhody SMACSS: Nemôžem myslieť.

Existuje bezplatná kniha online, ktorú si môžete prečítať o SMACSS, alebo si môžete kúpiť verziu ebook, aby ste ju mohli študovať viac.

záver

Vyššie uvedené metodiky CSS vám poskytnú systém spravujte a optimalizujte svoje kódy CSS. Môžu byť kombinované, ako OOCSS-SMACSS, alebo OOCSS-BEM, alebo BEM-SAMCSS, aby vyhovovali vašim potrebám.

Existujú aj rámce a knižnice, ak potrebujete automatizovaný systém na vykonávanie metodológií CSS, ako napríklad:

Rámec OOCSS
Nástroje BEM
Organický rámec CSS (nasleduje atómová koncepcia).