komponenty v kaskákdě
TRANSCRIPT
![Page 1: Komponenty v kaskákdě](https://reader036.vdocuments.mx/reader036/viewer/2022070603/58728c121a28ab36118b5357/html5/thumbnails/1.jpg)
Komponenty v kaskáděReactisti - Praha, Prosinec 2015
![Page 2: Komponenty v kaskákdě](https://reader036.vdocuments.mx/reader036/viewer/2022070603/58728c121a28ab36118b5357/html5/thumbnails/2.jpg)
Filip Mareš
Principal Software EngineerMonster Worldwide@etylsarin
![Page 3: Komponenty v kaskákdě](https://reader036.vdocuments.mx/reader036/viewer/2022070603/58728c121a28ab36118b5357/html5/thumbnails/3.jpg)
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“
![Page 4: Komponenty v kaskákdě](https://reader036.vdocuments.mx/reader036/viewer/2022070603/58728c121a28ab36118b5357/html5/thumbnails/4.jpg)
WTF?!
![Page 5: Komponenty v kaskákdě](https://reader036.vdocuments.mx/reader036/viewer/2022070603/58728c121a28ab36118b5357/html5/thumbnails/5.jpg)
CSS a komponenty
Christopher “vjeux” ChedeauReact: CSS in JS
![Page 6: Komponenty v kaskákdě](https://reader036.vdocuments.mx/reader036/viewer/2022070603/58728c121a28ab36118b5357/html5/thumbnails/6.jpg)
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
![Page 7: Komponenty v kaskákdě](https://reader036.vdocuments.mx/reader036/viewer/2022070603/58728c121a28ab36118b5357/html5/thumbnails/7.jpg)
CSS v JSIn-line styly FTW!
![Page 8: Komponenty v kaskákdě](https://reader036.vdocuments.mx/reader036/viewer/2022070603/58728c121a28ab36118b5357/html5/thumbnails/8.jpg)
CSS v Reactu
![Page 9: Komponenty v kaskákdě](https://reader036.vdocuments.mx/reader036/viewer/2022070603/58728c121a28ab36118b5357/html5/thumbnails/9.jpg)
Cascading Style Sheets
• Selektor ≠ proměnná• CSS vzniklo v době
webových stráneka dokumentů
![Page 10: Komponenty v kaskákdě](https://reader036.vdocuments.mx/reader036/viewer/2022070603/58728c121a28ab36118b5357/html5/thumbnails/10.jpg)
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
![Page 11: Komponenty v kaskákdě](https://reader036.vdocuments.mx/reader036/viewer/2022070603/58728c121a28ab36118b5357/html5/thumbnails/11.jpg)
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
![Page 12: Komponenty v kaskákdě](https://reader036.vdocuments.mx/reader036/viewer/2022070603/58728c121a28ab36118b5357/html5/thumbnails/12.jpg)
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
![Page 13: Komponenty v kaskákdě](https://reader036.vdocuments.mx/reader036/viewer/2022070603/58728c121a28ab36118b5357/html5/thumbnails/13.jpg)
CSS v Reactu
![Page 14: Komponenty v kaskákdě](https://reader036.vdocuments.mx/reader036/viewer/2022070603/58728c121a28ab36118b5357/html5/thumbnails/14.jpg)
css-loaderloader: ‘css-loader?modules’
![Page 15: Komponenty v kaskákdě](https://reader036.vdocuments.mx/reader036/viewer/2022070603/58728c121a28ab36118b5357/html5/thumbnails/15.jpg)
Disciplína FTW!
![Page 16: Komponenty v kaskákdě](https://reader036.vdocuments.mx/reader036/viewer/2022070603/58728c121a28ab36118b5357/html5/thumbnails/16.jpg)
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
![Page 17: Komponenty v kaskákdě](https://reader036.vdocuments.mx/reader036/viewer/2022070603/58728c121a28ab36118b5357/html5/thumbnails/17.jpg)
Jak si zvolit konvence?
• Velikost projektu• Externí knihovny• Časová náročnost• Don’t Repeat Yourself• Modifikace• Izolace
![Page 18: Komponenty v kaskákdě](https://reader036.vdocuments.mx/reader036/viewer/2022070603/58728c121a28ab36118b5357/html5/thumbnails/18.jpg)
ITCSSObecné
Konkrétní
![Page 19: Komponenty v kaskákdě](https://reader036.vdocuments.mx/reader036/viewer/2022070603/58728c121a28ab36118b5357/html5/thumbnails/19.jpg)
ITCSSMéně
specifické
Vícespecifické
NastaveníNástrojeObecnéZákladníObjekty
KomponentyExkluzivní
![Page 20: Komponenty v kaskákdě](https://reader036.vdocuments.mx/reader036/viewer/2022070603/58728c121a28ab36118b5357/html5/thumbnails/20.jpg)
ITCSS
![Page 21: Komponenty v kaskákdě](https://reader036.vdocuments.mx/reader036/viewer/2022070603/58728c121a28ab36118b5357/html5/thumbnails/21.jpg)
Kam dál?• React Native• Shadow DOM• MSS ?
![Page 22: Komponenty v kaskákdě](https://reader036.vdocuments.mx/reader036/viewer/2022070603/58728c121a28ab36118b5357/html5/thumbnails/22.jpg)
Díky!
![Page 23: Komponenty v kaskákdě](https://reader036.vdocuments.mx/reader036/viewer/2022070603/58728c121a28ab36118b5357/html5/thumbnails/23.jpg)
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