What's the fastest way to organize your CSS files?

Question

What's the fastest way to organize your CSS files?

Navigation

#1 by (1 votes)

1

I'm an Information Systems student and I'm setting up an HTML / CSS training for my junior company, and during that assembly I had a question, what is the most effective way to organize CSS files?

In my opinion, there are 3 ways to organize your CSS:

First way: Use a global style

<head>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>

With CSS similar to:

.classe-arquivo1{
    /* css */
}
.classe-arquivo2{
    /* css */
}
.classe-arquivo3{
    /* css */
}

Second way: Link all required CSS files

<head>
    <link rel="stylesheet" type="text/css" href="arquivo1.css">
    <link rel="stylesheet" type="text/css" href="arquivo2.css">
    <link rel="stylesheet" type="text/css" href="arquivo3.css">
</head>

Each file with its respective CSS

Third way: A global file with changes that are repeated on all pages, using import to link other files

<head>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>

With CSS similar to:

@import url("arquivo1.css");
@import url("arquivo2.css");
@import url("arquivo3.css");

.classe-global{
    /* css */
}

That said, my question is: What is the fastest way? And if there is no faster way, in what situations do I use each way quoted above?

This is my first question here in StackOverflow, I do not know if I asked the question correctly, but thank you in advance!

css3

asked by anonymous 19.07.2017 / 19:26

1 answer

block access to a given directory via htacess how to make a controller for the index page with Spring Boot

score 1 · Accepted Answer

Dude I particularly work as follows:

-assets
    -js
    -img
    -css
        main.css => css global, que será utilizado pela aplicação por completo
        variables.css => Aqui vem as variáveis, caso esteja utilizando SASS ou LESS.
        index.css => aqui vem o css que deve ser importado somente pela index.html
        page2.css => aqui vem o css que deve ser importado somente pela page2.html

index.html
    <head>
        <link rel="stylesheet" type="text/css" href="main.css"> // o main pode ser importado direto na index.css e page2.css se for de sua preferencia
        <link rel="stylesheet" type="text/css" href="index.css">
    </head>

page2.html
    <head>
        <link rel="stylesheet" type="text/css" href="main.css">
        <link rel="stylesheet" type="text/css" href="page2.css">
    </head>

Remembering that this is particular to each project and individual.