My CSS file is very large and it is difficult to maintain readability

Question

My CSS File is close to 10,000 lines. It’s getting too complicated to maintain this file. in its Development version the file "weighs" 170kb and in its minified version, "only" 128kb

Some points to consider:

• Avoid unnecessary network traffic
• Avoid import

there is some technique or tool that facilitates the maintenance of this type of file and more importantly, at this scale?

Answer 1

An alternative, which is the one I use, would be to use SASS.

Despite having some different characteristics of css, the logic is the same, you just come to gain from using the SASS (at least that is my opinion).

It’s getting too complicated to maintain

The SASS will be a great tool to improve file maintenance. One of the biggest gains is code reuse.

What struck me most was the possibility of structuring the css cascade mode more.. organized and intuitive. Assuming you have this code:

.navbar ul {
    margin:0;
}
.navbar ul li {
    padding:0 8px;
}

You can simplify and write like this:

.navbar {
    ul {
        margin:0;
        li {
            padding:0 8px;
        }
    }
}

More examples, say you have this code css:

.classe {
    background: red;
    width: 180px;
}

And then you want to use this same piece of code in another class. Instead of rewriting, you can include, with a @include, using a @mixin or @extend (reading more about the sass you will see the properties more in depth), getting like this:

@mixin meuEstilo {
    background: red;
    width: 180px;
}

.classe {
    @include meuEstilo
}
.outra-classe {
    @include meuEstilo
}

Both will be compiled for css thus:

.classe {
    background: red;
    width: 180px;
}
.outra-classe {
    background: red;
    width: 180px;
}

In addition, you can also work with variables, for example:

@mixin animacao($valor) {
    transform: translateY($valor);
}

.classe {
    @include animacao(50%);
}
.outra-classe {
    @include animacao(80px);
}

//Compilado para
.classe {
    transform: translateY(50%);
}
.outra-classe {
    transform: translateY(80px);
}

Note: Eventually you will see the extension .scss it follows the same logic of .sass changing only the syntax. It is more a matter of preference than gain/loss in using one or the other.

With SASS You get a much better reuse of code and you also get better structure of your files. I, for example, use a structure similar to this:

-sass
    /base //arquivos base, como reset, normalize, etc.
        -reset.scss
        -normalize.scss
    /variables //arquivo de variaveis, como tempo de animação, cor principal, etc.
        -cores.scss
        -tempo.scss
        -font.scss
    /ui //elementos comuns, como forms, buttons, etc..
        -forms.scss
        -buttons.scss
        -footer.scss
        -navbar.scss
    /pages //páginas individuais, como noticias, contato, produto
        -noticia.scss
        -servico.scss
        -contato.scss

Thus, each file .scss which I own has +- 100 lines and the general compiled file is usually around 20-30kb for a project that previously had 4-5 thousand lines of css brute.

---

To compile your SASS for CSS, you will need some compiler, be it a software or, the most common used, gulp or grunt.

This part I leave to your discretion as it is much preferred which one to use. I particularly use grunt, as it was already used in other areas of my projects. But keep in mind that you will need to use a processor to compile your Sass in css.

I hope I’ve helped.