CSS

How I make cool & maintainable stuff, fast.

Transcript

1. CSS!
2. I want to...
3. I want to make cool stuff.
4. I want to make cool stuff, fast.
5. I want to make cool & maintainable stuff, fast.
6. Let’s make an app.
7. Let’s make our app look awesome.
8. Let’s make it easy to make our app look awesome.
9. /css /components /base /utilities main.css
10. The individual building blocks /components The fundamental rules /base Classes for adjusting CSS within templates /utilities All the above imported main.css
11. Variables
12. SASS Variables $color-primary CSS Variables var(—-color-primary)
13. Pre-processing
14. SASS & LESS Pre-processors REWORK & POSTCSS Pre-processing plugin frameworks
15. Building, watching & reloading.
16. Let’s start making our app look cool.
17. Naming
18. BEM Block, Element, Modifier
19. Block block Element block__element Modifier block__element—-modifier
20. Cue human body analogy
21. Block block Element block__element Modifier block__element—-modifier
22. Block person Element person__arm Modifier person__arm—-left
23. Maybe not .person__arm__hand__finger Maybe .person .arm .hand__finger—-ring
24. HTML
25. HTML + CSS
26. HTML + CSS + JS
27. <div></div>
28. <div class=“person”> <div class=“person__arm person__arm—-left”> Left arm </div> <div class=“person__arm person__arm—-right”> Right arm </div> </div>
29. <div class=“person”> <div class=“person__arm person__arm—-left”> Left arm </div> <div class=“person__arm person__arm—-right”> Right arm </div> </div> /css/components/person.css .person {} .person__arm {} .person__arm—-left {}
30. <div class=“person”> <div class=“person__arm person__arm—-left”> Left arm </div> <div class=“person__arm person__arm—-right u-margin-Tm”> Right arm </div> </div> /css/utilities/space.css .u-margin-Tm { margin-top: var(—-space-medium); }
31. Utilities
32. <div class=“u-display-block u-margin-Vm u-color-primary u-background-meta u- padding-Lm u-padding-Rs u-text-heading u- text-m u-text-no-smoothing”> Forever alone </div>
33. <div class=“u-display-block u-margin-Vm u-color- primary u-background-meta u-padding-Lm u-padding- Rs u-text-heading u-text-m u-text-no-smoothing”> Much CSS </div> <div class=“u-display-block u-margin-Vm u-color- primary u-background-meta u-padding-Lm u-padding- Rs u-text-heading u-text-m u-text-no-smoothing”> Very stylesheets </div> <div class=“u-display-block u-margin-Vm u-color- primary u-background-meta u-padding-Lm u-padding- Rs u-text-heading u-text-m u-text-no-smoothing”> Such utility class </div>
34. <div class=“my-cool-component”> Much CSS </div> <div class=“my-cool-component u-text-no-smoothing”> Very stylesheets </div> <div class=“my-cool-component u-background-meta”> Such utility class </div>
35. Our app Lets us work quickly Easy to maintain Looks awesome
36. Cheers!