My approach to a component-based CSS

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.



May 08, 2018


  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
  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