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

Asked

Viewed 306 times

1

I am a student of Information Systems and I am putting together an HTML/CSS training for my junior company, and during this assembly came to me a question, what is the most effective way to organize CSS files?

In my view, 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 repeat 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 being said, my question is: What is the fastest way? And if there is no faster way, in which situations I use each way quoted above?

This is my first question here at Stackoverflow, I don’t know if I asked the question correctly, but thanks in advance!

css3

  • What parameters should be analysed to define a better?

  • Performance @Andersoncarloswoss

  • Consider minifying the files, so you only have 1 css with everything. And organize everything with SASS. Study SASS :)

  • Exact using the Concat+Sass vc can minify all css to a single file

1 answer

1


Man I particularly work this way: 

-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.

  • Thank you! I was using the third way I quoted the question in my personal projects, but I was annoyed because I was pulling all the CSS files from the site on every page, I’m going to start using this way you commented!

  • Nice to have helped, I recommend using SASS helps a lot to structure the CSS in a more productive way, and you can still minify the CSS file for a gain in performance(This is super important in mobile development) => https://github.com/wDrik/project-Gulp-Sass

Browser other questions tagged css3

You are not signed in. Login or sign up in order to post.