Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Scalable CSS Architecture

6,712 views

Published on

Slides about ITCSS – an Inverted Triangle CSS architecture which will allow you to write maintainable and scalable stylesheets without pain.

EDIT:
I teamed with Artur Kot (https://twitter.com/arturkot) to update and enrich the presentation. Enjoy!

Published in: Software
  • Be the first to comment

Scalable CSS Architecture

  1. 1. Scalable CSS Architecture Artur Kot & Michał Pierzchała
  2. 2. Does it even exist? Scalable CSS? Maintainable CSS?
  3. 3. What we need Modularity Encapsulation Predictability
  4. 4. What we have
  5. 5. What we really have Cascade Global namespace Selectors specificity
  6. 6. Solution?
  7. 7. –David Heinemeier Hansson “Convention over configuration”
  8. 8. Like in JavaScript Embrace the good parts Throw away the bad parts
  9. 9. Introducing
  10. 10. ITCSS Inverted Triangle CSS
  11. 11. // main.scss @import 'settings/*'; @import 'tools/*'; @import 'generic/*'; @import 'elements/*'; @import 'objects/*'; @import 'components/*'; @import 'trumps/*';
  12. 12. used with preprocessors font definitions, colours, variables, etc. 1. Settings 2. Tools globally used mixins and functions
  13. 13. normalising styles box-sizing 3. Generic 4. Elements bare HTML elements reset lists, anchors, etc
  14. 14. simple & reusable containers, grids, global animations, etc 5. Objects 6. Components actual UI CSS ❤ components
  15. 15. utilities and helper classes visibility, alternative colours override anything 7. Trumps
  16. 16. Some constraints and recommendations
  17. 17. Groups order is crucial (Inner order doesn’t matter)
  18. 18. Avoid “!important”
  19. 19. Use BEM (Block Element Modifier)
  20. 20. <section class="c-component c-component--small"> <div class="c-component__bg"></div> <h2 class="c-component__heading">A component!</h2> <div class="c-component__child"> Lorem ipsum dolor sit amet, consectetur adipisicing elit <button class="c-component__grandchild">inside</button> </div> </section>
  21. 21. • .[component-name]__[child]—[modifier] • Remember that it’s on only a convention! • Use 🍌 instead of __ or 🍓instead —
 if you like • Important: separation of the parent element and its children. • Be consistent.
  22. 22. JS hooks • .js-[name] • readonly to identify DOM elements for JS • can’t be styled!
  23. 23. State classes • .is-[name] • .has-[name] • should be used in favour of —modifiers in case a component changes its state after the page is loaded • handy to use with JS
  24. 24. Resist from nesting
  25. 25. Temptation to target tags .c-my-list li { [item styles] } <ul> <li> <div class=”c-some-component-with-a-list”> <ul> <li>another list!</li> <li> and now you need to override .c-my-list li with stronger selector...</li> </ul> </div> </li> </ul>
  26. 26. • You can’t predict the future. It’s possible that a sneaky designer could design a nested list inside your element. What to do then? More nesting. :) • It, obviously, works but what if you’ve got identical list but with divs instead of lis? • Usually, nesting is like a domino effect: one innocent nested selector results in dozen deeper nested selectors. Avoid when possible.
  27. 27. You can’t entirely avoid nesting. It’s impossible. The goal is to minimise it and its side effects.
  28. 28. .c-component { /* third-party code */ .super-slick-slider { float: left !important; } /* state affects children */ &.is-open { .c-component__grandchild { display: block; } .c-component__inner { display: flex; } .c-component__inner-most { color: red; } } }
  29. 29. .c-component { /* state classes */ &.is-open, &.has-popup { display: block; } /* state pseudo-selectors */ &:hover, &:focus, &:nth-child(2n) { border-bottom: 1px solid; } /* relationships */ + &, ~ &, > &, * { display: none; } }
  30. 30. Do Repeat Yourself If it makes your life easier (usually does) extra bytes will be squashed by gzip anyway…
  31. 31. Tricky MQ nesting .c-component { @media { &.is-cos { @media { color: red; } } } } .c-component { color: blue; @media { color: red; } &.is-cos { @media { color: yellow; } } } BAD GOOD
  32. 32. Keep it tidy
  33. 33. Sync filenames with naming /* _my-pretty-component.scss: */ .c-my-pretty-cmp { color: brown; } /* _my-pretty-component.scss: */ .c-my-pretty-component { color: blue; } BAD GOOD
  34. 34. Do not mix components with each other
  35. 35. Not in stylesheets /* Some time before */ .c-my-box { width: 320px; } .c-my-box__inner { padding: 20px; background: blue; .c-my-other-box { color: white; } } /* Few weeks later… */ .c-my-other-box { color: white; /* Doesn’t work :( */ &--pink { color: pink; } }
  36. 36. Nor in the markup <div class=”c-boxie c-footer”></div> .c-boxie { display: block; } .c-footer { display: flex; } What display will it get?
  37. 37. Objects for reusability Components for explicitness
  38. 38. Use objects for mixing with component! <div class=”o-boxie c-footer”></div> .o-boxie { display: block; }
  39. 39. Trumps are the new “!important”
  40. 40. <h3 class=”o-title t-color-blue”>Heading</h3> .o-title { font-size: 12px; color: red; } /* trumps/utilities.scss */ .t-color-blue { color: blue; }
  41. 41. It’s easier to maintain separated UI components than ones mixed in HTML markup Take it serious
  42. 42. It Just Works™ for CSS, SCSS, LESS
  43. 43. Piece of cake Critical CSS or PRPL?
  44. 44. /* critical.index.scss */ @import 'settings/*'; @import ‘tools/*'; @import 'generic/*'; @import 'elements/*'; @import 'components/colorbar'; @import 'components/header'; @import 'components/hero';
  45. 45. Kinda Use in existing messy codebase?
  46. 46. Gradual adoption Needs pre-/post-processor (sorry CSS 😞) #create #strongest #selector { @import 'settings/*'; @import 'tools/*'; @import 'generic/*'; @import 'elements/*'; @import 'objects/*'; @import 'components/*'; @import 'trumps/*'; }
  47. 47. With predefined and ready to use (or remove) components Featured in Chisel, our new project generator
  48. 48. ITCSS IS AWESOMER
  49. 49. Cool JS-based alternatives CSS Modules CSS in JS Available with Webpack & Browserify
  50. 50. Thank you. Artur Kot & Michał Pierzchała

×