Metodiky pro organizaci CSS kódu

V tomto článku se dozvíte o různých metodikách, které se používají při psaní CSS kódu. Bude tu jen jejich základní popis protože existují webové stránky, které CSS metodiky popisují mnohem lépe než bych je tu popsal já. U dvou ze tří metodik, které tu ukazuji přidávám odkaz na články z webových stránek vzhůru dolů. Tam tyto metodiky mají pěkně popsané. Vlastně mají také článek obecně o CSS metodikách, klidně se na něj podívejte namísto toho mého, je o dost lepší: metodiky pro organizování CSS kódu.

Proč při psaní CSS kódu používat metodiku?

CSS se snadno píše, ale je těžké se v něm vyznat a spravovat ho ve větších projektech. Proto vznikly různé metodiky, pomocí kterých můžeme naše projekty vyvíjet raději jako sadu menších celků, než jako jeden kus nedělitelného kódu. Metodiky nám dávají různé pokyny, jak máme při jejich používání psát kód a náš kód tedy může být více přehledný, rozšiřitelný a tak dalé. CSS metodik existuje mnoho a v tomto článku si ukážeme jen tři.

Objektově orientované CSS (OOCSS)

Tato metodika vznikla v roce 2009. Byla to první CSS metodika, která se stala široce používanou.

Jedním z cílů objektově orientovaného CSS je snížit duplikaci opakujících se vlastností v našich stylech. Pokud nějaké vlastnosti v našem kódu používáme opakovaně v různých selektorech ale vždy jen něco doladíme dalšími styly, tak si na tyto vlastnosti můžeme vytvořit samostatnou třídu (komponentu) a pomocí jiných tříd tuto třídu dostylovat. Následující ukázka objektově orientované CSS ukazuje, třída button je komponenta a třída .button-green je modifikátor komponenty.

.button {
    text-align: center;
    padding: .5rem 1rem;
}

.button-green {
    background-color: #248b23;
    color: #fff;
    border: 2px solid #3ae137;
    border-radius: 5px;
}

<!DOCTYPE html>
<html>
<head>
<title>OOCSS</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<button class="button button-green">tlačítko</button>
</body>
<html>

Pokud byste se chtěli o objektově orientovaném CSS dozvědět více, tak můžete v tomto článku na webu vzhůru dolů.

Block Element Modifier (BEM)

Block Element Modifier, běžně známý pod zkratkou BEM, je systém zápisu CSS tříd zajišťující lepší přehlednost našeho kódu. V BEM existují tři typy tříd: blok, element a modifikátor.

Blok

Blok je nezávislý prvek uživatelského rozhraní, který můžeme použít na různých místech našich webových stránek. Jako třídu jej zapíšeme slovem nebo slovy oddělenými spojovníkem.

.navigation { /* ... */ }

Element

Pro element, nacházející se uvnitř bloku vytvoříme třídu, která bude obsahovat jméno bloku, dvě podtržítka a název elementu. Tento element by měl jít použít jen uvnitř bloku. Pokud bychom jej chtěli použít i jinde, tak z něj musíme udělat blok. Bloky do sebe navzájem můžeme vnořovat.

.navigation__item { /* ... */ }

Modifikátor

Pokud chceme nějaký element nebo blok trochu poupravit, tak to můžeme udělat pomocí modifikátoru. Modifikátor vytvoříme tak, že za element nebo blok třídu přidáme dvě pomlčky a napíšeme název modifikace.

.navigation__item--active { /* ... */ }
.navigation--hidden { /* ... */ }

Psaní BEM tříd s preprocesory

Pokud používáme css preprocesor, tak můžeme psát BEM třídy snadněji a pravděpodobně i přehledněji než v klasickém CSS. Můžeme využít vnořování selektorů.

.navigation {
    /* ... */

    &__item {
        /* ... */

        &--active {
            /* ... */
        }
}

    &--hidden {
        /* ... */
    }
}

Pokud ještě nepoužíváte žádný CSS preprocesor a chtěli byste začít, tak můžete začít třeba s preprocesorem LESS o kterém mám webové stránky.

Tuto metodiku v době psaní tohoto článku používám já. Chtěl bych se ale zmínit o tom že jsem ji dlouhou dobu používal špatně, tak si z mých stránek neberte příklad. Při používání BEM nesmíme jako název třídy používat víc jak jeden element a přesně to jsem občas dělal. Není to block__element__element--modifier, ale block__element--modifier.

Pokud byste se o BEM chtěli dozvědět více, tak navštivte tyto stránky na webu vzhůru dolů.

SuitCSS

Tato metodika staví na BEM. Vlastně ji trochu poupravuje a přidává ještě další dva typy tříd pro stav komponenty a pro utility.

Komponenta

Narozdíl od BEM při tvorbě třídy pro komponenty používáme CamelCase namísto kebab-case.

.Button { /* ... */ }

Část komponenty

Pro části komponenty narozdíl od BEM nepoužíváme dvě podtržítka, ale jen jednu pomlčku.

.Button-icon { /* ... */ }

Modifikátor komponenty

Pro modifikátory stejně jako v BEM používáme dvě pomlčky.

.Button--big { /* ... */ }

Stav komponenty

Narozdíl od modifikátoru, které se starají o změnu vzhledu si můžeme vytvořit třídy pro stavy. Tyto třídy jsou většinou ovládané javascriptem nebo backendem.

.Button.is-disabled { /* ... */ }

Utility

Utility jsou třídy, které mají jeden účel. Hodí se například na nastavování marginů, zarovnávání textu a tak podobně. V SuitCSS je označíme připsáním "u-" na začátek jména třídy.

.u-marginBottomSmall { margin-bottom: 1rem; }

Pokud byste se o SuitCSS chtěli dozvědět více, můžete se podívat třeba do dokumentace.