Harry Roberts introduces Inverted Triangle CSS, and explains how to use it to manage your CSS projects.
How does the Inverted Triangle metaphor work?
An inverted triangle helps people visualise the state of an entire codebase in very simple terms.
An inverted triangle is a really great shape to help people visualise the state of an entire codebase in very simple terms.
ITCSS works by ordering your CSS project by three key metrics, and each of these metrics can be plotted against a side of the Triangle: along the top edge, from the outside inward, we gradually narrow the reach of our selectors until we move to the end of the project at the tip of the Triangle;
Down the left edge we plot an increase in the specificity of our selectors as we progress through the project until we hit the tip; and down the right edge we plot an increase in the explicitness of our selectors until we reach the tip.
The Triangle is then chunked up into layers which each represent a type of rule in our codebase (e.g. Elements or Components). Now we have several potential areas in our CSS that we can write, fine, and add new rules based upon the key metrics.
This helps developers to work much faster by creating a rule based environment in which they operate quite strictly (rules are fast and easy to follow) which also brings huge performance and scalability benefits.
When should a developer consider calling on ITCSS?
ITCSS is incredibly flexible and can be used on all types of project, so I would say always. (Biased? Me?) With that in mind, it's probably easiest to give an example of when I'd not consider it.
If you work on projects where components might have to be syndicated and consumed in any context (i.e. your work isn't just to build foo.com, but to build components that could be used on any given site) then ITCSS wouldn't be appropriate.
ITCSS works to manage your entire CSS architecture, so it requires project-level knowledge and ‘self awareness'.
If you need to build components that have to work in unknown environments, I would look to using the BEM architecture. This circumstance is by far the exception though.
What about methodologies like OOCSS and SMACSS. Is ITCSS intended to replace them?
ITCSS is everything-compatible. It utilises OOCSS by default, and can be used in conjunction with SMACSS. It's not designed to replace anything, but to complement and encapsulate a number of different principles into a managed architecture.
When impositions does ITCSS place on developers?
Roberts goes through ITCSS in meticulous detail with all of my clients as standard
There are very few prerequisites, really. The prerequisites that do exist are something of the norm now anyway, which makes the onramp even easier. Firstly, you mustn't use any IDs in CSS; IDs are specificity heavyweights and provide no benefits to us; the use of IDs will completely go against the specificity metric.
Another requirement is that you work in a componentised way; you build reusable UI components in a very class-based system. This low specificity and highly composable way of working allows ITCSS (and therefore you) to reach full potential.
Where can we learn more about ITCSS?
I've always been very keen not to speak too publicly about ITCSS for two key reasons. Firstly, I want to make sure it's as battle hardened as possible before telling people to use it, and secondly, well, I need to reserve some intellectual property for paying clients.
That said, I have just written up the first ever ITCSS primer in net magazine, but the best way to learn about it is to hire me (am I allowed to say that?); I go through ITCSS in meticulous detail with all of my clients as standard.
What's your best piece of advice for something eager to embrace the methodology?
It's malleable in that you can choose to use whichever preprocessor you might like (or none at all), you can choose whichever naming convention you might like (or none at all), but do not bend or break the core rules.
A lot of people try to make their own flavour of ITCSS which just doesn't work—as soon as you change the core principles and groups ITCSS stops being ITCSS.
Other than that, have fun! Once you've learned the initial rules and principles it's a breeze to follow and extend.
