My approach to a component-based CSS

Slides to my talk at the Techettes Frankfurt Meetup:
This is my approach to a component-based CSS architecture. I already realized a few project with it and it works really well! The CSS get's more more reusable and maintainable.

Transcript

1. Component-based CSS Techettes - Mai 2018
2. That's me ! "
3. DAE?
4. Component-based what now? official definition -> my current approach <-
5. We’re not designing pages, we’re designing systems of components. — Stephen Hay
6. What is a Component? Components let you split the UI into independent, reusable pieces, and think about each piece in isolation.1 1 https://reactjs.org/docs/components-and-props.html
7. Component-based CSS pros → reusable → more maintainable → more comprehensible in the markup → easier to refactor → plays nicely with the component-based web
8. Nice! But...
9. .component-one { position: relative; font-family: "Fancy Font"; font-weight: 500; font-size: 20px; color: #ff99ff; width: 100%; height: 880px; margin-bottom: 20px; padding: 10px 15px; background-color: #000033; }
10. .component-two { position: relative; font-family: "Fancy Font"; font-weight: 700; font-size: 15px; color: #ff99ff; width: 100%; height: 880px; margin-top: 20px; padding: 10px 15px; background-color: #000033; }
11. .component-three { font-family: "Fancy Font"; font-weight: 500; font-size: 20px; color: #ff99ff; height: 880px; margin-top: 20px; background-color: #000033; border-top: 1px solid #ff99ff; &:hover { background-color: #ff99ff; color: #000033; } }
12. What about repetition?
13. CSS component !== Website Component Not every CSS component mirrors a component in the markup.
14. Why? Separation of concerns does not really work with CSS. <!-- content-specific classes --> <p class="profil-lead-text"> I'm Mirjam and I'm a cat AND dog person! </p> <!-- style-specific classes --> <p class="text-center lead p-3"> I'm Mirjam and I'm a cat AND dog person! </p>
15. My current approach for seperation Basic component general styles like: font styles, colors, variables Utility component repeating styles that can be used universally Counterpart component counterpart to our website component
16. Characteristics Basic component They are like a CD Styleguide. They'll tell you how your brand looks and behaves.
17. Characteristics Utility components They help you with all the things you would write over and over again. They'll support you - and your team! - with a consistent style.
18. Characteristics Counterpart component They determine the rules how a specific website component has to look like. This component style will work in every place of the markup.
19. Rules
20. Naming consistent and clear → mirror website component name → use them for scoping → use speaking class names → don't generate unexpected results (side effects)
21. Naming approach - components .ComponentOne { // .component-one color: pink; .ComponentOne-logo { height: 120px; } //alternativ &-logo { height: 120px; } } // the scoping adds a bit of safety
22. Naming approach - components More important than PascalCase || use-hyphens || i-like__bem: Be consistent!
23. Naming approach - utility & basic .text-lg { font-size: $font-base * 1.5; } .d-flex { display-flex; } .background-warning { background-color: $warning-color; } // ( ᐛ )و
24. Nope .background-red { background-color: $warning-color; // $warning-color = orange; font-weight: bold; } // <(ҹ^´)>
25. Markup Use composition to define appearance. <div class="ComponentOne m-3"> <div class="text-lg text-center background-warning"> <p>ALERT</p> </div> </div>>
26. btw: Embrace compositions! ❤
27. Nest components, not styles Components can be nested in other components, but never nest CSS components to overwrite styles. <div class="SearchResult d-flex"> stuff <div class="ButtonComponent"> some stuff </div> </div> <!-- (*^-^) -->
28. .ButtonComponent { font-size: 10px; padding-top: 5px; padding-bottom: 5px; } .SearchResult { .ButtonComponent { font-size: 10px; padding-top: 10px; padding-bottom: 10px; } } // ( ಠ ಠ )
29. Never add styles based on location .ComponentTwo { div { .d-flex { background-color: red; } } } // ҵ(`O´)҈
30. Create independent website components Counterpart components should only contain styles that define their unique appearance. They're independent from their environment. You should be able to put them anywhere in the markup without changing their style.
31. #LifeProTips
32. My #LPT so far (Part 1) → don't write CSS on the side, think about an useful architecture → plan your CD styleguide carefully → use and adapt the styleguide → commit to and write down naming rules
33. My #LPT so far (Part 2) → refactor early and often - we all know CSS grows rampart if you don't look at it for, like, 5 minutes → use your basic and utility components generously → unify rules and styles when possible - there's seldom need for margin: 13px and margin: 14px in the same view → pls don't use pixel
34. My #LPT so far (Part 3) → if you write similar styles the third time, think about creating utility components → if you add the third variation of a style to a dynamic website component, think about creating a new one
35. Let's look at some examples!
36. And that's it! Feel free to contact me with questions! My approach is still work in progress so I'm very happy about feedback when you give it a try. Twitter: @mirjam_diala Github: programmiri
37. Further reading links → Airbnb CSS styleguide → OOCSS → BEM → CCSS → SUIT CSS naming conventions → Separation of oncerns