[CZ] CSS Modules

Meetup page: http://srazy.info/frontendisti/6010
Talk in czech: https://www.youtube.com/watch?v=uOKA-tptKUc

Transcript

1. CSS Modules Evoluce BEM a příbuzných
2. Dokumenty vs aplikace
3. Co přinesl Webpack? • všechny assety (JS, obrázky, fonty, styly) v jednom dependency stromu • flexibilně konfigurovatelný výstup z buildu ◦ obrázky externě/base64, builtin podpora pre/postprocessoru • velká databáze pluginů
4. Co přinesl React? • komponentová UI architektura od “rootu” aplikace az po tlačítko • JSX - HTML spolu s JS “We’ve long been forced to separate our technologies rather than our concerns” – Pete Hunt
5. A co na to CSS? • žádná zásadní změna od jeho uvedení • neefektivní minifikace duplicitního/nepoužitého kódu • global state everywhere! ◦ pokusy o nápravu s OOCSS, BEM, SMACSS atp. • nepoužitelné s asychronním načítáním ◦ poslední selektor v souboru vyhrává
6. CSS in JS ◦ animace ◦ active/hover efekty ◦ pseudo elementy ◦ media queries ? https://github.com/MicheleBertoli/css-in-js
7. CSS Modules • ze stylesheetu se stává explicitní dependence • netřeba měnit editor (syntax highlighting, linting)
8. Jak to funguje? • BEM block v CSS == komponenta v JS
9. Co je k tomu třeba? • od května builtin ve webpack css-loaderu
10. Development
11. Produkce
12. Další funkce • opt-in global pomocí `:global()` • kompozice stylu pomocí `composes`
13. Zajímavé odkazy • React: CSS in JS: https://speakerdeck.com/vjeux/react-css-in-js • CSS in JS comparison table: https://github.com/MicheleBertoli/css-in-js • https://medium.com/seek-ui-engineering/block-element-modifying-your- javascript-components-d7f99fcab52b • https://medium.com/seek-ui-engineering/the-end-of-global-css-90d2a4a06284 @LeZuse github.com/lezuse