Pochopení metodiky psaní CSS

V tomto příspěvku uvidíme co jsou metodiky psaní CSS, některé dobře známé metodiky a jak mohou být pro nás užitečné při optimalizaci našeho CSS kódu. Začněme s nejjednodušší otázkou, jak dostat míč. Co je to metodika?

Metodika je systém metod. Přemýšlejte o metodě, která je prostým způsobem, jak něco systematicky dělat, v určitém přednastaveném způsobu, jak dělat věci, které chceme dosáhnout..

Pro dosažení lepších výsledků, zlepšujeme naše metody tím, že je lépe plánujeme, změna pořadí, zjednodušení kroků - bez ohledu na to, co funguje rychleji a je víc účinný.

Metodika CSS

Promluvme si o metodice CSS. Stejně jako u všeho v životě máme také metodu psaní CSS: někteří nejprve zapisují reset CSS, některé styly rozvržení místa, některé začínají dvěma až třemi třídami pro styling elementu, někteří zapisují všechny CSS kódy do jeden soubor.

Naše upřednostňované metody byly buď zavedeny v naší vlastní době, nebo byly ovlivněny jinými nebo vyžadovány na našem pracovišti nebo v důsledku výše uvedených skutečností. Postupem času však veteráni CSS formulovali metodiky pro psaní CSS to je více flexibilní, definovatelný, opakovaně použitelný, srozumitelný a zvládnutelné.

Podíváme se na ty formulované metodiky, které budou zahrnovat:

1. OOCSS (objektově orientovaná CSS)
2. BEM (Blok, Prvek, Modifikátor)
3. ACSS (Atomic CSS)
4. SMACSS (škálovatelná a modulární architektura pro CSS)

Poznámka: Žádný z níže uvedených pojmů by neměl být zaměňován s jakýmkoliv rámcem, knihovnou nebo nástrojem, který by mohl mít stejný název a koncept jako tyto metodiky. Tento příspěvek je jen o metodologii psát CSS.

1. OOCSS

Klíčové koncepty OOCSS (Object Oriented CSS), vyvinuté společností Nicole Sullivan v roce 2008, zahrnují CSS objekt identifikace, oddělení struktury a vizuálních stylů a vyhnutí se stylům.

V OOCSS je prvním krokem, který Nicole navrhuje, udělat identifikovat objekty v CSS.

“CSS "objekt" je v podstatě opakující se vizuální vzor, ​​který lze abstrahovat do samostatného fragmentu HTML, CSS a případně JavaScriptu. Tento objekt pak může být znovu použit v rámci celého webu. - Nicole Sullivan, Github (OOCSS)“

Vezměte si například tuto strukturu z tohoto webu. Zde je něco, co je opakující se vizuální vzor a má své vlastní nezávislé HTML a / nebo CSS:

Máme zde dva typy objektů, větší náhled titulů, které pojmenujeme post-preview-primární a postranní panel s názvy, které pojmenujeme post-náhled-sekundární.

Potřebujeme oddělené struktury a kůže (tj. styly, které vytvářejí vzhled objektů). Dva typy objektů mají různé struktury, jeden je ve větším poli, i když vypadají podobně, s obrázky vlevo a názvy vpravo..

Pojďme dát obrázky obou objektů třídy post-preview-image a přidejte kód, který umístí obrázek vlevo. To nám brání opakovat kód, kam umístit obrázek do objektů v CSS. Pokud existují jiné podobné objekty, znovu použijeme post-preview-image pro ně.

Oddělení kůže lze také provést pro jednodušší styly jako nebo pozadí. Pokud máte více objektů se stejným modrým okrajem, vytvoření samostatné třídy pro modrý okraj a přidání do objektů bude snížit počet kódování modrých okrajů v CSS.

Nicole také navrhuje ne přidat styly na základě umístění, například namísto cílení všech odkazů uvnitř konkrétního div, aby se zvýraznily, přidejte tyto odkazy a třída zvýrazňovačů s příslušnými styly CSS. Tímto způsobem, když potřebujete zvýraznit odkaz v jiné části stránky, můžete znovu použít třídu zvýrazňovačů.

Výhody OOCSS: Znovu použitelné vizuální stylingové kódy, lokalizační flexibilní kódy, redukce v hlubokých vnořených selektorech.

Nevýhody OOCSS: Bez spravedlivého množství opakujících se vizuálních vzorů se oddělování struktury a kódů vizuálního stylu jeví jako zbytečné.

2. BEM

Klíčové koncepty BEM (Block, Element, Modifier), vyvinuté vývojáři v Yandexu v roce 2009, zahrnují identifikaci blok, živel & modifikátor a odpovídajícím pojmenováním.

A “blok” je v podstatě stejný jako “objekt”(z předchozího příkladu), a “živel” odkazuje na komponenty bloku (obrázek, název, náhled textu výše předchozí příspěvek- objektů). A “modifikátor” lze použít, když se stav bloku nebo prvku změní, například když přidáte aktivní třídu do položky nabídky, kterou chcete zvýraznit, aktivní třída se chová jako váš modifikátor.

