2

Sou estudante de Sistemas de Informação e estou montando um treinamento de HTML/CSS para a minha empresa júnior, e durante essa montagem me veio uma dúvida, qual a maneira mais efetiva de organizar os arquivos de CSS?

Ao meu ver, existem 3 maneiras de organizar o seu CSS:

Primeira maneira: Usar um style global

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

Com o CSS parecido com:

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

Segunda maneira: Linkar todos os arquivos CSS necessários

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

Cada arquivo com seu respectivo CSS

Terceira maneira: Um arquivo global com mudanças que se repetem em todas as páginas, usando o import para linkar outros arquivos

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

Com o CSS parecido com:

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

.classe-global{
    /* css */
}

Dito isso, a minha duvida é: Qual a maneira mais rápida? E caso não haja modo mais rápido, em quais situações eu uso cada maneira citada acima?

Essa é a minha primeira pergunta aqui no StackOverflow, não sei se fiz a pergunta de modo correto, mas desde já agradeço!

4
  • Quais deverão ser os parâmetros a se analisar para definir um melhor?
    – Woss
    Commented 19/07/2017 às 17:31
  • Performance @AndersonCarlosWoss
    – Brito
    Commented 19/07/2017 às 17:32
  • Considere minificar os arquivos, assim terá somente 1 css com tudo. E organize tudo com o SASS. Estude SASS :) Commented 19/07/2017 às 17:54
  • Exato utilizando o concat+sass vc consegue minificar todo o css para um único arquivo
    – wDrik
    Commented 19/07/2017 às 18:01

1 Resposta 1

2

Cara eu particularmente trabalho da seguinte forma:

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

Lembrando que isso é particular para cada projeto e individuo.

2
  • Obrigado! Eu estava utilizando a terceira maneira que citei na pergunta nos meus projetos pessoais, mas fiquei incomodado pois eu estava puxando todos os arquivos CSS do site em todas as páginas, vou começar a usar esse modo que você comentou!
    – Brito
    Commented 19/07/2017 às 18:00
  • Legal que bom ter ajudado, Recomendo você utilizar o SASS ajuda bastante a estruturar o CSS de uma forma mais produtiva, e vc ainda consegue minificar o arquivo CSS para ter um ganho no desempenho(Isso é super importante no desenvolvimento mobile) => github.com/wDrik/project-gulp-sass
    – wDrik
    Commented 19/07/2017 às 18:05

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .