Systémů, jakými psát a organizovat CSS pravidla, je celá řada a dá se říct, že každá „trochu větší“ společnost (Twitter, Yandex, atd.) vydala nějaký framework, metodiku nebo návod, jak oni organizují svá CSS, protože ten jejich systém je „ten nejlepší“.

Je v tom ale skutečně taký rozdíl? A drží se tyto systémy obecných pravidel pro CSS? Pojďme se na to podívat. Poznámka: Do tohoto článku budu postupně doplňovat další systémy a poznatky, takže nemusí být momentálně úplný a může se hodně měnit.

Objektové CSS

OOCSS (Objektově Orientované CSS) je systém, který funguje podobně jako OOP – konkrétně část o Interfacech, Traitech nebo vícenásobné dědičnosti (což nutno přiznat je ta nejméně pochopitelná a nejvíce zavrhovaná vlastnost OOP).

OOCSS spočívá v tom, že nedefinujete styly pro konkrétní prvky nebo kontejnery, ale definujete tzv. skiny (což jsou vlastně OOP třídy, resp. interfacy nebo traity, ale protože by se to pletlo s CSS třídami, tak se to jmenuje takhle).

Ve výsledku tedy pokud máte ve formuláři zelený input, zelené tlačítko a červené tlačítko, nadefinujete si skiny pro input, button, green a red, kde input a button definuje strukturu (rozměry, typ písma, okraje, atd.) zatímco green a red definují vzhled (barvu písma, okrajů, pozadí, atd.). Následně pak v HTML nebo JS přiřadíte příslušné skiny daným prvkům.

