To all coding enthusiasts: if you want to write cleaner CSS, ITCSS could well be of interest to you. It is a new method for organising CSS files that makes it possible, among other things, to find your way around more easily — that is what we are going to look at in this article.
What is ITCSS?
The meaning
ITCSS is the acronym for Inverted Triangle Cascading Style Sheets, which was thought up and invented by Harry Roberts.
Valuable help
ITCSS is a CSS architecture aimed at answering a problem often encountered by front-end developers. This architecture can evolve simply and be kept up to date easily — enough to stay high-performing!
Indeed, when you build a site, the code has to be able to keep up with changes in the languages used, but it is also very important to have clear code so that you can make changes quickly.
It is therefore a methodical approach aimed at helping developers organise their various CSS files over the course of a project. It makes it easier to find your way around all the style lines thanks to a division of the CSS code into several sections, called layers.
Focus on the creator: who is Harry Roberts?
Harry Roberts is a consultant and web performance engineer in the United Kingdom. He is the creator of ITCSS.
Harry started from a simple observation: CSS and developers both have a few shortcomings. On the one hand, CSS is a language with strong inheritance and a dependency on the order in which code is written, which often causes problems. On the other hand, developers work with different styles and do not always structure their CSS files correctly. What is more, they do not often produce the documentation needed to maintain and keep track of that code properly.
ITCSS therefore offers a solution to these concerns. It involves dividing files into several sections containing increasingly specific elements, layer after layer. With this methodology, documentation is no longer needed: the code is methodical and structured in layers, making it easy to find where what you are looking for is located.
Accessibility with ITCSS
ITCSS is a methodology that is perfectly compatible with other CSS methodologies that you almost certainly use. You therefore do not need to change your way of working; ITCSS simply allows you to improve it. Whether you use the BEM (Block Element Modifier), OOCSS (Object-Oriented CSS) or SMACSS (Scalable and Modular Architecture for CSS) methodology, ITCSS is within your reach.
What is more, ITCSS can be used without a preprocessor (a program that runs on the code to transform it so that it can be executed). It is nonetheless recommended to use one in order to obtain greater benefit.
Where does this inverted triangle name come from?
This inverted triangle name is due to the way the CSS files are divided up. As you can see in the diagram below, there are seven layers, placed one beneath the other. The specificity of each of these layers forms the triangle. Indeed, the first layers are very generic and contain a lot of elements. The further down you go, the more specific they become, and so they contain fewer and fewer elements.
Obviously, each layer has its own clearly defined role, which is why documentation is not necessary on projects using this methodology. If you are looking for the style of a selector, for example, you can look for it directly in the Elements file.
Whatever we do in programming, we always have to think about the future. All applications and all websites are destined to evolve one day or another, whether because languages evolve or because we want to develop the system — so we may as well do everything from the outset to make change easier.
ITCSS offers a simple, scalable and maintainable methodology, compatible with other CSS methodologies. It makes it possible to address problems that are very much present in projects where several teams often work together.
Try ITCSS and give us your opinion! For more articles, head to our blog.
