Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
&
@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 vyda...
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ávrho...
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án...
devel.cz
bootstrap
1 800
2 500
facebook ?
Kolik globálních prvků mají běžně stránky? Facebook neustále
asynchronně nahrává...
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í pro...
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ě te...
.button {
background: 'red'
}
Komu se nestalo něco podobného? Píšu červená, vidím modrá. Nové
prohlížeče umí najít zdroj c...
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...
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...
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ž v...
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 — ...
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 s...
Seskupujme
související,
technologie.
nikoli
Komponenta je definována významem, vzhledem a chováním. Ty by
měly být v jedno...
@robinpokorny me@robinpokorny.com
Ten ješter jsem já, dívka CSS a vy tam v zadu. A já vám unáším
styly, buď je můžete zach...
Upcoming SlideShare
Loading in …5
×

React a omyly jazyka CSS

1,574 views

Published on

Ignite přednáška na Devel.cz Konferenci 2015 (http://devel.cz/konference/2015)

Published in: Technology

React a omyly jazyka CSS

  1. 1. & @robinpokorny Ahoj, dnes si trochu vyliji zlost na jazyk CSS. Pandy budou plakat. Nakonec to ale dobře skončí.
  2. 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. 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. 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. 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. 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.
  7. 7. 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.
  8. 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. 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. 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. 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?
  12. 12. 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.
  13. 13. Dnes existuje experimentální specifikace a jedenácti procentům uživatelů funguje. Bude do dvou let běžně použitelná? Nevím.
  14. 14. 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?
  15. 15. Hack Nástroji, metodikami a disciplínou dokážeme eliminovat mnoho popsaných problémů. Platí ale, že to jsou pouze hacky.
  16. 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. 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. 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.
  19. 19. Seskupujme souvisejí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.
  20. 20. @robinpokorny me@robinpokorny.com 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.

×