.input { width: 10em;}
.button { width: 10em; padding: 0.5em }
.green { color: green; }
.red { color: red; border: 1px solid #800; }

<form>
    <input class="input green" ...>
    <button class="button green" ...>
    <button class="button red" ...>
</form>

Názor

Opravdu vám přijde vhodné nastavovat inputu třídu .input a tlačítku třídu .button? Nemělo by se spíš CSS zakládat na existujících HTML definicích, než do něj vnášet nové a duplicitní? A co když budu chtít v budoucnu změnit zelenou barvu na modrou, protože budu potřebovat přebrandovat web? Budu to pak vypadat jako „Zelená Tesco taška“, která je ve skutečnosti modrá?

Výhody

• Jednoduché a jednoznačné názvy tříd urychlují vykreslování.
• Rozčlenění stylů bez opakování minimalizuje velikost CSS a urychluje načítání stránky.

Nevýhody

• Spoléhá se čistě na třídy, což znamená, že se v duplikuje informace již obsažená v tagu nebo ARIA roli (příp. #id).
• Změna vzhledu (theme, rebrand) znamená změnu HTML a JS místo jednodušší změny CSS.
• Z CSS souboru nepoznáte, jak budou vypadat výsledné prvky, protože mohou kombinovat celou řadu struktur a skinů.

ITCSS

Metoda Inverted Triangle Cascading Style Sheets (neboli metoda stylování podle převráceného trojúhelníku) má jednoduchou myšlenku, která se zakládá právě na to, jak vypadá rovnostranný trojúhelník, když ho postavíte na špičku: ▼.

Podle této metodiky byste na začátku CSS (tedy na horní, široké straně trojúhelníku) měli specifikovat co nejobecnější pravidla (proměnné pro definici písma a barev, mixiny pro preprocessor a pomocné styly), následovat by měli obecná pravidla (reset, normalizace, základní vzhled HTML prvků, atd.) a čím více se budete blížit ke konci CSS (tedy do špičky pomyslného trojúhelníku), tím specifičtější definice byste měli psát (objekt, komponenty, prvky, apod.). Na úplném konci by pak, podle metodiky, měli být pomocné třídy (utility).

Názor

Je to pěkně a jednoduše popsaná metodika, ale přijde mi, že je to jen přilepení jného jména pro postup, který najdete v každém CSS manuálu. Skrytou pointou metodiky je to, že je určena pro obrovské korpopace („trusted by Adobe, Google, Booking.com, …„), které si musí jejího autora najmout za těžké peníze, aby jim popsal to, co se dá shrnout do pár bodů na blogu.

Když se podíváte na nějaký popis, najdete v něm zajímavé nesrovnalosti: první dva kroky jsou proměnné a mixiny, ale pokud nepoužíváte preprocesor, nemá tam co dát (ale OK, velké korporace většinou preprocesor používají). Třetí krok je reset a normalizace (pochopitelné) a 4. je stylování HTML prvků, což podle popisu zahrnuje přepis stylů definovaných prohlížeči (… ale počkat, co je pak ve 3. kroku reset a normalizace? – to má přeci být sjednocení stylů prohlížečů!).

Osobně mi přijde logičtější seskupovat pravidla k sobě podle toho, co mění a jak spolu interagují (např. definice obecné barvy tlačítek a hned za tím barvy pro specifická tlačítka, abych měl přehled, jaké barvy se použijí za jakých podmínek) než organizovat CSS metodou „tahle definice má 3 třídy takže ji musíš posunout až za pravidla s 1 a 2 třídami.

Výhody

• jednoznačně definované pořadí definic – vhodné, pokud se ve velké korporaci nemůžete dohadovat o tom, co kam patří.

Nevýhody

• Odstraňuje z CSS základní principy „priorita podle pořadí“ a „priorita podle specificity“, které, pokud je použijete správně, mohou výrazně zjednodušit zápis CSS
• Organizace a prioritizace definic zhoršuje přehled o tom, která pravidla k sobě patří (komponenta a její prvky) a která se budou přepisovat a ovlivňovat.

BEM

BEM je systém navržený ruským vyhledávačem Yandex a je to zkratka slov Block, Element a Modifier (resp. rusky Блок, Элемент a Модификатор, tedy БЭМ).

Základním prvkem BEMu jsou bloky, tedy kontejnery s konkrétní funkcí a stylem. Ty jsou označeny základní třídou podle své funkce (např. .form, .menu, atd.). Vnořené prvky, tedy elementy jsou pak pojmenovány tak, že vezmete jméno bloku a přes dvojité podtržítko k němu připojíte jméno konkrétního prvku (např. .form__button-submit, .menu__subMenu, atd.). Pokud na nějakému prvku potřebujete nadefinovat styl pro určitý stav, použijete modifikátor, který ke jménu připojíte přes jedno podtržítko nebo dvojitou pomlčku (např. .form_state-invalid, .menu__subMenu--isOpened, atd.).

A to je vlastně všechno. Víc toho soudruzi nevymysleli, takže je to vlastně jen další otazník za odvěkou otázkou, zda použít velBloud nebo po-mlčky ve víceslovných názvech. Specifikace se sice zabývá jmennou konvencí, ale stylem „buď to a nebo to druhé“.

Názor

Zapomeňme na to, že „C“ v názvu „CSS“ znamená Kaskádový („cascading“) což v praxi znamená, že se styly „kaskádově“ dědí od rodičů, „kaskádově“ se přepisují a že je možno konkrétní styl založit na „kaskádovém“ umístění prvku (aka XPATH, cesta k prvku). Je pravda, že z hlediska rychlosti zpracování CSS je BEM optimalizovaný v maximální možné míře, ale když se to s něčím přehání, tak to pak dopadne přesně tak, jak dopadá v Rusku všechno. Ve výsledku musíte pak styl pro stisknuté tlačítko nadefinovat tolikrát, kolik máte kontejnerů s tlačítkem.

Výhody

• Maximální rychlost při vykreslování, protože prohlížeč jednoznačně ví, které styly použít a nemusí je hledat a vypočítávat.
• Při čtení CSS snadno poznáte, které pravidlo k čemu patří a co bude dělat.

Nevýhody

• Používá výhradně třídy, čímž duplikuje informace z tagu nebo ARIA rolí (příp. #id).
• Duplikuje styly (nebo alespoň selektory) tím, že ignoruje možnost definovat cestu k prkvu (XPATH, kaskáda).
• Duplikuje styly (nebo alespoň selektory) tím, že ignoruje možnost sdílet jednu třídu s více prvky v různých situacích (např. ikona v menu a ikona v tlačítku).

SuitCSS

SuitCSS je (řekl bych) americká úprava BEM vyvinutá a používaní Twitterem a dalšími společnostmi. Zároveň také na GitHubu definuje celou řadu malých CSS, které můžete použít ve svém projektu (což moc nechápu, když Twitter také vytvořil framework Bootstrap, proč najednou vytváří něco alternativního?).

Základní princip je rozdělení CSS na Komponenty a Utililty, kde komponenty jsou styly definované podle BEM, zatímco utility jsou pomocí CSS třídy (resp. obecně styly), které upravují obecné nebo specifické chování. Použití utilit tak víceméně legalizuje často zavrhované třídy jako .center nebo .red. Abyste utilitní třídu poznali, musí (podle specifikace) začínat písmenem U (např. .u-floatLeft). Utilitní třídy, které specifikují responsivitu, pak začínají (podobně jako Bootstrap) prefixy .u-sm-, .u-md- a .u-lg-.

SuitCSS také ale dále rozvíjí pojmenování komponent nad rámec výše zavrhnutého Blok – Element – Modifikátor. Komponenta, kromě svého blokového jména může obsahovat i prefix (zvaný namespace), který označuje výrobce, balík, nebo knihovnu, ze kterého pochází (a může mít i více namespace ve stylu PHP nebo Java, např. .com-twitter-library-Form nebo zkráceně .twt-Form). Klidně tak můžete použít na stejné stránce Twitter Button a Facebook Button bez toho, aby se jejich styly navzájem překryly.

Specifikace pak také kromě modifikátoru (např. Form-button--default), který určuje výchozí vzhled komponenty, přidává stav (state), který může vzhled komponenty změnit podle situace (např. .Form-button--default.is-pressed). Stavové třídy se pak definují tak, že v HTML zkombinujete třídu komponenty a jejího stavu (např. <button class="Form-button--default is-pressed"...>). Jméno stavu by mělo začínat prefixem .is-.

Na rozdíl od BEM tato specifikace jednoznačně určuje, jak mají vypadat jednotlivá jména a jak se oddělují. Jméno komponenty se tak drží pojmenování třídy z OOP a používá VelBloud, zatímco ostatní jména používají velBloud. Jména namespaců, komponent a prvků se oddělují jednou pomlčkou a jméno modifikátoru dvěma pomlčkami. Jméno stavu je pak odděluje jednou pomlčkou od prefixu is. CSS proměnné pak začínají dvěma pomlčkami, obsahují jméno komponenty a prvku, který je definuje, a končí jménem proměnné ve formě velBloud oddělené jednou pomlčkou (např. --Form-button--default-color). Globální proměnné pak používají jednoduše --velBloud.

//Příklady:
.twt-Tweet { ... }
.twt-Tweet-image { ... }
.twt-Tweet-link--visited { ... }
.twt-Tweet.is-markedRead
.u-center { text-align: center }
.u-sm-floatLeft { float: none }
.u-md-floatLeft, .u-lg-floatLeft { float: left }

Názor

Je dobře, že někdo vzal rozpracovaný a nedotažený nápad a přesně určil, jak se mají pojmenovávat třídy a jaké oddělovače použít. Na druhou stranu mi, jako OOP programátorovi, přijde divné, psát velké písmeno uprostřed identifikátoru (jméno komponenty s namespace) nebo kombinovat pomlčku a velBlouda (jméno stavu). Jako CSS designérovi mi naopak přijde divné, proč třída vzhledu komponenty má její prefix, zatímco třída stavu ho nemá. Věřím ale, že lidé z Twitteru to promysleli a že prohlížeče u třídy .Form-input.is-invalid nejprve najdou input a pak teprve zjistí, zda je nevalidní (zpracování zleva doprava), než aby naopak našli vše nevalidní a pak teprve zjišťovali, jaký je to prvek.

Výhody

• jednoznačně definované pojmenování
• pořádek v oddělovačích
• namespace pro komponenty

Nevýhody

• trochu nešťastně zvolené použití velBloud a pomlček (věc názoru)
• delší „křivka učení“ (myslím tím např. jak rozhodnout, co je komponenta a co její prvek, co je modifikátor a co stav, apod.)
• nejednoznačné označení stavových tříd
• podivné označení utilitních tříd (proč prefix u? komponenta začíná velkým písmenem, takže s utilitou si ji nespletete)

BEMIT

Tohle není jméno nové výbušniny, ale chytrý název vzniklý spojením metodik BEM a ITCSS, který se snaží odstranit nevýhody obou: BEM specifikuje, jak definice pojmenovávat, ale už ne jak je organizovat v souborech. ITCSS naopak řeší pořadí pravidel, ale nezabývá se jejich pojmenováním.

Kdyby to končilo pouhým spojením dvou navzájem se doplňujících metodik, bylo by to super. BEMIT, ale podle specifikace přidává ještě další, celkem nesmyslné požadavky. Zaprvé všechny třídy začínají písmenem (tzv. Maďarský zápis – netuším, proč se tak jmenuje, když ho vymyslel tým Microsoft Office) podle toho, k čemu patří, např. .c-form pro komponenty, .o-img pro objekty, .u-center pro utility a .is-active pro stavy. Zadruhé pak definuje nový oddělovač @, který označuje responsivitu definice (např. .c-form@lg pro 1200+px styl nebo .u-hidden@print pro prvky určené jen pro tisk). Vtipné je, že zavináč má v CSS speciální význam (tzv. at-rules), takže ve jméně třídy je potřeba ho escapovat.

Skrytá pointa prefixů a suffixů má být tak, že jednoduchým pravidlem jako třeba [class^="c-"] můžete na stránce zvýraznit prvky daného typu (komponenty, responzivní prvky, apod.) a jednodušeji tak stránku testovat, jestli vypadá tak, jak bylo zamýšleno (např. jestli se prvky nepřekrývají). Což ale odporuje základnímu pravidlu „neměň kód jen aby šel lépe testovat“ – z pohledu uživatele: proč by všichni měli stahovat desítky kB dat navíc (prefixy a suffixy tříd) jen proto, že vám to při testu pěkně zvýrazní prvky?

Názor

Spojení BEM a ITCSS je logický krok a vlastně mu nic nebrání, jelikož si metodiky neodporují a ani se definicí nepřekrývají a řekl bych, že většina týmů, které používají BEM nebo ITCSS k něčemu podobnému musela přistoupit.

Vnášení ale dalších pravidel, které nedávají smysl a nemají ani s jednou metodikou nic společného nechápu. Přijde mi to jako pokud starého Céčkaře vnést do moderního světa své zastaralé poučky, které už ale nedávají smysl (např. v C je nutné rozlišovat velikost proměnné (byte, word) nebo typ (array, string), takže prefixy b- (byte) a sz- (string, zero-terminated) jsou celkem logické, ale v CSS ale nedávají smysl ani nejsou potřeba).

Výhody

• Spojení výhod BEM a ITCSS
• Snadnější testování

Nevýhody

• Neřeší nevýhody zmíněných metodik (viz výše)
• Zneužívá rezervovaný znak @ (např. SuitCSS tohle řeší mnohem elegantněji)

Atomic

Atomic CSS je nástroj, který generuje CSS na základě definic obsažených v HTML. Místo toho, abyste do HTML psali CSS třídy a na základě nich pak psali jednotlivé styly, Atomic CSS vám umožní psát kryptografické styly přímo do HTML a prekompilátor (nazvaný Atomizer) pak sám projde HTML, vytvoří třídy a jejich styly, které uloží do CSS souborů a následně dané třídy zapíše do HTML stránky.

Vámi zapsaný styl pak může vypadat takto:

<div class="Btn C(#fff) Bgc(bgColor) P(0.5em)">
    Tohle asi bude tlačítko
</div>

Přímo do atributu class píšete jména buď vámi definovaných tříd (např. Btn), proměnných (např. bgColor) nebo funkcí (C() = color, P() = padding), které pak „Atomizer“ převede na třídy a vygeneruje CSS soubory.

Názor

Pokud vám nevadí učit se zcela nové zkratky (např. Bdtc() = Border Top Color), konfigurovat prekompilátor a muset ho spouštět po každé změně, dohledávat a přepisovat styly přímo v HTML a celá idea externích CSS stylů vám přijde zbytečná, pak jen směle do toho. Mě to ale přijde jako strčit hlavu do kravskýho lejna a říkat tomu makeup.

Výhody

• Prakticky odpadá nutnost spravovat CSS soubory a nějak je organizovat – o vše se postará Atomizer.
• Můžete používat předdefinované styly a proměnné, které zjednodušují změnu.

Nevýhody

• Znalost CSS je vám prakticky k ničemu, Atomizer používá jiné pojmy (i když, pravda, založené na jménech CSS vlastností).
• Musíte rozchodit prekompilátor a nezapomínat ho spouštět (pravda, jde to zautomatizovat).
• Pokud musíte změnit něco, na co nemáte třídu nebo proměnnou, musíte prohledávat HTML.
• Nemáte žádný přehled o tom, jaké styly se používají, protože vše je inline v HTML.

Tailwind

Framework založený na myšlence Atomic CSS, ale využívající předdefinované CSS třídy pro stavbu stránky.

Framework je podobný Bootstrapu v tom, že do HTML píšete předem definované třídy, které existují v CSS a není potřeba nic kompilovat jako v případě Atomic CSS. Na druhou stranu Tailwind neobsahuje žádné předdefinované komponenty jako Bootstrap, ale pouze tzv. pomocné třídy, pomocí nichž si můžete komponenty vytvořit. Nevýhoda je v tom, že komponenty nelze „sdílet“ a každý prvek (formulář, tlačítko, apod.) je víceméně unikát.

Framework obsahuje třídy jako „nastavat barvu textu na bílou“ (text-white), „přidej barevné pozadí“ (bg-green-500) či „udělej kulaté okraje“ (rounded). Také obsahuje responzivní definice, takže například třída flex (pro flexbox) má alternativy jako sm:block, md:inline-flex, lg:flex, apod., pomocí kterých určíte, jak se má prvek chovat při různých rozlišeních obrazovky.

Pro určení velikost prvků používá buď čtvrt-remy (např. prvek se třídou w-20 je široký 5REM) nebo zlomky (takže w-1/4 je 25% šířky rodiče). I tyto třídy jsou responzivní, takže prvek může mít styl třeba sm:w-auto md:w-full lg:w-2/3 xl:w-50.

Update: Tailwind (2.0?) nabízí kompilátor (tailwindcss), pomocí kterého můžete vytvářet vlastní CSS třídy a „komponenty“:

@responsive {
    .btn-green {
        @apply text-white bg-green-500 rounded;
    }
}

Názor

Framework umožňuje snadno udělat například zelené tlačítko bez toho, abyste museli definovat třídu .green-button a psát něco do CSS. Na druhou stranu když chcete zelené tlačítko používat v celém projektu, musíte si pamatovat, jaké všechny třídy je potřeba použít pro zelené tlačítko.

Tailwind může být výhodný v případě, že používáte další framework s templatovací funkcí (např. Latte) a tak můžete zelené tlačítko vytvořit jako HTML šablonu využívající Tailwind pro CSS.

Výhody

• Obsahuje předdefinované třídy s logickými názvy.
• Umožňuje vytvořit přesně takový vzhled, jaký chcete, bez omezování se na existující komponenty nebo theme.

Nevýhody

• Neobsahuje komponenty, takže musíte vše postavit na „zelené louce“.
• Pro stejně vypadající prvky musíte psát styl znova, nebo využít jiné systém pro vytváření komponent.

Atomic CSS-in-JS

Nejde přímo o framework, ale o myšlenku, jak využít Atomic CSS (které je pro HTML) a Twintail (které je pro serverové templatovací systémy) i ve frameworcích jako React, které využívají výhradně Javascript pro psaní komponent a kódu.

Každá společnost pak vytváří vlastní framework podle své potřeby. Například Stylex of Facebooku, React-Native-Web of Twitter, Styletron od Uber či menší jako Fela nebo CXS.

Myšlenka je taková, že před tím, než v JS vytvoříte komponentu, pomocí pomocného kontruktoru nadefinujete atomické CSS, které pak v komponentě použijete. Framework pak zajistí, že do Atomic CSS vygeneruje jen ty definice, které skutečně použijete a tím minimalizuje velikost CSS a stránky. Navíc jména CSS tříd mohou být generovaná a nezabírají tolik místa v HTML a CSS souboru.

Facebook uvádí, že pomocí svého frameworku Stylex zmenšil velikost úvodní stránky (po přihlášení) z 400kb na 74kb (méně než pětina).

Pro ukázku kódu použiju fiktivní JS a CSS-in-JS frameworky Temply a Stajly:

include Temply from 'temply.js';
include Stajly from 'stajly.js';

//checkbox
let style = new Stajly([
    {'w-100':'width: 100%'},
    {'txt':'color: black'},
    {'fwb': 'font-weight: bold'},
    {'error': 'color: red'}
]);
const checkbox = new Temply('label', {
    'class': style.get('w-100', 'txt', 'fwb')
});
style = new Stajly([
    {'w-1R':'width: 1REM'},
    {'cb':'color: black'},
    {'bg': 'background-color:green'},
]);
checkbox.add(new Temply('checkbox', {
    'class': style.get('w-1R', 'cb', 'bg')
});
checkbox.addText('Enable');
checkbox.render();

Tento kód pak může vytvořit následující HTML a CSS:

<!-- HMTL -->
<label class="AAA AAB AAC">
    <input type=checkbox class="AAD AAB AAE">
    Enable
</label>

/* CSS */
.AAA { width: 100%; }
.AAB { color: black; }
.AAC { font-weight: bold; }
.AAD { width: 1REM; }
.AAE { background-color:green; }

Všimněte si, že framework Stajly správně rozpoznal, že styly txt a cb jsou stejné a vygeneroval oba do definice AAB. Stejně tak poznal, že styl error není použit a tak ho nevygeneroval.

Názor

Nejde o konkrétní framework, ale jen o myšlenku, a je na vás a vašem týmu napsat si vlastní řešení, které vám bude vyhovovat. U velkého projektu typu Facebook nebo Twitter se to samozřejmě velmi rychle obrátí ve výhodu, ale pro jednostránkové weby není příliš dobré ztrácet čas psaním nového frameworku.

Výhody

• Definice HTML a CSS na jednom místě.
• Automatické generování CSS pouze z toho, co použijete.
• Sami si určíte, jak budete třídy pojmenovávat.
• Nezáleží, jestli máte rádi krátká jména nebo dlouhá popisná – vygenerované CSS může mít vždy krátká vygenerovaná jména.
• Možnost použít vlastní framework pro všechny své projekty.
• Možnost použít existující framework jiné společnosti která ho dala k dispozici je stažení.

Nevýhody

Otázka je, jak framework napsat tak, aby byl efektivní a stránku zrychlil. Například jak poznat, že dva stylyl jsou stejné a je potřeba je vygenerovat do stejné definice. V týmu zkušených programátorů to není tak velký problém, ale u startupového týmu studentů by to mohlo stav spíše zhoršit a bylo by lepší využít nějaké hotové řešení (ať už CSS-in-JS nebo nezávislé).

Další nevýhoda je, že, jak již název CSS-in-JS napovívá, jde o process použitelný pouze v konkrétním prostředí (Javascriptem generované stránky). Pokud pracujete na více projektech napsaných v různých frameworcích (např. React, Nette, Zend, apod.) není toto řešení příliš vhodné a bylo by lepší použít systém CSS, který bude nezávislý a použitelný na všech projektech (např. LESS nebo SASS).

SMACSS

Scalable and Modular Architecture CSS (čteno „Smacks“ = plácnutí, facka) je vlastně kniha nebo e-book o CSS. Zdarma je jen pár prvních kapitol, které vás mají přesvědčit o tom, jak skvělá metodika to je a proč byste si ji měli koupit. Velká facka do tváře Open Source světu.

Princip SMACSS je rozdělení CSS do 5 kategorií: Base (základní CSS, může sem přijít prakticky cokoliv), Layout (rozložení stránky, tedy kde je menu, patička, atd.), Module (znovupoužitelné styly, např. tabulky, formuláře, atd.), State (styly pro různé stavy jako otevřené menu, nevalidní formulář, apod.) a Theme (měnitelný vzhled).

V base by podle jiných zdrojů měly být CSS pro reset, nastavení stránky (tedy HTML a BODY), stažení a definice fontů, importy externích stylů, atd. Kniha to ale (alespoň ve veřejné části) příliš nespecifikuje.

Hlavní výhodou pak mají být moduly, které umožňují jednou napsané styly sdílet mezi stránkami nebo projekty. Každý modul má své jméno a pomocí něj se definují i CSS pravidla a v HTML nebo JS definuje, že se daný modul bude aplikovat na určitý prvek.

/* /css/modules/loginForm.css */
.loginForm { ... }
.loginForm.is-invalid { ... }
.loginForm.is-disabled { ... }
.loginForm input,
.loginForm select,
.loginForm .login-button { ... }
/* atd. */

Názor

Dál už jsem nedočetl, protože jde o placený obsah. I tak mi ale nějak přijde, že podobně už mám svá CSS organizovaná a že už jsem o tom četl někde jinde nebo mi to prostě takhle přišlo logické. Celé SMACSS asi bude jen o tom, že tenhle topící se nejvíc plácá kolem sebe („smacks“), takže si ho každý všimne a asi ho i někdo z té vody vytáhne.

Pokud máte zbytečných $13 a snesete pár facek (kniha se kupuje přes odkaz „Get smacked“, což znamená „nechat se zfackovat“), můžete si koupit e-book a přečíst si, co dalšího vám SMACSS nabízí. Nebo si můžete koupit jakoukoliv jinou knihu o CSS a nebo si zdarma přečíst nějakou dokumentaci k frameworku, kde jsou podobné principy popsány a dostupné zdarma.

Výhody

• Dostupné v angličtině, francouzštině a japonštině. いいですね。

Nevýhody

• Třináct dolarů je třináct dolarů. (Asi 3 stovky v korunách.)

Pattern Lab

Pattern Lab je nástroj pro navrhování layoutu a vzhledu stránek (přímo jsem ho nezkoušel). Co ale přináší pro organizaci CSS je rozdělení prvků do složek tak, jak se z nich postupně skládá stránka.

Design se dělí na atomy (základní prvky, např. input), molekuly (spojení atomů, např. input s labelem a error hláškou), organismy (větší celky, např. formulář nebo menu), šablony (layout stránky složený z organismů) a stránky (konkrétní stránka založená na templatu). Anglicky atoms, molecules, organisms, templates a pages.

Šablona může být zobecněný layout celé stránky, např. stránka s jídelníčkem pro řetězec restaurací, zatímco stránka je pak již konkretizovaná pro každou konkrétní restauraci včetně jejího jména, adresy, fotek atd. Nebo může být šablona jen SECTION pro určité použití (např. článek s komentáři, seznam článků vč. stránkování, atd.), ze kterých se pak teprve skládají celé stránky (tím, že se přidá hlavička, menu a patička, které jsou společné pro celý web a není je tedy potřeba zahrnovat do konkrétních šablon).

Pokud chcete rozdělit CSS soubory do složek podle jejich významu, ale nehodí se vám SMACSS struktura (layout/module/state/theme) a nechcete vymýšlet vlastní, můžete použít tu navrženou Pattern Labem.

Názor

Rozložení mi přijde logičtější než u SMACSS a je mnohem lépe upravitelné pro vlastní potřebu. Např. můžete vypustit molekuly, pokud si vystačíte s atomy a organismy nebo můžete templaty přejmenovat na layouty, pokud vám to přijde logičtější.

Z dema je vidět, že nástroj nabízí možnost jednotlivé atomy, šablony atd. zobrazovat v různých rozlišeních, takže pomáhá vytvářet responzivní layout. Pěknou featurou je pak „random“ (náhodná) šířka obrazovky, která vám může pomoci odchytit některé layoutové chyby vyskytující se jen na exotických zařízeních.

Pojmenování složek mi ale přijde trochu nešťastné, protože používá výrazy z různých oborů (fyzika, biologie a IT*). Nechápu, proč se nemůže držet zaběhlých pojmů a dělit na prvky, komponenty, struktury, apod. Člověk pak nebude muset chápat princip molekulární fyziky, aby mohl navrhovat web.

*Je ale možné, že výrazy template a page pochází také z biologie, pak by dávala smysl jejich volba, o to méně by ale dávalo smysl jejich použití. Template je totiž proces přenosu DNA do RNA (základ množení buněk, bakterií a virů) a PAGE je zkratka pro PolyAcrylamide Gel Electrophoresis (Elektroforéza v polyakrylamidovém gelu) a jde o metodu používanou pro rozložení proteinů na molekuly za účelem jejich zkoumání).

LESS

Jde o Javascriptový prekompilátor, díky kterému můžete do svých CSS přidat proměnné a funkce a můžete styly vnořovat do sebe. Spouštět ho můžete z konzole (pomocí NodeJS nebo Rhino), z programu Koala nebo ho přímo vložit do stránky a používat k online překladu při načtení.

Příklad LESS kódu:

@import "themes/dark"
@import "old.css"

@promenna: #fff;

.funkce(@parametr)
  when (isColor(@parametr)) {
    color: @parametr;
    border-color: @parametr;
}
.border {
    border: 1px solid @promenna;
}
.styl {
  .border; /* přidá rámeček */
  .funkce(@promenna); /* nastaví barvu */
  .vnorenyStyl {
    /* udělá barvu světlejší o 10% */
    .funkce(lighten(@promenna, 10%));
  }
  /* umí sčítat a převádět jednotky */
  padding: 0.5em + 1%;
  //a také podporuje řádkové komentáře
}

Výpočty

Matematické výpočty jsou trochu problematické a bude trvat nějakou dobu, než správně pochopíte, co jak funguje a kde jsou rozdíly. Například pro @border: 0.5rem bude výsledkem „1rem - @border“ hodnota „0.5rem“ zatímco „1rem -@border“ vrátí „1rem -0.5rem„.

U násobení a dělení se bere v úvahu jen první jednotka, takže „1cm * 5mm / 2cm“ vrátí 2,5cm místo 0,25cm. To může být problém hlavně pokud máte jednotky uloženy v proměnných a násobíte je. Když někdo změní jednotky u jedné z proměnných, najednou budou vycházet jiné výsledky. Třeba když 2s změní na 2000ms, bude najednou animace trvat půl hodiny místo 2 sekund.

Jednotky ve výpočtech musíte zadávat malými písmeny, protože „1REM - @border“ vrátí „1 REM - 0.5rem“ (výpočet tedy vůbec neproběhl, jen se napsala proměnná) a „(1REM - @border)“ jen vyhodí chybu „Expected ) got R„.

Tyto problémy mohou částečně vyřešit parametry --strict-math a --strict-units.

Optimalizace

Další výhoda LESS kompilátoru je v tom, že to není jednoduchý převod kódu LESS do CSS, ale kompilátor celý kód projde, pokusí se pochopit jeho strukturu a následně vytvoří co nejlepší a nejmenší CSS definující požadovaná pravidla.

Například pokud 10 různým prvkům (pravidlům) nastavíte, že mají červenou barvu, LESS nevytvoří 10 pravidel, ale pouze jedno nastavující barvu všem 10 prvkům.

p { margin: 0; color: red; }
a { display: inline-block; color: red}

//vytvoří:
p, a { color: red}
p { margin: 0; }
a { display: inline-block; }

To může ale někdy dělat problémy, protože za účelem optimalizace může LESS některá pravidla vyloučit a změnit tak smysl CSS pravidel – pokud chcete zachovat fallback pravidla pro starší prohlížeče.

//původní staré CSS:
.layout { display: table; }

//Přidaný LESS kód pro modernizaci
.layout { display: flexbox; display: flex; }

V tomto příkladu, kde převádíte tabulkový layout na flexbox (a chcete zachovat tabulkový layout pro starší IE), vás LESS zradí, protože zatímco správně pochopí dvojitou definici display: flexbox; display: flex;, tak definici display: table považuje za zbytečnou a z CSS ji vyloučí. Pokud tedy chcete v CSS zachovat vícenásobné definice, musíte je napsat všechny do jednoho pravidla:

.layout {
    display: table;
    display: flexbox;
    display: flex;
}

Koala

Pro uživatele Windows (ale i Linux a MacOS) bude asi nejvýhodnější si stáhnout program Koala. Do něj jednoduše z průzkumníku přetáhnete složky, kde máte uloženy LESS soubory a program bude sledovat jejich změnu a automaticky je kompilovat do CSS (nebo volitelně minifikovaných CSS).

Koala v sobě obsahuje jak samotnou less.js knihovnu, tak i JS engine, takže po instalaci programu není již potřeba nic dalšího stahovat ani nastavovat. Parametry pro skript se dají konfigurovat přímo v programu hromadně nebo pro každý soubor zvlášť.

Kromě LESS umí Koala kompilovat i SASS (SCSS) a CoffeeScript, nebo ho můžete použít i k samostatné minifikaci CSS a JS souborů.

Názor

Zajímavý způsob, jak vylepšit svá CSS, jelikož LESS rozšiřuje možnosti, ale nemění´ stávající pravidla pro používání CSS, takže ho klidně můžete zahrnout do existujícího projektu a pak postupně zlepšovat a zjednodušovat CSS styly.

Výhody

• Nemění stávající CSS ani jeho použití v HTML a JS.
• Zlepšuje možnosti využití a organizace CSS.
• Je možno použít i online v prohlížeči bez prekompilace.

Nevýhody

• Kompiluje se z *.less souborů a překládá na CSS.
• Definice z jednotlivých LESS souborů se nesdílí, je potřeba v každém LESS skriptu importovat soubory s definicemi proměnných a funkcí, které hodláte používat.
• Některé výpočty nemusí fungovat, jak byste čekali; jednotky zadané velkými písmeny (např. REM) se nevypočítávají.

SASS

Zkratka znamená „Syntactically Awesome Style Sheets“, tedy něco jako Styly se skvělým zápisem. Jde o Ruby prekompilátor, díky kterému můžete do svých CSS přidat proměnné a funkce a můžete styly vnořovat do sebe. K jeho běhu potřebujete Ruby a pak ho můžete spouštět z konzole, nebo si můžete stáhnout nástroj Koala, který je pro Windows, Linux i MacOS a zahrnuje v sobě vše potřebné pro kompilaci souborů.

Příklady SASS (SCSS) kódu:

@import "darkTheme"; /* _darkTheme.scss */

$promenna: #fff;

@mixin funkce($parametr) {
    color: $parametr;
}

.styl {
  @include funkce($promenna); /* nastaví barvu */
  .vnorenyStyl {
    border: 1px solid black;
  }
  .cervenyRamecek {
    @extend .vnorenyStyl;
    border-color: red;
  }
  /* umí sčítat a převádět jednotky */
  padding: 0.5em + 1%;
}

Kromě výše uvedeného SCSS umožňuje SASS použít i odlišný SASS zápis, který nepoužívá závorky, středníky a uvozovky jako CSS, ale místo nich je založen na odřádkování a odsazení (podobně jako třeba CoffeeScript). Také trochu jinak používá Mixiny (funkce).

Koala

Pro uživatele Windows (ale i Linux a MacOS) bude asi nejvýhodnější si stáhnout program Koala. Do něj jednoduše z průzkumníku přetáhnete složky, kde máte uloženy SASS nebo SCSS soubory a program bude sledovat jejich změnu a automaticky je kompilovat do CSS (nebo volitelně minifikovaných CSS).

Koala v sobě obsahuje jak samotnou knihovnu, tak i engine, takže po instalaci programu není již potřeba nic dalšího stahovat ani nastavovat. Parametry pro skript se dají konfigurovat přímo v programu hromadně nebo pro každý soubor zvlášť.

Kromě SASS a SCSS umí Koala kompilovat i LESS a CoffeeScript, nebo ho můžete použít i k samostatné minifikaci CSS a JS souborů.

Názor

Dobrý způsob jak rozšířit možnosti svých CSS, podobně jako LESS. Pokud ho budete chtít používat z konzole, může být trochu nevýhodou Ruby (oproti JS u LESS); ze stejného důvodu nelze použít v prohlížeči. Také neumožňuje importovat stávající CSS (jako LESS) a zakompilovat je do nových CSS generovaných z SASS nebo SCSS.

Výhody

• Můžete stále používat staré CSS (přes <link> jako doteď).
• Rozšiřuje možnosti psaní nových stylů.

Nevýhody

• Potřebujete Ruby pro kompilaci; v případě potřeby budete těžko dohledávat něco ve zdrojovém kódu, protože Ruby je dost odlišné od JS a PHP, které většina webařů zná.
• Není možno upravovat stávající CSS soubory. Je potřeba styly přepsat pomocí kaskád.
• Kompiluje se z *.sass nebo *.scss souborů do CSS. V týmu může být problém rozhodnout, který formát používat.

jQuery UI ThemeRoller

Pokud chcete do projektu přidat jednoduchou změnu vzhledu (theme), můžete použít ThemeRoller, který je součástí jQuery UI knihovny. K použití themu nepotřebujete jQuery UI ani samotné jQuery.

ThemeRoller je webový nástroj, pomocí kterého si můžete naklikat barvy, písma, pozadí a rámečky, které pak stáhnete jako CSS, které můžete přidat do své stránky.

Následně pak můžete používat CSS třídy (v HTML nebo JS), které nastaví konkrétní styl. Např. pro tlačítko nastavíte třídy „.ui-widget .ui-state-default .ui-corner-all„, čímž nastavíte písmo, barvu a okraje z themu. Když pak chcete změnit písmo nebo barvu, stačí do stránky připojit jiné CSS a nemusíte nic měnit.

jQuery UI Theme nemá moc CSS tříd (něco kolem 20 plus dalších 10 pro ikony), takže nehrozí, že byste se v nich ztratili nebo nevěděli, jaké použít. Navíc při stažení umožňuje zahrnout do CSS scope, takže různé části stránky mohou používat různé theme CSS a vypadat trochu jinak (např. .ui-widget může 1px border ve stránce a 2px v menu).

Postup je následující:

1. jděte na http://jqueryui.com/themeroller/ a naklikejte si jaký vzhled chcete,
2. klikněte na Download theme,
3. klikněte na Components – Toggle All, čímž vypnete stažení JS knihovny
4. do kolonky CSS Scope zadejte CSS selektor prvku, na který má být theme omezen (např. #menu nebo .page),
5. stáhněte CSS a přiložte ho do stránky.

Pro úpravu stylu stačí otevřít daný CSS theme a zkopírovat do prohlížeče URL uvedenou na začátku souboru.

Navíc vygenerované CSS není příliš složité a je dobře uspořádané, takže můžete ručně vymazat části, které nepotřebujete (např. vymazáním stylů pro ikony, pokud je nepoužijete, ušetříte několik kB).

Názor

Jednoduchý nástroj pro změnu vzhledu. Také vám pomůže sjednotit stále se opakující definice a umožní vám zaměřit se na to, co je důležité (např. smysluplný responsivní layout). Ideální pro menší stránky, začínající webaře nebo pro vytváření modulů nebo komponent bez použití jiných frameworků.

Výhody

• Snadno si naklikáte vzhled, snadno ho můžete změnit.
• Nízký počet tříd udržuje jednotný vzhled všech částí stránky a zabraňuje vzniku nechtěných odlišností.

Nevýhody

• Nenabízí nic víc než pár tříd, pro složitější organizaci budete muset použít něco jiného.
• Pokud požadujete odlišný vzhled pro různé komponenty, musíte vygenerovat a použít více theme souborů.

Bootstrap

Framework od Twitter týmu, který nabízí řadu javascriptových pluginů pro tvorbu stránky (např. navigační menu, login stránku, formuláře, carousel, atd.). Jak asi tušíte, všechny víceméně vypadají a chovají se tak, jak vypadají stránky Twitteru, takže při jejich použití se budete buď muset smířit s tím, že budete kopírovat Twitter (což nemusí být nutně špatně) nebo budete muset framework hodně upravovat (nebo použít theme).

Samotné CSS soubory v balíku nabízí tzv. reset (sjednotí vzhled prvků v různých prohlížečích), přičemž Bootstrap přidává prvkům řadu užitečných funkcionalit (např. definice DL-DT-DD má dva responzivní vzhledy) a také řeší pokročilé závislosti (např. prvek SMALL se v nadpisech chová jinak než v obyčejném textu).

Také přidává celou řadu užitečných tříd, které můžete použít v HTML a vylepšit tak vzhled stránky. Např. použitím jedné z mnoha .glyphicon-* můžete danému prvku přidat ikonu z použitého písma (UNICODE ikony). Pomocí tříd .container, .container-fluid a .col-xs-* můžete řídit layout stránky, přičemž třídy sami zajišťují responzivitu layoutu na menších obrazovkách. Pro text, odkazy a tabulky je určena celá řada tříd, kterými můžete měnit vzhled (např. .success zbarví pozadí do zelena zatímco .info do modra, apod.).

CSS třídy definující barevnost stránky (pozadí, okraje, přechody, atd.) jsou odděleny v souboru bootstrap-theme.css, takže si můžete vytvořit nebo stáhnout odlišnou barevnou paletu, aby vaše stránky nevypadaly úplně stejně jako Twitter. Začít můžete třeba na startbootstrap.com.

Názor

Pokud připravujete nějaký blog, CMS, e-shop, SNS, apod., kde nepotřebujete vymýšlet nějaké zázraky, ale naopak se vám hodí, že už to vymyslel někdo za vás, pak je Bootrap to pravé. I když v takovém případě proč rovnou nepoužít WordPress, PrestaShop, apod.?  Pokud naopak chcete vytvořit originální stránku, budete pravděpodobně neustále narážet na to, že Bootrap už danou věc nějak řeší, ale jinak, než byste potřebovali.

Pozor na to, že i když je Bootstrap interně založen na jQuery, které podporuje staré prohlížeče, Bootstrap sám je oficiálně určen pro „nejnovější verze“ a na stránkách přímo uvádí, že prohlížeče starší než IE11 stránku napsanou v Boostrapu nezobrazí správně.

Bootstrap v5 (2020+) již není na jQuery založen, takže ho nepotřebujete k jeho běhu. Nicméně je s ním zpětně kompatibilní, takže ho stále můžete použít pro vlastní javascript.

Výhody

• Hotová řešení pro prvky, styly a widgety
• Základní styly zakládají na HTML5 struktuře (footer, article, atd.)
• Řeší responzivní layout
• Velká podpora vývoje na GitHubu
• Nepřeberné množství Themů a Templatů

Nevýhody

• Hotové řešení = brání vlastní kreativitě
• Použití CSS bez JS znamená naučit se jména stovek tříd
• Pokročilé možnosti vzhledu definujete v HTML/JS místo v CSS
• Responzivita řeší mobil vs. desktop (768px+; viz poznámka) ale ne různě velké mobily (240px, 320px, 400px, 480px, apod.).
• Neřeší vzhled pro prohlížeče starší než IE11
• Od srpna 2019 ukončena podpora Boostrap v3 a zkrácena LTS na dva roky, takže pro dlouhodobější projekty budete muset postupně upgradovat.

Bootstrap 1 responzivitu neřeší vůbec, Boostrap 2 zase definuje breakpointy špatně, takže se o respozivitě moc mluvit nedá. Verze 3 má 3 breakpointy a podporuje tedy 4 velikosti displejů: extra small (do 767px; aka phone), small (768px – 991px; aka tablet), medium (992px – 1199px; aka desktop) a large (1200px+; aka wide desktop). Verze 4 má 4 breakpointy a lepší podporu pro mobily, kdy extra small se rozdělilo na výchozí (phone do 575px) a extra small (576px – 767px); Navíc pozice breakpointu se dá nastavit, takže klidně můžete extra small posunout na 400px nebo 480px dle vlastní potřeby.

Material Design

Material je designový průvodce od Google a můžete se s ním setkat na platformě Android (ikony a vzhled Google aplikací jako Gmail, Play, Hudba, apod.). Material Design Lite (MDL) je pak Framework, který danou metodiku aplikuje do JS a CSS. CSS jsou napsána v SCSS a používají BEM pojmenování tříd (i když ho ignorují nebo ohýbají kdykoliv je potřeba).

Výhodou je, že na GitHubu jsou jednotlivé komponenty rozděleny do složek, takže pokud jen chcete kulaté (+) tlačítko jako má Gmail, stačí stáhnout JS a CSS pro button a nepotřebujete celé MDL.

Názor

Stejně jako v případě Bootstrapu, pokud chcete použít vzhled Google aplikací a nevadí vám jejich omezení a způsob, jakým je design vytvářen v HTML, tak jen směle do toho.

Picnic

Jednoduchý a moderní framework definující vzhled komponent na základě existujících HTML5 prvků. Na rozdíl od výše uvedených frameworků tedy do HTML nepíšete třídy určující typ komponenty, ale využíváte HTML prvky jako <button class=success>, <fieldset class=flex>, <input type=checkbox>, což asi není žádná novinka, ale i <article> (rámeček nebo modální okno), <header> a <footer> (orámovaná hlavička a patička bloku) či <nav> (panel s tlačítky).

Bohužel pěkná myšlenka je nedotažená, takže framework nepoužívá další HTML5 prvky jako section, figure nebo dialog a místo toho spadává zpět v DIVům a SPANům, např. <div class=modal> nebo <span class=label>.

Názor

Dobrá myšlenka a pro jednoduché weby určitě přínosné, protože nemusíte přemýšlet nad tím, jaké komponenty budete potřebovat a jaký framework tedy musíte použít. Na druhou stranu pro složitější stránky a aplikace bude spíše přítězí, protože zabřednete do haldy DIVů a SPANů a navíc framework neobsahuje žádné CSS, takže cokoliv interaktivního si budete muset sami napsat.

Spárování CSS komponent na HTML prvky není vždy úplně logické, takže např. <fieldset> (což je v základním HTML řámeček) se používá jako obsal formulářových prvků bez rámečku, zatímco <article> (v HTML neviditelný obal textu a pvků) přidává rámeček.