2. V roce 1996 vznikla první verze CSS, první česká komerční stránka
vypadala takto, já šel do první třídy a Spice girls vydaly první album.
3. Používám CSS
Dnes jsou ovšem kaskádové styly zdrojem problémů, především u
velkých projektů. Obsahují totiž zásadní návrhové omyly.
4. Globální
Za prvé, vše je globální. V ostatních jazycích jsou globální proměnné
považovány za špatné. V CSS to jinak nejde.
5. .hero {
color: 'red'
}
.hero--active {
color: 'thistle'
}
Každý selektor má stejný zásah — vše. Aplikuje se na celou stránku.
Celkem obyčejný kód v ukázce zavádí dvě nové globální proměnné.
6. devel.cz
bootstrap
1 800
2 500
facebook ?
Kolik globálních prvků mají běžně stránky? Facebook neustále
asynchronně nahrává další. Odhaduji celkem desítky tisíc.
8. Izolace
Není možné zařídit, aby se styly neovliňovaly. Disciplínou se dá něco
uhlídat. Narušení izolace se velmi špatně testuje automaticky.
9. .button {
background: 'red'
}
Komu se nestalo něco podobného? Píšu červená, vidím modrá. Nové
prohlížeče umí najít zdroj chyby. Vyřešit ji musíte sami.
10. Odstraňování
Kdy už konečně budu moct odstranit ten ošklivý legacy kód?
Myslím, že se nikde nepoužívá. Ale jak to ověřit?
11. grep -r hero--active ./src
Odpověď: to nelze! Můžete vyhledat výskyt klíčového slova. Ovšem
co když se sestavuje dynamicky? Co když jej používá třetí strana?
15. Hack
Nástroji, metodikami a disciplínou dokážeme eliminovat mnoho
popsaných problémů. Platí ale, že to jsou pouze hacky.
16. Nedávno se objevila věc, která všechno řeší. Jednoduše. Tím, že pro
stylování se používá nejmocnější jazyk v prohlížeči — JavaScript.
17. Ano, React trochu neplánovaně řídí revoluci i v oblasti stylování.
Následuje ukázka. Prosím, zachovejte si otevřenou mysl…
18. let styles = {
marginTop: 20,
color: 'bisque'
}
return <div style={styles}>
…
</div>;
Tadá! — Ano, vypadá to jako inline styly, ale nejsou to ty inline styly,
před kterými vás všichni varovali. Zde dávají smysl.