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