Upload
filip-mares
View
435
Download
0
Embed Size (px)
Citation preview
Komponenty v kaskáděReactisti - Praha, Prosinec 2015
Filip Mareš
Principal Software EngineerMonster Worldwide@etylsarin
Komponenty kam se podíváš
„UI by se měly skládat z opětovně použitelných komponent s dobře
definovaným rozhraním“
WTF?!
CSS a komponenty
Christopher “vjeux” ChedeauReact: CSS in JS
7 „problémů“ CSS• Všechno je v globálním namespace• Závislosti• Eliminace mrtvého kódu• Minifikace• Sdílení konstant• Umístění ve stylopisu hraje roli• Izolace
CSS v JSIn-line styly FTW!
CSS v Reactu
Cascading Style Sheets
• Selektor ≠ proměnná• CSS vzniklo v době
webových stráneka dokumentů
7 „problémů“ CSS• Všechno je v globálním namespace• Závislosti• Eliminace mrtvého kódu• Minifikace• Sdílení konstant• Umístění ve stylopisu hraje roli• Izolace
Nevýhody CSS v JS• Globální styly• Použití stávajících knihoven• Styly pro různé prohlížeče / uživatele• Svázání konkrétního vzhledu s
komponentou• Svázání konkrétní technologie s
komponentou
Nevýhody in-line CSS
• (Ne)ukládání do mezipaměti• Velikost HTML hraje roli• :hover/:focus/:active• Media queries (@ pravidla)• CSS Animace• Stylování pro různé prohlížeče• DevTools / SourceMaps
CSS v Reactu
css-loaderloader: ‘css-loader?modules’
Disciplína FTW!
Ideální řešení• Sass, Less, nebo PostCSS syntaxe• Nezávislé na frameworku• Nezávislé na CSS názvosloví• Žádná extra režie při renderování
stylů na klientu
Jak si zvolit konvence?
• Velikost projektu• Externí knihovny• Časová náročnost• Don’t Repeat Yourself• Modifikace• Izolace
ITCSSObecné
Konkrétní
ITCSSMéně
specifické
Vícespecifické
NastaveníNástrojeObecnéZákladníObjekty
KomponentyExkluzivní
ITCSS
Kam dál?• React Native• Shadow DOM• MSS ?
Díky!
Reference• https://github.com/MicheleBertoli/css-in-js• https://css-tricks.com/the-debate-around-do-we-even-
need-css-anymore/• https://medium.com/@jviereck/modularise-css-the-rea
ct-way-1e817b317b04• http://hugogiraudel.com/2015/06/18/styling-react-com
ponents-in-sass/• http://glenmaddern.com/articles/interoperable-css• https://medium.com/seek-ui-engineering/the-end-of-gl
obal-css-90d2a4a06284