Content

⒈Introduction
⒉What is ITCSS
⒊My own ITCSS version for SASS
⒋My last words

Hello, users!

This time I'm willing to talk about ITCSS and how I use my own version of ITCSS to organize my SASS files.

Now, first of all,

What is ITCSS?

CSS architecture has always been a pain. Even if you try to use multiple files, you'll always repeat styles or forget from one day to another exactly how you did x or y.

First, SASS came to save the day and we started being able to create variables to store those values repeated through our code. We also have functions and loops that let us create our CSS architecture faster and easier, and that also means lighter CSS files... But, is that enough?

ITCSS wants to help you organizing your CSS without dying in the process. I'll explain it in an easy way, but you can read specifically about it here and here.

Basically, ITCSS suggests that you should go and organize your CSS in folders/files named as follows:

▪ Settings folder
⤷ Settings file
▪ Tools folder
⤷ Tools file
▪ Generic folder
⤷ Generic file
▪ Elements folder
⤷ Elements file
▪ Objects folder
⤷ Objects file
▪ Components folder
⤷ Components file
▪ Utilities folder
⤷ Utilities file

❒ A Settings file: For preprocessor's variables, such as custom fonts, colors, etc.

// Settings file
$yellow: #fcba03;
$space: 15px;

❒ A Tools file: Mixins and functions.

// Tools file
@mixin highlight-text{
   font-weight: bolder;
}

❒ A Generic file: CSS reset styles. This should be the first file generating a CSS output.

// Place your reset/normalize styles here...

❒ An Elements file: Define our own HTML styles (to h1, h2, a, etc.).

// Elements file
a {
   color: $yellow;
}

❒ An Objects file: This is a very confusing file. It's supposed to keep undecorated elements for the objects in our project, for example, a .menu class with only padding, width and height, but any color or fancy style.

// Objects file
.menu_items{
   padding: $space;
}

❒ A Components file: Decorated styles for our UI specific components.

// Components file
.menu{
   @include menu_items;
   background-color: $yellow;
}

❒ An Utilities file: Where we'll keep specific classes that have some functionality as for example a .hide or .show class.

// Utilities file
.hide {
   display: none;
}

As you can see, ITCSS generates a really scalable and maintainable CSS architecture for your projects...

Now, you can use it like that or customize it as for your needs. In this case, I'll explain

How I use ITCSS in my SASS styles

Following the original ITCSS architecture, I created my own structure using SASS partials.

What are "partials" in SASS?

These 'partials' are files that start with a "_" in their name. Preprocessors don't compile them into the CSS output, so they can be defined as "read-only" files that preprocessors can use.

The architecture I use is as follows:

▪ _palette.scss
▪ _fonts.scss
▪ _responsive.scss
▪ _auxiliar.scss
▪ _mixins.scss
▪ _reset.scss
▪ _utilities.scss
▪ main.scss

❒ A _Palette file: Where I keep all my custom colors, including the brand colors, primary and secondary palettes that I may use.

// _palette.scss file
$amazing-orange: f45905;
$light-pink: f9d5bb;

❒ A _Fonts file: Where I keep all my custom fonts.

// _fonts.scss file
@import url('https://fonts.googleapis.com/css?family=Roboto&display=swap');
$customfont: 'Roboto', sans-serif;

❒ A _Responsive file: Where I keep all my responsive breakpoints.

// _responsive.scss file
@mixin xs-screen {
    @media only screen and (max-width: 480px){
        @content;
}
}
...

❒ An _Auxiliar file: Other variables that doesn't fit in colors, fonts, etc., like sizes or text modifications.

// _auxiliar.scss file
$bold-style: bold;
$space: 15px;

❒ A _Mixins file: Here I create all the styles I'll be using for every element in my project. I usually divide into specific or general.

// _mixins.scss file
@mixin highlight-text {
   color: $amazing-orange;
}
@mixin custom-padding {
   padding: $space;
}

❒ A _Reset file: I normally don't use any reset, so I mostly use this file for creating my custom HTML styles.

// _reset.scss file
* {
   margin: 0;
   padding: 0;
}
a {
   color: $amazing-orange;
}

❒ An _Utilities file: This is optional. I just create it in case I need functional classes.

// _utilities.scss file
.hide {
   display: none;
}
.show {
   display: block;
}

❒ A Main file, this is not a partial: Here I declare all my imports and use mixins inside class selectors.

// main.scss file
@import "fonts", "palette", "responsive", "mixins", "reset";
.menu_items {
   @include custom-padding;
   @include highlight-text;
}

Of course, the "main.scss" file generates the CSS output. This is the way I try to keep my styles organized.

In addition, I also document my files and write lots of comments for myself and divide my own styles by specific, general, text, images, etc., so I can find them easily.

There isn't any trick or magic, if you use the same structure over and over again you won't get lost, ever. Anyone who sees your structure should understand what's going on at first sight too.

My last words

As you can see, ITCSS is very customizable. I found it really useful specially when I was trying to learn how to create maintainable and clean code, and I rapidly created my own version of it, since we all code our way.

Feel free to use any version that suits your needs, or create your own!

Long life and keep coding, see you around 💻!