react a omyly jazyka css
TRANSCRIPT
&
@robinpokorny
Ahoj, dnes si trochu vyliji zlost na jazyk CSS. Pandy budou plakat. Nakonec to ale dobře skončí.
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.
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.
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.
.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é.
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.
Modularita
@import url(“module.css");
Rozdělení souboru na více menších nijak nepomáhá. Vše jsou znovu a opět globální proměnné. CSS neumí moduly.
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.
.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.
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?
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?
Proměnné(skutečné)
Na proměnné čekáme od roku 1997. Ne, nemyslím ten cukřík z preprocesorů. Mluvím o skutečných, dynamických proměnných.
Dnes existuje experimentální specifikace a jedenácti procentům uživatelů funguje. Bude do dvou let běžně použitelná? Nevím.
Kaskáda
Největší problém způsobuje „cascading“ v Cascading Style Sheets – původně největší přednost. Kolikrát jsme to už viděli?
Hack
Nástroji, metodikami a disciplínou dokážeme eliminovat mnoho popsaných problémů. Platí ale, že to jsou pouze hacky.
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.
Ano, React trochu neplánovaně řídí revoluci i v oblasti stylování. Následuje ukázka. Prosím, zachovejte si otevřenou mysl…
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.
Seskupujmesouvisející,
technologie.nikoli
Komponenta je definována významem, vzhledem a chováním. Ty by měly být v jednom souboru, ne zvlášť styly, mark-up a skripty.
@robinpokorny [email protected]
Ten ješter jsem já, dívka CSS a vy tam v zadu. A já vám unáším styly, buď je můžete zachránit, nebo se ke mně přidat.