16

estou desenvolvendo um site e me veio uma dúvida quanto à uma situação um tanto chata...

Quando vocês estão desenvolvendo um projeto pra Web vocês utilizam apenas uma folha de estilo para o site todo ou vocês fazem uma folha de estilo para cada página?

Por que todo o código css em apenas uma folha de estilo fica um pouco confuso e muito cansativo de encontrar elementos.

2
  • 1
    Boa pergunta sempre tive dúvidas de como organizar os arquivos em .css e .js em desenvolvimento.
    – Ricardo
    4/06/2015 às 14:44
  • 1
    use sass ou less e tenha as vantagens de cada uma das alternativas, além de pode gerar css minimizado
    – igrossiter
    10/06/2015 às 19:50

4 Respostas 4

6

Não existe uma resposta correta e é muito difícil responder uma pergunta desse tipo sem opinar. Primeiro, falando da organização de arquivos:

Em desenvolvimento

Em desenvolvimento utilizo vários arquivos CSS (na verdade escrevo com Less), separando-os o máximo possível para que cada arquivo tenha responsabilidades específicas. Por exemplo, um arquivo colors.less somente para definir as cores que serão usadas no documento html, nada além disso. Embora o output seja um único arquivo, por organização manter os arquivos separados por responsabilidades facilita manutenções futuras.

Ainda que não utilize pré-processadores, nada o impede de criar vários arquivos .css (também separando-os por responsabilidades específicas) e fazer uso de uma ferramenta como Gruntjs para gerar um único arquivo .css.

Em produção

Em produção uso um único arquivo, a priori para evitar que sejam feitas diversas requisições para o download dos recursos.

Se parar para pensar, ter arquivos de estilização separados pode fazer sentido em desenvolvimento por conta de organização, seja ela própria ou determinadas para o projeto. Mas em produção ter vários arquivos é um ponto contra principalmente tratando-se de performance. Quando a página está sendo renderizada pouco importa se o arquivo .css está bem indentado, comentado, se você quebra linha depois de abri chaves... mas requisitar vários arquivos para montar a página pode ser custoso.

Agora sim, respondendo a pergunta...

Uma para todas as páginas ou uma para cada página?

E a resposta é... depende!

Considere que você tem um arquivo .css "minificado" de 256KB feito para um sistema web, lá estão todas as regras que constrói a página que o usuário verá após realizar o login. Mas vamos supor que a página de acesso ao sistema seja simples, tendo somente dois inputs (nome de usuário e senha) e um botão para enviar os dados do formulário.

Nesse cenário, se o mesmo arquivo (de 265KB) for usado pela página de login, quando o usuário acessá-la ele terá que baixar um arquivo pesado, contendo diversas regras que seriam descartadas por não serem úteis na estilização do formulário e da página em si.

Se o acesso vier de um dispositivo móvel e no Brasil, isso pode ser ainda pior — digo isso por conta dos planos de Internet que as operadoras possuem. Dependendo da frequência de acesso, algumas horas ou dias acessando seu sistema seria uma "ajuda" em tanto para acabar com a franquia de internet do usuário.

Então, criar um arquivo à parte para tratar somente da página de login seria mais viável, baixar 4KB ao invés de 256KB seria um ganho enorme, não!?

O seu arquivo CSS precisa ter regras que serão usadas na renderização da página, por isso que diversos frameworks dão a possibilidade de customizar a construção do código somente com o que será utilizado, um exemplo é o Twitter Bootstrap.

É o mesmo caso para os resets, não é porque as "boas práticas" recomendam que necessariamente você precisa fazer uso. Se uma regra nunca será aplicada no seu documento HTML, não há porque ela existir no seu CSS.

0
4

Sempre que estou a desenvolver, trabalho em apenas uma folha de estilo mesmo, facilita os backups e os vínculos com o css e as páginas. Em compensação, há muito informação e por isso deixo sempre discriminado na folha, do que se trata aquela TAG/ID, o que aquele elemento em si faz em cada página.

3

No SO gringo tem uma discussão bem interessante sobre o tópico.

Eu, particularmente, uso a seguinte técnica: Tenho um arquivo que sempre vai estar nos meus projetos que é o reset.css. Depois disso, eu separo algumas coisas em arquivos a parte, que eu sei que são coisas que eu não vou lidar com tanta frequência, como tipografia, grids, mixins e cores (esses dois últimos são só possíveis graças ao SASS).

Uma vez tendo essa base pronta, eu importo tudo isso pra um arquivo final, no qual eu escrevo o restante do código.

Essa pergunta vai ter um range de resposta bem alto, uma vez que existem técnicas e técnicas de como escrever e otimizar o CSS. Nessa resposta, falei um pouco mais a fundo sobre boas práticas e algumas coisas que considero importante.

2

Para a parte geral, uso o padrão, ou seja, uma única folha de estilo para a maior parte do site, já outras partes pequenas, como o @re22 mencionou, você pode definir uns padrões para algo que quer separar e deixar mais organizado, mas terá mais requisições para fazer, o que pode impactar em uma pequena baixa de desempenho do teu site. Mas é bem interessante separar alguns arquivos css, como box's, etc.

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 .