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!

1. Scalable CSS
Architecture
Artur Kot & Michał Pierzchała

2. Does it even exist?
Scalable CSS?
Maintainable CSS?

3. What we need
Modularity
Encapsulation
Predictability

4. What we have

5. What we really have
Cascade
Global namespace
Selectors specificity

6. Solution?

7. –David Heinemeier Hansson
“Convention over configuration”

8. Like in JavaScript
Embrace the good parts
Throw away the bad parts

9. Introducing

10. ITCSS
Inverted
Triangle
CSS

12. // main.scss
@import 'settings/*';
@import 'tools/*';
@import 'generic/*';
@import 'elements/*';
@import 'objects/*';
@import 'components/*';
@import 'trumps/*';

13. used with preprocessors
font definitions, colours, variables, etc.
1. Settings
2. Tools
globally used mixins and functions

14. normalising styles
box-sizing
3. Generic
4. Elements
bare HTML elements
reset lists, anchors, etc

15. simple & reusable
containers, grids, global animations, etc
5. Objects
6. Components
actual UI
CSS ❤ components

16. utilities and helper classes
visibility, alternative colours
override anything
7. Trumps

18. Some constraints
and recommendations

19. Groups order is crucial
(Inner order doesn’t matter)

20. Avoid “!important”

21. Use BEM
(Block Element Modifier)

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

23. • .[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.

24. JS hooks
• .js-[name]
• readonly to identify DOM elements for JS
• can’t be styled!

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

26. Resist from nesting

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

28. • 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.

29. You can’t entirely avoid
nesting. It’s impossible.
The goal is to minimise it and its side effects.

30. .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;
}
}
}

31. .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;
}
}

32. Do Repeat Yourself
If it makes your life easier (usually does)
extra bytes will be squashed by gzip anyway…

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

34. Keep it tidy

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

36. Do not mix components with
each other

37. 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;
}
}

38. Nor in the markup
<div class=”c-boxie c-footer”></div>
.c-boxie {
display: block;
}
.c-footer {
display: flex;
}
What display will it get?

39. Objects for reusability
Components for explicitness

40. Use objects for mixing with component!
<div class=”o-boxie c-footer”></div>
.o-boxie {
display: block;
}

41. Trumps are the new
“!important”

42. <h3 class=”o-title t-color-blue”>Heading</h3>
.o-title {
font-size: 12px;
color: red;
}
/* trumps/utilities.scss */
.t-color-blue {
color: blue;
}

43. It’s easier to maintain separated UI components
than ones mixed in HTML markup
Take it serious

44. It Just Works™
for CSS, SCSS, LESS

45. Piece of cake
Critical CSS or PRPL?

46. /* critical.index.scss */
@import 'settings/*';
@import ‘tools/*';
@import 'generic/*';
@import 'elements/*';
@import 'components/colorbar';
@import 'components/header';
@import 'components/hero';

47. Kinda
Use in existing
messy codebase?

48. 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/*';
}

49. With predefined and ready to use (or remove) components
Featured in Chisel,
our new project generator

51. ITCSS
IS
AWESOMER

52. Cool JS-based alternatives
CSS Modules
CSS in JS
Available with
Webpack & Browserify

53. Thank you.
Artur Kot & Michał Pierzchała