No post anterior comecei uma série de dicas sobre estruturação do CSS, inicialmente apresentando a correta utilização dos seletores. Neste artigo, veremos algumas estratégias para separação de estilos em arquivos e organização das regras de estilos dentro de um arquivo.
Antes de mais nada, vale destacar que a utilização de estilos inline (através do atributo HTML "style") e embutidas no HTML (através da tag <style>) devem ser evitadas. Separar os estilos do documento traz vários benefícios, como a melhoria da legibilidade do documento, facilidade de manutenção do layout, além de redução do tráfego de dados (considerando que estilos possam ficar em cache), etc. Neste sentido, as dicas apresentadas neste artigo trata apenas de estilos importados via a tag <link rel="stylesheet" type="text/css" href="..." >
Separação de Estilos por Mídia
A linguagem CSS permite que sejam aplicados estilos a diferentes tipos de mídia. Por exemplo, criar uma folha de estilos para renderizar o documento em dispositivos móveis.
Embora exista uma forma de separação das mídias dentro de um único arquivo (através de um bloco @media ... { ... }), é útil que estes estilos fiquem em arquivos diferentes. O motivo é para facilitar a manutenção destes arquivos, facilidade de localização.
É importante lembrar, nestes casos, de especificar o tipo de mídia no momento da importação, através da tag <link>:
<link rel="stylesheet" type="text/css" media="screen" href="..." />
Separação de Estilos por Especificidade
Separar estilos mais gerais dos mais específicos em arquivos diferentes é importante para manutenção e, principalmente, para carregar apenas as regras de estilos necessárias, tornando a renderização mais rápida, já que o navegador terá menos regras para avaliar.
Em geral, é útil criar uma folha de estilos que é utilizada por todo o site. Nele, devem ser especificadas apenas regras gerais como o layout de cabeçalhos, links, parágrafos e, caso existam elementos presentes em todas páginas, a especificação destes elementos (por exemplo, o topo e o rodapé da página). Além disso, o arquivo geral deve ter as regras de classes globais, por exemplo, classes como "erro", "quadro", "atencao", "invisivel", etc. Estas classes devem ser o mais consistentes possíveis, pois serão aplicadas em todo site. Não abuse da quantidade de classes, pois, no futuro, provavelmente ocasionará em muitas classes não utilizadas ou pouquíssimo utilizadas.
Nos arquivos de estilos mais específicos (por exemplo, "estilos da página de log-in"), devem ficar as regras mais específicas. Uma boa prática é especificar um ID para a tag <body> do documento e todas as regras específicas serem dependentes deste ID. Por exemplo, se colocamos o ID "pagina_login" no <body> da página de login, todas as regras específicas da página de login ficariam no formato:
/* Formulario da pagina de log-in */
body#pagina_login #form_login {
...
}
/* Paragrafos da pagina de log-in */
body#pagina_login p {
...
}
Separação de Estilos por Responsabilidade
A separação de estilos em arquivos diferentes de acordo com a responsabilidade visa melhorar o reaproveitamento de alguns tipos de propriedades. Um exemplo de separação de responsabilidades é por cores, textos/fontes, tamanhos/posicionamentos e outros estilos.
Vamos a um exemplo prático. Suponha que você quer que seus formulários e tabelas tenham cor de fundo "#CCCCCC", mas que formulários terão largura "400px" e tabelas terão largura "auto". Em uma abordagem convencional, é comum que se agrupe as regras de formulário e que se agrupe as regras de tabelas assim:
/* Arquivo estilos.css */
form {
background-color: #CCCCCC;
width: 400px;
}
table {
background-color: #CCCCCC;
width: auto;
}
Note que a cor se repetiu em duas partes do arquivo. Caso seja de interesse mudar uma cor, precisaria ir para outro ponto do arquivo para mudar a outra. Em uma abordagem em que as cores e tamanhos são definidos em arquivos diferentes, os arquivos ficariam assim:
/* Arquivo cores.css */
form,
table {
background-color: #CCCCCC;
}
/* Arquivo tamanhos.css */
form {
width: 400px;
}
table {
width: auto;
}
Esta abordagem pode ser feita em arquivos diferentes, mas também pode ser apenas uma convenção dentro do arquivo. Por exemplo:
/** * Cabecalho do arquivo * @author ... */ /* Especificacao de cores */ ... /* Especificacao de tamanhos/posicionamentos */ ... /* Especificacao de textos/fontes */ ... /* Especificacao de outros estilos */ ...
Caso você costuma utilizar as propriedades "border", "background" ou "font", pode ser útil conhecer as sub-propriedades, tais como "border-color", "border-width", "border-style", "border-right-color", "border-right-width", "border-right-style", "background-color", "background-image", "background-position", "background-repeat".
A separação apresentada aqui é apenas um exemplo. Você pode estudar a forma que melhor lhe atenda, de modo que a nova organização lhe ajude e não atrapalhe.
Outras Convenções
Além das dicas apresentadas neste post, existem várias outras convenções que podem auxiliar. Algumas delas são:
- Colocar as propriedades em ordem alfabética, dentro de um bloco de regras.
- Padronizar os nomes dos estilos de acordo com a midia, especificidade, ou algo útil.
- Organizar as regras organizadas por tipo de seletor (inicialmente com as mais gerais e por fim as mais específicas).
Caso você não concorde com algumas destas dicas, comente abaixo. Caso tenha achado algo interessante, comente também e deixe sua contribuição.
1 comentário
Seu blog é bem didático e de fácil entendimento, são excelentes dicas. Sucesso.
Postar um comentário
Nota: fique a vontade para expressar o que achou deste artigo ou do blog.
Dica: para acompanhar as respostas, acesse com uma conta do Google e marque a opção "Notifique-me".
Atenção: o blogger não permite inclusão de tags nos comentários, por isso, use algum site externo para postar seu código com dúvidas e deixe o link aqui. Exemplo: pastebin.com