CSS in JS Pros & Cons

This talk starts from discussing some issues came alone with how CSS was originally designed and how developers tried to solve it. And later on focus on explaining the uprising CSS in JS solutions.

Transcript

1. CSS in JS Pros & Cons Jesse Chen LINE UIT Global Workshop 9/5/2019
2. From Taipei, Taiwan LINE Fukuoka Working on Creator’s Market
3. Vanilla CSS • simple and intuitive: developers want a more versatile way to define styles • Originally designed to be global: class naming become a problem when application's scale grows
4. Needs & Solutions • avoid naming conflict: BEM naming convention • syntax sugars: preprocessors SASS LESS • nested style • import other stylesheet • variable • vendor prefix
5. About preprocessors • Pros: • Cons: • has been used for a long time, very well developed • postcss: modulize each feature of the preprocessor, widely used as webpack loaders • still has naming conflict
6. avoid naming conflict
7. CSS modules An idea to solve the naming issue
8. webpack css-loader implements css-modules • set modules to true to enable css-modules
9. CSS modules
11. For production Extract css
12. Why not css-modules
13. preprocessors needed • variable is only available in current file • counter intuition compose api
14. FOUC
15. CSS in JS • Define styles • Apply styles to components • Avoid naming conflict
16. Define styles
17. Stylis a light weight css preprocessor transpiles template string into css string with an unique selector given
18. JSS defines styles like an object. Generates unique class names
19. The difference between stylis and JSS stylis's api takes an unique selector and supports nested rules. JSS works the other way around
20. Apply styles • stylis -> emotion -> styled-components • jss -> react material-ui
21. api designs
22. inline api Set styles along with each component Still computes unique class names at lower level
23. Styled api styled-components is a hoc provides styling information to its child
24. Styled components? • Why section has to be specified • .child can possibly to be overwritten • Is it necessary to create an extra component only for styles • Hook api?
25. hook api Has benefits and limitations from react hooks
26. Stylesheets is dynamic • Utilize React.context to provide themes • Able to change styles based on the state of components • unique class names is static during runtime, they should be settled during bundling process
27. Knowing what's your needs first • static pages/app scale is relatively small: vanilla css • hate naming convention: css-module(css-loader) • comprehensive capability(come along with complexity): emotion / styled-components / react material-ui
28. Another approach • Originally designed to be global: lit-element/shadow DOM: styles defined inside the component is already scoped.
29. Thank you! Any questions?