Teorie BEM a OOCSS

OOCSS

---

Tuto metodologii vymyslela Nicole Sullivan a popisuje v ní vytváření abstraktních objektů, které by měly sloužit jako základ kódu. Žádný z nich tedy není stylován ihned, ale jsou na ně aplikovány vlastnosti dalšími třídami. Vytvoříme si tedy například obecný styl pro nadpisy a posléze teprve vytvoříme třídu, která přidává velikost písma podle použití. Ušetříme si tak čas při aplikování podobných stylů na další objekty. Má tedy 2 pravidla, kterými se musíme řídit, oddělení opakujícího se kódu od vizuálních prvků a nezávislost obsahu na určitý kontejner.

První pravidlo

Oddělení opakujícího se kódu od vizuálních prvků.

           
.column100{
    float: left;  
    padding: 10px;
    width: 100%;
}
.column50{
    float: left;  
    padding: 10px;
    width: 50%;
}

Zde vidíte normální zápis bez použití metodiky. Kód by měl určovat šířku sloupce stránky. Problém nastává, když chceme vytvořit novou třídu, která bude mít jinou šířku sloupce. Musíme znovu napsat ten stejný kód a zbytečně si přiděláváme práci a bobtná nám náš CSS soubor o zbytečné řádky.

  
.column{
    float: left;  
    padding: 10px;   
}
.100{
    width: 100%; 
}
.50{
    width: 50%; 
}

Metodika nám zde radí kód rozdělit. Přiděláme si sice další třídu, ale kód se takto dá rozšiřovat podle libosti. Většinou nemáme jenom 2 šířky sloupců na stránce a tento postup zaručuje, že nemusíme neustále opisovat část kódu kvůli změně jednoho řádku.

Druhé pravidlo

Nezávislost obsahu na určitý kontejner.

  
.galery .gallery-img{
            ...
        }

Zde se dostáváme do problému, kdy struktura našeho HMTL určuje použití CSS. Při jakékoliv změně struktury HTML bychom museli zasahovat i do našeho CSS a přidělávat si tak práci. Těchto vnoření se na stránce může objevit i více a ztrácí se pak přehlednost.

  
.galery{
    ...
}
.gallery-img{
    ...
}

Oddělili jsme nyní strukturu od našeho CSS a nemusíme si lámat hlavu s přepisováním. Výhodou je i přenesení kódu do jiné struktury HTML a zaručení stejného chování.

Knihovna

Je zde také doporučeno si vytvořit svojí vlastní knihovnu různých objektů a stylů, které se na stránce můžou opakovat. Budeme pak schopni vždy si některý vybrat a využít ho kde je potřeba. Příkladem udávám nadpisy. Budou se určitě vyskytovat v různé míře na každé stránce a tímto si zaručíme, že se nebudeme neustále opakovat.

  
.heading{
    line-height: 1.4;
    margin-top: 0;
    margin-bottom: 0.5rem;
    font-family: Helvetica, Roboto, Arial, sans-serif;
    font-style: normal;
    font-weight: normal;
}
.heading_1{
    font-size: 3rem;
}
.heading_2{
    font-size: 2.5rem;
}
.heading_3{
    font-size: 1.9375rem;
}

Zdroje

1. Vzhurudolu.cz

2. Keycdn.com

BEM

---

Blok, element a modifikátor vystupující pod zkratkou BEM vytvořený ruskou společností Yandex je přístup vývoje webových stránek závislích na těchto komponentech. Její hlavní využítí je ve vytváření uživatelských rozhraní a zrychluje, zpřehledňuje a podporuje znuvupoužitelnost kódu bez nutnosti kopírování. Je zde podporována i modularita, kde se projekt rozdělí na jednotlivé částí, aby byl lépe zpracovatelný. Stejně jako OOCSS vznikla hlavně aby zpřehlednila CSS kód. Využívá podobných pravidel a přidává i nějaká svoje další. Princip je v rozdělení CSS tříd na blok__element_modifikátor a každý blok by měl mít i svůj vlastní soubor. Pokud postupujete správně, zamezíte kaskádovití kódu a můžete ho pak různě využívat v dalších projektech. Navíc si vytvoříte smysluplnou strukturu, ve které se dá snadno vyznat.

Pojmenování

Primární pravidlo je způsob, jakým náš CSS kód pojmenujeme. Každá třída musí začínat názvem bloku. Může být libovolné, ale musí z něj být poznat, co obsahuje. Dále následují elementy nebo přímo hodnoty bloku. Například blok__element_modifikátor, blok__element a blok_modifikátor. Součásti bloku se oddělují buď pomlčky, nebo podtržítky. Je zde důležité si vybrat pouze jeden druh zápisu a držet se ho.

  
.header{
    display: table;
    width: 100%;
    padding: 0px 6px 2px 10px;
}

.header__topbar{
    max-width: 75rem;
    margin-right: table;
    margin-left: table;
}

