How I use ITCSS to organize my SASS styles
Tags: itcss, css, webdev, sass
Published: 2019-09-30 17:19:00

<h3>Content</h3>
⒈<a href="#1">Introduction</a>
⒉<a href="#2">What is ITCSS</a>
⒊<a href="#3">My own ITCSS version for SASS</a>
⒋<a href="#4">My last words</a>

<h4 id="1">Hello, users!</h4>

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

Now, first of all,

<h1 id="2">What is ITCSS?</h1>

CSS architecture has always been a <b>pain</b>. 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 <b>lighter</b> CSS files... But, is that enough?

<b>ITCSS</b> 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 <a href="https://www.xfive.co/blog/itcss-scalable-maintainable-css-architecture/">here</a> and <a href="https://blog.codeminer42.com/how-to-organize-your-styles-with-itcss-3787cbc6dcbf">here</a>.

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

▪ <b>Settings</b> folder
  ⤷ Settings file
▪ <b>Tools</b> folder
  ⤷ Tools file
▪ <b>Generic</b> folder
  ⤷ Generic file
▪ <b>Elements</b> folder
  ⤷ Elements file
▪ <b>Objects</b> folder
  ⤷ Objects file
▪ <b>Components</b> folder
  ⤷ Components file
▪ <b>Utilities</b> folder
  ⤷ Utilities file


❒ A <b>Settings</b> file: For preprocessor's variables, such as custom fonts, colors, etc.
```scss
// Settings file
$yellow: #fcba03;
$space: 15px;
```
❒ A <b>Tools</b> file: Mixins and functions.
```scss
// Tools file
@mixin highlight-text{
   font-weight: bolder;
}
```
❒ A <b>Generic</b> file: CSS reset styles. <b>This should be the first file generating a CSS output</b>.
```scss
// Place your reset/normalize styles here...
```
❒ An <b>Elements</b> file: Define our own HTML styles (to h1, h2, a, etc.).
```scss
// Elements file
a {
   color: $yellow;
}
```
❒ An <b>Objects</b> 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.
```scss
// Objects file
.menu_items{
   padding: $space;
}
```
❒ A <b>Components</b> file: Decorated styles for our UI specific components.
```scss
// Components file
.menu{
   @include menu_items;
   background-color: $yellow;
}
```
❒ An <b>Utilities</b> file: Where we'll keep specific classes that have some functionality as for example a *.hide* or *.show* class.
```scss
// 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 

<h1 id="3">How I use ITCSS in my SASS styles</h1>

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

<b>What are "partials" in SASS?</b>

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
▪ <b>main</b>.scss

❒ A <b>_Palette</b> file: Where I keep all my custom colors, including the brand colors, primary and secondary palettes that I may use.
```scss
// _palette.scss file
$amazing-orange: f45905;
$light-pink: f9d5bb;
```
❒ A <b>_Fonts</b> file: Where I keep all my custom fonts.
```scss
// _fonts.scss file
@import url('https://fonts.googleapis.com/css?family=Roboto&display=swap');
$customfont: 'Roboto', sans-serif;
```
❒ A <b>_Responsive</b> file: Where I keep all my responsive breakpoints.
```scss
// _responsive.scss file
@mixin xs-screen {
	@media only screen and (max-width: 480px){
		@content;
}
}
...
```
❒ An <b>_Auxiliar</b> file: Other variables that doesn't fit in colors, fonts, etc., like sizes or text modifications.
```scss
// _auxiliar.scss file
$bold-style: bold;
$space: 15px;
```
❒ A <b>_Mixins</b> file: Here I create all the styles I'll be using for every element in my project. I usually divide into specific or general.
```scss
// _mixins.scss file
@mixin highlight-text {
   color: $amazing-orange;
}
@mixin custom-padding {
   padding: $space;
}
```
❒ A <b>_Reset</b> file: I normally don't use any reset, so I mostly use this file for creating my custom HTML styles.
```scss
// _reset.scss file
* {
   margin: 0;
   padding: 0;
}
a {
   color: $amazing-orange;
}
```
❒ An <b>_Utilities</b> file: This is optional. I just create it in case I need functional classes.
```scss
// _utilities.scss file
.hide {
   display: none;
}
.show {
   display: block;
}

```
❒ A <b>Main</b> file, <b>this is not a partial</b>: Here I declare all my imports and use mixins inside class selectors.
```scss
// 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 <b>organized</b>.

In addition, I also document my files and write lots of <b>comments</b> for myself and divide my own styles by <b>specific</b>, <b>general</b>, <b>text</b>, <b>images</b>, 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.

<h1 id="4">My last words</h1>

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

Feel free to use any version that suits your needs, or <b>create your own</b>!

Long life and keep coding, see you around 💻!