ITCSS : The Hefty CSS Architecture

Session Track
Frontend & Web Design
Skill level

CSS architecture seems to be somewhat in vogue right now. It's something you've no doubt heard mentioned numerous times over the past year or so, and with good reason: UIs (and the teams that build them) are getting bigger and more complicated than ever before. Hence, we need a good approach for maintaining is CSS in an organized and structured manner. ITCSS is the methodology used to visualize your CSS as an upside-down triangle. It helps us in making our CSS reusable and the most effective, least wasteful way.
In this session, we will discuss why we should use ITCSS architecture in our Drupal themes. And how we can utilize it in the best way possible. We will demonstrate and explain all the layers with the examples. 
ITCSS stands for Inverted Triangle CSS. It provides the power to organize your project CSS files so that you can better deal with a global namespace, cascade and selectors specificity. ITCSS is can be merged with other CSS methodologies like BEM, SMACSS OR OOCSS.  It divides your codebase into several layers which form the shape of an inverted triangle
 In this session, we will these layers in detail. These are as follows :
  1) Settings: It defines font and colour definitions
  2) Tools: It defines globally used mixins and functions.
      The first two layers do not contain any CSS.
  3) Generic: normalize styles. First layer which contains actual CSS
  4) Elements: used for styling bare elements like h1, a, ul
  5) Objects: used to define class-based selectors
  6) Components: It is for UI specific components
   7) Utilities: utilities and helper classes