Successfully reported this slideshow.

React a omyly jazyka CSS

3

Share

Upcoming SlideShare
React a CSS
React a CSS
Loading in …3
×
1 of 20
1 of 20

More Related Content

Related Books

Free with a 14 day trial from Scribd

See all

Related Audiobooks

Free with a 14 day trial from Scribd

See all

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.

×