My CSS file is too large and it is difficult to keep readability

An alternative, which is what I use, would be SASS .

Although it has some different features of css , the logic is the same, you only gain from using SASS (at least that's my opinion).

  

It's getting too complicated to do maintenance

SASS will be a great tool for improving file maintenance. One of the biggest gains is reusing code.

What struck me most was the possibility of structuring the css cascade in a more organized and intuitive way. 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, let's 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 sass you will see the properties more in depth), thus:

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

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

Both will be compiled to css like this:

.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 as .sass by changing just syntax . It is more a matter of preference than of gain / loss in using one or the other.

With SASS you get a much better reuse of code and can also structure your files better. 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

So, every .scss file I own has + - 100 lines and the general compiled file usually stays around 20-30kb for a project that previously had 4-5 thousand lines of css gross. / p>

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

This part I leave to you, as it is very much preferred which one to use. I particularly use grunt , since I already used it 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 have helped.