.header_theme{
    background: black;;
}

Blok je zde třída .header, její součástí je element .header__topbar a ještě má modifikátor .header_theme. Pokud budeme dodržovat tento postup používáme vlastně OOCSS a BEM zároveň.

Blok

Musí to být entita, která má vlastní soubor CSS a je nezávislá na struktuře HTML. Můžete jednotlivé bloky libovolně vkládat mezi sebe.

  
.header{
    ...
}
.menu{
    ...
}
.grid{
    ...
}
        
<div class="menu">...</div>
        

Musí se vždy použít jako třída nikoliv Id nebo tag. Blokem se může stát jakýkoliv tag ve struktuře HTML, pokud třídy podporuje.

Element

Oddělují se od bloků použitím 2 pomlček nebo podtržítek a měly by mít smysl jenom ve využití s blokem.

  
.menu__item{
    
}
.menu__logo{
    
}    
<div class="menu">
    <div class="menu__logo">...</div>
    <a class="menu__item">...</a>
</div>       

Použitím správného názvosloví je vidět kam obě třídy patří. Budou součástí třídy blok a rozšiřují ji o element item a logo.

Modifikátor

Použití podmiňuje vazbu s blokem nebo elementem, nemůže se tedy vyskytovat samostatně.

  
.header_theme-dark{
background: black;
}

.button_send{
    background-color: #1779ba;
    color: fefefe;
    font-family: inherit;
    font-size: 0.9rem;
    line-height: 1;
    text-align: center;
}
   
<button class="button button_send">...</button>
    

Zde je vidět, že se dá použít pro změnu pozadí u záhlaví nebo stylovat text položky menu. Může mít i delší než jednoslovný název, ale každé slovo je odděleno podtržítkem.

Zdroje

1. Vzhurudolu.cz

2. Getbem.com

Specifičnost

---

Je to vlastně váha, kterou prohlížeče používají, aby rozlišily důležitost CSS kódu. Můžeme si to představit tak, že třeba definice tagu v CSS souboru má hodnotu 1. Použití id selektoru a znovu tagu nám vytvoří hodnotu 101. Id je tedy 100 a tag 1. v případě použití stylu přímo v HTML souboru v tagu je hodnota 1000. Prohlížeče tedy najdou nejvyšší hodnotu specifičnosti a aplikují pouze tu. Pokud bychom měli 2krát definovanou stejnou vlastnost, která mění pouze barvu písma prohlížeč vyberu tu, která se v CSS souboru nachází níže.

  
#green div{
    color: green;
}

.blue{
    color: blue;
}
   
<div id="green" class="blue" style="color: red">...</div>
    

Podle pravidel specifičnosti bude prohlížeč ignorovat id i třídu a aplikuje pouze barvu písma vyjádřenou stylem přímo v tagu. i zde pomáhá využívat aspoň jednu z metodik. Měli bychom se vyvarovat používat id a stylovat přímo v HTML. Selektor id by měl být využíván pouze jako kotva pro odkaz nebo při využití se skriptovacím jazykem.

Níže vidíte příklad, jak může vypadat CSS kód přímo v HTML. v tomto případě udržuje pozici záhlaví u stránky

   
    <header style="position: fixed; width: 100%; top: 0; z-index: 1; background:black ">...</header>
    

  
.header{
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 1;
}

.header_theme-dark{
    background: black;
}

<header class="header header_theme-dark">...</header>
    
            

Zde vidíte implementaci kódu, pokud se řídíme pravidly specifičnosti obou metodologií. Obě radí zapisování CSS pouze za pomocí tříd nevázaných na HTML strukturu. Nemělo by tedy docházet k nechtěnému překrývání stylů. Měli bychom se vyvarovat psát kód přímo do HTML a nepoužít ke stylování ani id.

i v případě, že se nám ani jedna z metodologií nelíbí, je důležité se uvědomovat pravidla specifičnosti. Setkáváme se s ní při psaní kteréhokoliv kódu a nelze jí tedy zcela ignorovat. Minimálně ušetříte práci všem, kteří budou přebírat Vaší práci.

Zdroje

1. W3schools.com

Použití

---

Nyní jsme si už něco řekli o tom, jak obě metodiky fungují a problémy specifičnosti a jsou na řadě příklady, jak a kde je využít.

   
/*OOCSS*/
.header{
    position: relative;
    width: 100%;
    top: 0;
    display: block;
    padding: 7px 10px 5px 10px;
    font-size: 2em;;
    text-align: center;;
    color: white;;
}
       
.dark-background{
    background: black;;     
}  

/*BEM*/
.header{
    position: relative;
    width: 100%;
    top: 0;
    display: block;
    padding: 7px 10px 5px 10px;
    font-size: 2em;;
    text-align: center;;
    color: white;;
}
        
.header_theme-dark{
    background: black;;     
}    

