Modulando o CSS

Quando trabalhamos com Padrões Web, trabalhamos com três camadas principais:
Informação, formatação e comportamento. O HTML controla a informação. O CSS manipula a
formatação e posições na tela. E o Javascript / Ajax cuida do comportamento dos elementos.

Autor: Diego Eis

Fonte: Tableless

Vamos nos focar um bocado na segunda camada, o CSS. O CSS é uma linguagem de
formatação é extremamente flexível.

O CSS, por ser uma linguagem com uma sintaxe fácil, muita gente coloca a mão
durante o processo de desenvolvimento. E como seu código só tende a crescer, temos que ter
um cuidado especial na organização dos arquivos.

Há várias maneiras de organizar os arquivos CSS de um site. Há sites que não

precisarão de vários arquivos, bastando apenas um. Para estes devemos apenas ter cuidado
com o código. Deixando-o simples e legível. Sempre tomando cuidado com a quantidade de
linhas e código desnecessário. A estrutura seria mais ou menos essa:
 Grandes portais e sites com uma visitação extrema, podem querer otimizar esse
código. Isso é considerável apenas para estas exceções. O preço da banda é alto e qualquer
1Kb que economizarem será um caminhão de dinheiro que economizarão. Para sites
pequenos, e até mesmo alguns sites de médio porte, na minha opinião, não é necessário
haver uma “otimização de código“.

Se você perceber que as páginas são muito diferentes uma das outras e que o código
está aumentando descontroladamente, é muito aconselhável você dividir o código CSS para
cada padrão de página. Isso ajuda a controlar o tamanho do código e permite que você
modifique uma parte do site sem interferir em outras páginas.

Essa opção é ótima para um site que tenha várias seções e cada seção tem um design
diferente. Há um inconveniente: o código dentro do HEAD pode ficar enorme com tantas tags
de LINK importando os arquivos de formatação. Para mudar isso, você pode fazer duas coisas:
a primeira é fazer um arquivo CSS que importe todos os outros arquivos e linkar no HEAD
apenas este arquivo.
 Com essa primeira opção, o browser ainda carregará todos os arquivos CSS de uma
vez. Pode ser que o carregamento fique pesado. Por isso, há uma segunda opção que é
conversar com seu programador para que ele faça uma mágica onde o site carregue apenas o
arquivo CSS relativo àquela página. Quando visitamos a página interna, não é necessário
carregar o arquivo CSS da HOME, por exemplo. Essa mágica preveniria isso.

Outras pessoas preferem separar todo o código CSS em dois arquivos. Um arquivo
conterá apenas informações de cor e fonte. E no outro arquivo haverá apenas informações
sobre a estrutura do site: largura, altura, tamanho, margin, padding, position, float, etc.

Essa maneira é ótima para caso você quiser dar ao usuário opções de cores. O
programador pode fazer um javascript maneiro que permita o usuário clicar e mudar a cor. O
designer prepara vários CSS com regras de cores diferentes. A estrutura pode continuar a
mesma, mas a paleta de cores muda. A mesma coisa pode-se fazer com a estrutura. A cor
continua, mas a estrutura pode ser alterada de acordo com a opção do usuário.
 Essas seriam as formas mais comuns de organizar seu CSS. Perca um bocado de tempo
planejando essa estratégia. Se o site é muito grande, esse tipo de planejamento prévio pode
salvar o projeto. Vale a pena a equipe definir padrões desenvolvimento. O CSS é um dos
fatores definitivos para manutenção, velocidade e compatibilidade do site. Um CSS fora de
controle é um pesadelo que você não quer ter.

Autor: Diego Eis

Fonte: Tableless