ITCSS stands for Inverted Triangle CSS. In order to understand ITCSS, it’s import to understand the issues that we are trying to solve with CSS at scale. Some of the issues are mentioned below,
- Cascading and inheritance – Any rule can inherit from a different one.
- Source order – whatever is written in last gets applied.
- Specificity – Rules with a higher order of specificity can override things in unexpected ways.
Looking at all these pitfalls we need a system the embraces and manages CSS that actually formalize a structure that works for us. But CSS has been around for a very long time and it has stood the test of times.
By saying that we as developers might not be getting somethings right. There are several issues with developers,
- Varied Coding styles – No Unified way of working.
- Lack of documentation – A shared methodology that could lead to code documentation not present.
- Range of skill level – Diversity in skill cannot guarantee the quality of CSS.
If we can design a methodology that takes away the pain and stress and also gets non-experts in CSS contributing to the code in a non-decremental way we need a framework to do it and that framework is ITCSS.
How does CSS look like without ITCSS? Let’s assume we have the main CSS file generate through any preprocessor or in any other way. Normally when we start writing the styles in the CSS file we start looking at the features or the design. Maybe we start adding some scaffolding (CSS resets). Most projects have a Header – so we add a Header CSS into the files. Here we are building CSS through a design language which is a very common way. This is a very human order this is the way a human looks at CSS. But the browser does not care if your Header CSS comes first or your Footer what the browser bothers about is What specificity? What gets inherited? etc. It might work for smaller projects but as the project grows this becomes very complex and difficult to manage. A lot of time is spent in refactoring the CSS which constantly leads to overriding rules in the CSS file. This leads to out of control CSS where a six-month-old feature overrides a new feature. Problems get even worse when you have to phase things out where the problem gets compounded. Most of the time this happens when we do not have a structured way of doing things. By taking ITCSS we can reimagine these structures in which these problems disappear. Inverted triangle CSS takes the problem of managing specificity, impartial ordering and rest of the issues head-on.
Let’s start off with one side of the triangle Specificity. Specificity is prominent and very hard to manage at scale and one of the key rules is always to avoid id selector. A specificity graph is a simple model for diagrammatically assessing the overall health of your codebase in terms of specificity. You could know more about specificity graphs at https://csswizardry.com/2014/10/the-specificity-graph/ and also generate a specificity graph for your project using CSS Specificity Graph Generator. https://jonassebastianohlsson.com/specificity-graph/. The main point here is fighting the Specificity wars – an endless battle of rasing specificity. A bad Specificity graph tells us that we are not in control and specificity should gradually increase across your project and not be scattered around. The gradual increase has an immediate benefit on the project New additions will always override previous additions by virtue of its location. This immediately removes the problem of older legacy code overriding new features. To retrofit this theoretical knowledge into our codebase is to create directory structures that house our different types of CSS. The diagram below shows a clear demarcation of structures along with the gradual increase of specificity.
- The first set of demarcation (Generic) is dedicated to fairly generic reset kind of styling like global box-sizing, CSS resets typically generic and is very copy and pastable.
- The second set of demarcation is Elements or the Baselayer has a slight increase in specificity compared to the first one. It contains any CSS that has styling for HTML elements. Example How should link should look like? How should paragraphs look? etc.
- The third is the Object layer that starts dealing with class-level specificity. And deals with structural design patterns like Grids etc.
- The fourth set of demarcations contains the majority of CSS rules. The components layer has things that users interact with like Carousels, Dropdowns, etc. Here we try and achieve encapsulation.
- The fifth demarcations are where your hacks lie. Here you will have things specific for IE (Internet Explorer) or you could use !important to your styles.
From the diagram above if we move through the graph from left to right we notice that the specificity increases. Now let see the other two sides. Explicitness looks at how opinionated the piece of design might be. For example, if we have only one Red button we will not apply the same style to every button we will wait till later in the project to identify that one button and then apply that style. One problem with CSS design is people tend to look at things very early thus making bad designs. Explicitness adds that constraint and makes developers opt in to the design only when required. The last side of the triangle is Reach which brings everything together. Reach deals with how much of the page or the entire website a selector can influence. In ITCSS specificity and explicitness increase are we progress but the reach decreases.
The diagram below describes the principle of ITCSS.
As we progress through the inverted triangle the styles tend to reduce their influence on the page until we reach the end of the triangle. The analogy is a sculptor takes a block of rock and starts to sculpt an abstract figure of a human and later takes a smaller instrument to chisel out the details. And it is for sure he will not be chiseling out the details even before he gets to his abstraction.
By adopting the principles behind ITCSS we save a whole lot of issues related to maintainability and readability in CSS. This blog was inspired by a video on skillshare whose link is https://www.skillshare.com/classes/Modern-CSS-Writing-Better-Cleaner-More-Scalable-Code/771669373.
We at bigbasket take the utmost care in maintaining and preserving the reliability of our code. Do keep a watch for more such posts on UI from the bigbasket team.