Vidíme v podstatě stejný kód. Rozdíl najdeme pouze v rozdílu pojmenování, kde BEM přidává jména jednotlivých bloků a jejich elementy či modifikátory a jde pak i přímo v html poznat vztah. Obě metodiky by měly psát vzájemně propojené třídy do svých vlastních souborů. Tzn. v tomto případě by byl CSS soubor header.css nebo rovnou složka obsahující tento soubor. BEM zde dává spoustu možností jakou souborovou strukturu si vyberete.

Souborová struktura

Jsou také důležité, aby si projekt udržel přehlednost a mohl být měněn podle aktuálních požadavků.

          
projekt                                             složka projektu
    bloky                                           složka všech bloků
        header                                      složka bloku header
            __elementy                              složka elementů bloku header
                _modifikatory                       složka modifikatorů elementu v bloku header
                    header__elementy_modifikator    css implementace modifikátoru elementu v bloku header
                header__element.css                 css implementace elementů bloku header
            _modifikatory                           složka modifikátorů bloku header
                header_modifikator.css              css implementace modifikátorů bloku header
            header.css                              css implementace bloku header

Zde vidíte strukturu, kterou radí dokumentace BEM, ale můžete se dostávat do problému s její složitostí a počtem složek a podsložek. Výhodou může být odebírání jednotlivých částí podle potřeby a používání v jiných projektech.

Preprocesory

Měly by CSS programátorům usnadňovat práci ve stavbě stránek za pomocí funkcí, které CSS standartně (zatím) nepodporuje. Rovnou dvě funkce se pro metodologie hodí.

  
.header{
    position: relative;
    width: 100%;
    top: 0;
    display: block;
    padding: 7px 10px 5px 10px;
    font-size: 2em;;
    text-align: center;;
    color: white;;
    
    &_theme-dark{
        background: black;;
    } 
}    

Mají možnost vázat na sebe jména za pomocí & můžete takto jednoduše vytvářet blokům modifikátory a elementy.

     
.header{
    position: relative;
    width: 100%;
    top: 0;
    display: block;
    padding: 7px 10px 5px 10px;
    font-size: 2em;;
    text-align: center;;
    color: white;;
}       
        
.header_theme-dark{
    background: black;;     
}  

Výsledný CSS pak vypadá takto. Může zde být znovu nebezpečí ztráty přehlednosti, když použijeme až moc vázaní. Stane se z našeho kódu pouze chaos závorek. Druhá strana mince je urychlení práce při rozšiřování kódu. Všechny postupy mají nějaká úskalí, ale je na Vás, které si vyberete.

     
    @import"dropdown.scss"
    @import"button.scss"
    @import"footer.scss"
    @import"form.scss"
    @import"gallery.scss"

U preperocesorů musím zmínit ještě jednu věc. Pokud vážete až příliš velké množstvím CSS souborů k projektu, může docházet ke zhoršení optimalizace. Preprocesory mají pro tento problém řešení, pokud použijeme příkaz @import. Můžete pak připojit jednotlivé souboru do jednoho a nezhoršovat tak výkon stránky. s tímto postupem pak budete při každé změně v jednotlivých souborech znovu kompilovat i ten, co je všechny obsahuje. Výsledkem bude miniaturizovaný soubor obsahující všechny dílčí části.

Zhodnocení

---

Pokud bychom chtěli vytvářet web za pomoci obou metodologií, musíme se seznámit s jejich dobrými a špatnými stránkami. Výhodou může být, že po jejich naučení se velice těžko zapomíná, jak fungují a mění náš přístup k psaní CSS. Dále pak můžeme bez velkých obav projekt předat i někomu dalšímu, který se samozřejmě bude muset naučit v  jaké struktuře jsme metodiky používali, ale bude to určitě jednoduší než normální postup, kdy kód nebo třídy nemusí mít žádný společný základ. Hlavně si vytváříme jednotlivé bloky kódu, které se dají používat všude jako komponenty pro vytváření dalších objektů. Nevýhodou je samozřejmě čas, který musíme vynaložit na pochopení obou metodologií. Na první pohled se zdá jednoduché je pochopit, ale problém může být rozvrhnout si správně jména jednotlivých bloků a jak do sebe budou zapadat. Může tedy nastat situace, že budete pouze přemýšlet, jak všechno srozumitelně pojmenovat. Dále se dostáváme do situace, kde pro každou maličkost musíme vytvořit třídu, nesmí se stávat, že stylujeme pomocí id nebo přímo tag. Zakázané je i kaskádování, kde stylujeme podle struktury našeho HTML, když je to potřebné. Zároveň pokud používáme souborovou strukturu podle dokumentace, dostaneme výsledně obrovské množství souborů obsahující jednu až dvě řádky ,a tím také spoustu složek.

---

---

Poslední může být porovnání velikostí souborů s frameworkem. Foudantion používám skrz webový repositář. Poslední položka tedy není zcela objektivní, protože můj soubor neobsahuje ani zlomek nastavení a tříd jako celý Foudantion.