CSS Modules

Think local, start compose!

Transcript

1. Think local and compose! 26 july 2016 @milanofrontend
2. JS Frontend Developer at LinkMe Srl Twitter: @_denb In love with React and Javascript in general. I’m a 7-month-old dad Daniele Bertella
3. CSS
4. React: CSS in JS by vjeux
5. OOCSS, ACSS, BEM, SMACSS
6. <Button class="btn"> <Button class="btn btn--state-success"> <Button class="btn btn--state-danger">
8. CSS in JS
9. <Button type="button" className="btn btn--primary"> <PrimaryBtn />
10. <Button type="button" class="SomeLibBtn flamey-text rainbowborder" style={{fontSize: "4rem"}} >
11. If you’re writing React, you have access to a more powerful styling construct than CSS class names. You have components.
12. React: CSS in JS by vjeux
13. CSS in JS https://github.com/MicheleBertoli/css-in-js React: CSS in JS techniques comparison
15. CSS Modules
16. Not inline styles, just classes, CSS classes
17. .title { font-size: 36px; }
18. No more Global Scope
19. <h1 class="title__App__3Q9Zt" >Titolo</h1>
20. No more Overqualified Selectors
21. .home h1.big { font-size: 36px; }
22. Refactoring made it easy
23. <Title>Titolo</Title>
24. How does it work?
25. Composes
26. .title { font-size: 14px } .h1 { composes: title; composes: bold from ‘./base. css’; }
27. <h1 class="h1__App__45dEA title__App__3Q9Zt bold__Common__qA8s1" >Titolo</h1>
28. :global
29. :global .title { font-size: 14px }
30. <h1 class="h1__App__45dEA title bold__Common__qA8s1" >Titolo</h1>
31. @value
32. @value primary-color: #b04208 .title { color: primary-color; }
33. @value primary-color from 'css/base.css'; .title { color: primary-color; }
34. Atomic CSS Modules
35. .image { composes: left p2 mr1 border from 'basscss/css/basscss.css'; }
36. <div class="image__App-styles__2Smk3 left__basscss__3v_U_ p2__basscss__F9Oep mr1__basscss__3xYN_ border__basscss__2qjJA" ><img src=... /></div>
37. Atomic CSS Modules https://medium.com/yplan-eng/atomic-css-modules-cb44d5993b27
38. Are CSS Modules right for my (next) project?
39. Maybe
40. Happy with BEM?
41. NO
42. Component architecture?
43. YES
44. QUESTIONS?
45. Thanks @_denb