Organizace CSS? Ne, děkuji.

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

Nevýhody

  • Spoléhá se čistě na třídy, což znamená, že se v duplikuje informace již obsažená v tagu, ID nebo ARIA roli.
  • 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ů.

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á 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, ID nebo ARIA rolí.
  • 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).

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.

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

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.

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 další 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říklad SCSS (SASS CSS) 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.

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 (UTF-8 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ě.

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

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.

3 komentáře u „Organizace CSS? Ne, děkuji.“

  1. Ten BEM je pochopený špatně. Třída jde samozřejmě sdílet. Proč bych definoval tlačítko .product__btn, .gallery__btn, .article__btn když vypadá všude stejně? V BEMu není zakázané mít tlačítko .btn, když je to „globální“ prvek. Stejně tak můžu mít společné ikony, definice pro text atd.
    To, že nepoužívá kaskádu je dobé i kvůli specificitě selektorů – při přidání nového pravidla nemusíte přemýšlet jak moc musí být specifické, aby zafungovalo (např. jen přidáte násobnou třídu a voila – funguje to).

    1. Ano, pokud udělám tlačítko jako blok, pak ho mohu sdílet. Ale zase přijdu o možnost ho modifikovat podle toho, kde je použito (protože bloky se smí vnořovat, ale nesmí se ovlivňovat), a opět narážím na to, že co normálně v CSS funguje, musím v BEMu suplovat v HTML nebo JS.
      Po pravdě ale nutno říct, že od doby, co jsem tohle o BEM psal, jsem viděl řadu frameworků a knihoven BEM používajících a nikdo se striktně nedržel specifikace a psal to jak se mu zrovna hodilo.

  2. Kombinace BEMV (block, element , modifier, VARIANT) krizena s OOCSS mi přijde po 15 letech u programovani a kodovani jako to nejlepší.

    Neznam nikoho kdo by se striktně držel stylu a každý zkušenejší kodér stejně po čase používa nějaký svůj vlastní hybrid. Jinak díky za zajímavé a velmi obsáhlé články (budu pozorněji zkoumat Nette / Latte, v oblasti css se nemám moc co učit).

Napsat komentář

Vaše emailová adresa nebude zveřejněna. Vyžadované informace jsou označeny *