JS as Preprocessor for CSS

https://medium.com/@webPapaya/css-architectures-in-2016-fab5d14c9b6e

Transcript

1. JS as Preprocessor for CSS Thomas Mayrhofer(@webpapaya)
2. About • Thomas Mayrhofer • MMT Bachelor Graduate 2015 • Currently working @crewmeister • Workforce Management for Small Businesses
3. Why • Global Namespace • Dependencies • Dead Code elimination • Sharing Constants (between JS and CSS) • eg. Class names to toggle on click • Non-deterministic Resolution • Order or requires/@imports matter • Isolation • Automated refactoring tools • New Syntax/Language
4. What we @crewmeister want to archive • Easy reasoning about where styles are coming from • Avoid selector clashes • Special cases are easy to implement • Portability of our components • Consistent Styling Possible (DRY Styles) • sharing variables/constants • fast unit tests for our styling • minimal dependencies
5. CSS or Preprocessor Advantages • easy to get started • designers/developers are used to it • autoprefixer can be integrated • Browser developer tools can be used Disadvantages • new language as a dependency • global css declarations • portability is hard • dead code elimination is hard • automated refactoring tools are missing
6. CSS Modules
7. Advantages • Global Namespace fixed Disadvantages • min. 2 dependencies required • CSS Preprocessor • JS build tool (Webpack, Browserify + Plugin) • Hard dependency between JS Build tool and Application • eg. import styles from ”button-styles.css”
8. Inline styles generated by CSS
9. Advantages: • global context • no new language dependency • JS refactoring tools can be used • dead code can be detected • styles can be calculated during runtime • e.g. custom color scheme for ever customer, without generating a new stylesheet on the server Disadvantages • No Media Queries • No Pseudo Classes (:hover, :active, …) • Styles are calculated during runtime • no dedicated caching of css files
10. JS generated stylesheets
11. • no global context • no new language dependency • IDE refactoring tools can be used • dead code can be detected • styles calculation during runtime is possible but not required • autoprefixer can be integrated • cache and gzip files
12. Stilr • Small 200 line JS library • Stringifies JS Objects to CSS with a global unique name • Server rendering is possible, tough tricky to set up • https://github.com/kodyl/stilr
14. Demo
15. Future Unit testing
16. Resources • https://medium.com/@webPapaya/css- architectures-in-2016-fab5d14c9b6e#.otoyufhe3 • https://vimeo.com/116209150 • http://postcss.org • https://github.com/css-modules/css-modules
17. Thanks