I have applied the ITCSS architecture in the theme designed for my own blog https://carloscaballero.io the theme is available in GitHub so you can use it freely.
CSS is a painful when not written properly and sadly the majority of times CSS is incorrectly organized. The main problems when you use CSS are the following ones:
Global scope. All rules in CSS are in the same scope, so that you can overwrite rules when you use different style sheets.
Cascading rules. The source order really matters when you have a global scope.
Inheritance. The rules can inheritance between their and you can expect a different behavior due to this characteristic.
Selector specificity. One of the biggest problems when creating style sheets comes from the fact that the operation of selectors is not known in depth.
These problems are recurring on large projects due to there are a large number of people working without a framework or work rules. Sadly, the result of this circumstance is that the stylesheets to be chaotic.
Therefore, the solution is writing CSS in specificity order and that order is provided by ITCSS.
ITCSS (Inverted Triangle CSS)
ITCSS is an architecture especially suited for large projects created by Harry Roberts. It is neither a library nor a design framework (Bootstrap, Angular Material), but a way to structure the elements of stylesheets. This architecture doesn’t depend on pre-processors (SASS, Stylus or LESS) but it is highly recommended to use them to obtain a greater benefit from the use of this architecture.
In simple words, ITCSS is a methodology for organizing CSS files within layers-from generic to explicit, and from low to high specificity.
In the following image you can see the inverted triangle:
The layers of the triangle are the follows:
Settings — used with preprocessors and contain font, colors definitions, etc. In this layer is common define the variables that can customize the template.
Tools — globally used mixins and functions. This layer is only used if we use a preprocessor as SASS.
Generic — reset and/or normalize styles, box-sizing definition, etc. It is important to note that this is the first layer of the triangle that generates CSS.
Elements — styling for bare HTML elements (like H1, A, header, footer, …). These come with default styling from the browser so we must to redefine them here.
Objects — class-based selectors which define undecorated design patterns, for example media object known from OOCSS such as list, radio-button. The Daniel Fornell’s codepen https://codepen.io/collection/DmzVOM/ shows you a list of objects designed using this architecture.
Components — specific UI components. The components of our page, for example button, card, concrete-list, etc..
Utilities — utilities and helper classes with ability to override anything which goes before in the triangle.
Real example — This blog!
The best way to understand a new technique or architecture is with an example. So, I’ll show you how I designed the theme of this blog using this architecture.
This blog is developed using the powerful GhostCMS tool which allows us to make our own templates using handlebars in conjunction with CSS. However, to generate the CSS of this topic I have decided to use the ITCSS architecture using SASS which will transpile the code to a final style sheet in CSS that will give the visual aspect of this theme.
Therefore, the first thing we have to see is the directory structure of this project, as shown in the following image.
In this structure you can observe the following parts:
partials: Where are the handlebar files where the different parts of a blog page are structured, such as footer, header, pagination, postlists, sidebar.
assets: Where we find the following subfolders:
css: This is where we structure our style sheets using ITCSS.
font: Different fonts.
img: Images.
js: Required JavaScript libraries such as highlight.js.
/: In the root directory we find the handlebar files corresponding to the index, post, tag and default and some configuration files such as package.json or gulpfile.
Next, we will describe the .scss files of each of the ITCSS layers in order to be able to see what has been included in each of the layers.
Settings
The content of settings.scss file is as follows:
You can see that what this file does is to define the fonts to be used and the color palette that will be used throughout the theme. In this file we mainly have the definition of all the variables that we want to be able to customize later.
The content of tools.scss file is as follows:
In this layer we still do not produce CSS but we are defining tools (functions) that will facilitate repetitive tasks in higher layers. At this level we have defined three functions:
box-size. That allows us to define the size of the boxes using two parameters.
flex. This mixin configures the Flex-Layout rules for the different containers.
postTitle. This mixin generates several CSS rules that are repeated in upper layers but that change their container and some rules are overwritten. For this reason instead of repeating these rules in each one of these rules we have extracted the rules common to a function in order to have a single point of entry for the common code.
Generic
The content of generic.scss file is as follows:
The generic file is quite simple since it only contains a rule that allows us to change the margins and paddings of all the elements of the page, as well as to configure the default typography.
In addition, a rule related to the comment style of the disqus comment service is included in this section. You can see that for the plugin to work properly it is necessary to assign an identifier (id = 'disqus_thread') to the container, but this would totally break the ITCSS architecture. For this, a technique has been used to decrease the specificity of that element up to the attribute level (using the selector of attributes).
Elements
The content of elements.scss file is as follows:
In this layer we configure the styles related to the html and body elements.
Generics
The content of generic.scss file is as follows:
In this layer, the general rules that affect the HTML elements must be structured. Note that there is no class defined but only use of html elements, pseudo-classes and pseudo-elements. In this layer we have used the power of SASS to nest CSS rules and not have such a verbose code. In fact, if we were to see the specificity graph, there would appear peaks that are related to the nesting levels that we are generating, which is normal.
Objects
The content of objects.scss file is as follows:
/** EMPTY **/
At this time of the design of our template we do not have any rule associated with objects since the rules have been divided into elements when they have been very low level and components when they have gained enough semantic value. Therefore, right now we do not have any rules in this section but it is not bad to have it defined since in constant refactorings and improvements of our architecture we can make use of this layer.
Components
The content of components.scss file is as follows:
This layer is of higher level and therefore here we find the rules of greater specificity and it is here where the last touches are adapted. If you look at the layer there are many rules that are defining elements with semantic value for our theme. This is where the final touches are put, taking into account that Web pages are a composition of many components
Utilities
The content of utilities.scss file is as follows:
Finally, the utility layer is reserved as a “catch-all” in our case we have left here animations that could have gone perfectly to lower layers since they are generic but we have preferred to transfer it to utilities.
Run the code and import
Finally, the previous files are imported from a single file that acts as a loader. The content of this file is the following:
To transform the content of SASS to CSS and to have it minified I have created the following npm’s scripts.
Conclusions
In this post I wanted to show you an architecture for stylesheets, called ITCSS. This architecture is fully compatible with other methodologies such as BEM or OOCSS. This architecture is based on organizing the CSS rules in such a way that we control the possible chaos that appears because of the scope of stylesheets is global.
Finally, I’ve shown you how I created the theme of this blog using this architecture, the theme is free, open source on GitHub so that it can be used by anyone who wants to use it on their blog.
More, more and more…
Originally published at www.carloscaballero.io.
Top comments (5)
Great looking and extensive post, very cool!
I've looked into CSS frameworks and strategies a lot and personally I've settled on "functional CSS", so things like Tachyons and Tailwind. Functional CSS sounds weird and counterproductive at first but I really like the simplicity of it.
(I don't mean to hijack your post btw, but thought I'd just add my 2 cts)
Tailwind is great. Personally I prefer the BEM architecture!
Hey Carlos, I've noticed this kind of include:
{{!< default}}. Is this standard Hbs? Or it's a custom implementation or specific to JS?Thanks!
A bit late, but if anyone's interested, this is from a lib called
express-hbsdeveloped and used by the Ghost CMS team, it's a "Express handlebars template engine with inheritance, partials, i18n and async helpers. "has this changed at all since CSS introduced @layers?