Jakmile identifikujete komponenty, pojmenujte je odpovídajícím způsobem. Například:

• blok nabídky bude mít třídu Jídelní lístek
• jeho položky budou mít třídu menu__item (blok a prvek jsou odděleny dvojitým podtržítkem)
• modifikátor pro zakázaný stav menu může mít třídu menu_disabled (modifikátor oddělený jedním podtržítkem)
• modifikátorem pro zakázaný stav položky menu může být menu__item_disabled.

Pro modifikátory můžeme také použít key_value formát pro pojmenování. Chcete-li například rozlišit všechny položky nabídky, které odkazují na zastaralé články, můžeme jim tuto třídu poskytnout menu__item_status_obsolete, a pro úpravu všech položek nabídky, které odkazují na nevyřízené dokumenty, může být název třídy menu__item_status_pending.

Pojmenování lze upravit podle toho, co pro vás funguje. Myšlenka má být schopna identifikátory, bloky, prvky a modifikátory z názvů tříd. Podívejte se na některý ze jmenných systémů uvedených na stránkách BEM.

BEM stránky také seznamy jak může být segregace bloku, elementu a modifikátoru uvedena do souborového systému CSS. Bloky jako “tlačítka” a “vstupy” mohou mít své vlastní složky složené ze souborů (.css, .js), které jsou spojeny s těmito bloky, což usnadňuje práci, když chceme tyto bloky importovat do jiných projektů.

Výhody BEM:Snadno použitelné názvy tříd a redukce hlubokých CSS selektorů.

Nevýhody BEM:Chcete-li udržet jména sane-vypadající, BEM doporučuje, abychom udrželi blok na prvek vnoření mělké.

3. ACSS

Vyrobený slavný Yahoo, někde blízko konce první desetiletí 21. století^Svatý Klíčové koncepty ACSS spočívají ve vytváření tříd pro nej atomovou úroveň stylingu, tj. pár vlastností a hodnoty, a jejich použití v HTML podle potřeby..

Je těžké určit, kdy byl systém ACSS (Atomic CSS) poprvé vyvinut, protože tento koncept byl již nějakou dobu používán. Vývojáři používají třídy jako .clearfix overflow: hidden na dlouhou dobu. Myšlenka v ACSS je mít třídu pro téměř každý opakovaně použitelný pár hodnot vlastností a vlastností budeme potřebovat na našich stránkách a přidávat tyto třídy v případě potřeby do prvků HTML.

Níže je uveden příklad tříd založených na ACSS a způsobu jejich použití v HTML.

 .mr-8 margin-right: 8px; .fl-r float: right; 
 

Jak vidíte, počet tříd bude s touto metodou vysoký a HTML bude přeplněno všemi těmito třídami. Tato metoda není 100% efektivní, ale může být užitečná, pokud chce. Yahoo to nakonec používá.

Výhody ACSS:Styling HTML bez zanechání HTML.

Nevýhody ACSS:Příliš mnoho tříd, není příliš elegantní a můžete ho nenávidět.

4. SMACSS

Vyvinut v roce 2011 Jonathan Snook SMACSS (škálovatelná a modulární architektura pro CSS) funguje tím, že identifikuje 5 různých typů pravidel stylu. Na jejich základě jsou vytvořeny názvy tříd a archivační systém.

“SMACSS je způsob, jak prozkoumat váš návrhový proces a jako způsob, jak přizpůsobit tyto tuhé rámce flexibilnímu procesu myšlení. - Jonathan Snook”

SMACSS identifikuje 5 typů pravidel stylu základ, rozvržení, modul, stav, a téma.

• Základní styly jsou výchozí styly směrované na základní HTML tagy jako

  , .

• Styly rozvržení jsou styly používané k definování rozvržení stránky, jako je kódování, kde záhlaví, zápatí a postranní nabídky půjdou.
• Styly modulů jsou specifické pro modul, jako je galerie nebo prezentace.
• Styly stavu jsou pro zvýraznění prvků s proměnlivými stavy, jako je skrytý nebo zakázaný.
• Téma se používá pro změnu vizuálního schématu stránky.

Různá pravidla stylu lze identifikovat pomocí předpony ve jménu třídy, například l-header (pro rozvržení) nebo t-header (pro téma). Můžeme také organizovat tyto různé typy pravidel jejich umístěním do samostatných souborů a složek.

Výhody systému SMACSS:Lepší organizovaný kód.

Nevýhody SMACSSŽádný, na co si nemyslím.

K dispozici je bezplatná online kniha, kterou si můžete přečíst o SMACSS, nebo si můžete koupit její ebook verzi, abyste ji mohli studovat více.

Závěr

Výše uvedené metodiky CSS vám systém spravovat a optimalizovat kódy CSS. Mohou být kombinovány dohromady, jako OOCSS-SMACSS, nebo OOCSS-BEM, nebo BEM-SAMCSS, aby vyhovovaly vašim potřebám.

Existují také rámce a knihovny, pokud chcete automatizovaný systém pro provádění metod CSS, jako jsou:

• OOCSS framework
• BEM nástroje
• Organic CSS framework (následuje atomový koncept).