Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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.

Mirjam Aulbach

May 08, 2018

More Decks by Mirjam Aulbach

Other Decks in Programming


  1. 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
  2. Component-based CSS pros → reusable → more maintainable → more

    comprehensible in the markup → easier to refactor → plays nicely with the component-based web
  3. .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; }
  4. .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; }
  5. .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; } }
  6. 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>
  7. 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
  8. 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.
  9. 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.
  10. Naming consistent and clear → mirror website component name →

    use them for scoping → use speaking class names → don't generate unexpected results (side effects)
  11. Naming approach - components .ComponentOne { // .component-one color: pink;

    .ComponentOne-logo { height: 120px; } //alternativ &-logo { height: 120px; } } // the scoping adds a bit of safety
  12. Naming approach - utility & basic .text-lg { font-size: $font-base

    * 1.5; } .d-flex { display-flex; } .background-warning { background-color: $warning-color; } // ( ᐛ )و
  13. Markup Use composition to define appearance. <div class="ComponentOne m-3"> <div

    class="text-lg text-center background-warning"> <p>ALERT</p> </div> </div>>
  14. 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> <!-- (*^-^) -->
  15. .ButtonComponent { font-size: 10px; padding-top: 5px; padding-bottom: 5px; } .SearchResult

    { .ButtonComponent { font-size: 10px; padding-top: 10px; padding-bottom: 10px; } } // ( ಠ ಠ )
  16. Never add styles based on location .ComponentTwo { div {

    .d-flex { background-color: red; } } } // ҵ(`O´)҈
  17. 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.
  18. 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
  19. 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
  20. 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
  21. 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
  22. Further reading links → Airbnb CSS styleguide → OOCSS →

    BEM → CCSS → SUIT CSS naming conventions → Separation of oncerns