Organização

Código bom é fácil de encontrar e código fácil de encontrar é bem organizado. E isso significa que queremos o nosso CSS bem organizado. Há, de modo geral, duas abordagens para escolher, as quais discutiremos neste capítulo.

1. CSS em um único diretório

Esta abordagem coloca o CSS em um único diretório:

/caminho/para/css
	/vendor
		algumArquivoDeTerceiros.css
		outroArquivoDeTerceiros.css
	/seuApp
		algo.css
		global.css
		carrinho.css

Notas

2. CSS em um diretório de módulo

Esta abordagem coloca os CSS específicos de módulos em seus próprios diretórios:

/global
	/css
		reset.css
		global.css
		etc.css
/carrinho
	/controllers
	...
	/templates
		carrinho.html
		carrinhoVazio.html
	/partials
		cabecalhoCarrino.html
		resumoCarrinho.html
	/js
		...
	/css
		carrinho.css
/header
	...

Notas

O problema do limite de 31 arquivos CSS

Qualquer que seja a abordagem que você use, tenha cuidado com o limite de 31 arquivos CSS encontrado em versões do Internet Explorer. Internet Explorer 9, por exemplo, ignora estilos armazenados no 32º (ou 33º etc) arquivo.

Para produção, está tudo bem, porque devemos agrupar os arquivos CSS para reduzir requisições HTTP. Mas, para desenvolvimento local, é melhor trabalhar com arquivos-fonte para facilitar o debugging. E é em navegadores legados onde os bugs geralmente aparecem.

Se você tem uma etapa de compilação para o desenvolvimento local—como no caso do uso de um pré-processador CSS—você não precisa se preocupar. O pré-processador irá agrupar os arquivos.

Se você não tem uma etapa de compilação para o desenvolvimento local—porque é mais fácil debugar os arquivos-fonte desta forma—então você pode querer remediar isto com uma das duas abordagens:

1. Adicionar uma opção para concatenar o CSS localmente

Ao fazer isso, você será capaz de imitar a produção e debug do CSS desconsiderando navegadores antigos.

2. Usar menos de 32 arquivos CSS

Como você provavelmente terá mais de 31 módulos, você não pode organizar seu CSS por módulo. Ao invés disso, você terá que colocar vários módulos dentro do mesmo arquivo CSS.

Conclusão

Neste capítulo, discutimos duas formas de organizar o CSS. Qualquer que seja a abordagem que nós utilizemos, temos que ter cuidado com o problema do limite de 31 arquivos CSS porque faz com que o debugging do CSS seja mais difícil nos navegadores que causam mais problemas.

Capítulos

  1. Introdução
  2. Semântica
  3. Reuso
  4. IDs
  5. Convenções
  6. Módulos
  7. Estados
  8. Modificadores
  9. Versionamento
  10. Javascript
  11. Organização
  12. FAQs