Reaproveitamento de Códigos Com CSS Genérico

CSS genérico não é nenhum tipo de estilização de páginas HTML milagroso que fará tudo por você. É apenas uma técnica de se escrever o código CSS de uma forma que se possa reutilizar seus estilos em mais de um lugar sem ter que ficar criando seletores para cada coisa que inserimos na estrutura ou no conteúdo de um HTML.

Quais as diferenças entre o código CSS genérico para o código CSS específico?

Basicamente a diferença é o nível de busca de uma classe ou id que específicamos ao criarmos um novo seletor de estilo, por exemplo, se criarmos um novo estilo para uma div com a propriedade id “topo”, ela servirá apenas para essa div, pois na linguagem HTML o certo é se ter ids únicos no seu código fonte. Isso é ótimo para manternos organizada a estrutura de nosso HTML e além de ajudar em muito a manipulação de eventos na tela com ajuda do javascript, principalmente quando utilizamos frameworks como jQuery, Prototype, entre outros. Mas dependendo da profundidade e da precisão que usarmos para criar um seletor CSS isso pode acabar nos atrapalhando ao invés de nos ajudar. Por exemplo:

#topo{
    background-color: #f0f0f0;
    border: 1px solid #cccccc;
    color: #000000;
    padding:10px;
}

#topo #search #submit{
    background-color: #ff0000;
    border: 1px solid #dd0000;
    color: #ffffff;
    display: block;
    float: left;
    text-decoration: none;
    width: 100px;
}

Estilizamos basicamnete a div com a propriedade id “topo” e dentro dela nosso seletor vai buscar por outra div com o id “search” e só quando nosso seletor encontrar um input do tipo submit que contenha a propriedade id “submit” então ela liberará o estilo, se é que se pode dizer isso.

Se analizarmos bem, geralmente um site tem mais que um input do tipo submit, pois em sua maioria os sites costumam ter uma um formulário de cadastro, e consequentemente uma área de login, um formulário de contato, entre outros. E na em sua maioria costuma manter um mesmo padrão visual para manter a identidade do site e facilitar a utilização do mesmo. Claro existe a possibilidade de concatenarmos seletores com virgulas, por exemplo:

#topo #search #submit,
#conteudo #contato #submit,
#coluna_esquerda #login #submit{
    background-color: #ff0000;
    border: 1px solid #dd0000;
    color: #ffffff;
    display: block;
    float: left;
    text-decoration: none;
    width: 100px;
}

Isso até que funcionaria bacana em um site pequeno, que não tivesse manutenção contante, porém se toda vez que precisarmos inserir algum conteúdo tivermos que voltar aqui para a concatenação de um novo seletor é bem capaz do código acabar mal feito e uma hora ou outra, acabarmos duplicando boa parte desse estilo sem necessidade.

Resolvendo os problemas com o CSS genérico

Para resolvermos isso podemos simplesmente tranformar um seletor específico como esse em uma classe, como segue abaixo:

.submit_padrao{
    background-color: #ff0000;
    border: 1px solid #dd0000;
    color: #ffffff;
    display: block;
    float: left;
    text-decoration: none;
    width: 100px;
}

Nosso html quando de um input tipo submit ficaria assim:

<input type="submit" name="enviar" value="Enviar" id="submit_contato" class="submit_padrao" />

<input type="submit" name="enviar" value="Login" id="submit_login" class="submit_padrao" />

<input type="submit" name="enviar" value="Buscar" id="submit_busca" class="submit_padrao" />

Fica muito mais fácil a manipulação de estilos, do HTML e de controlá-los com o Javascript. Nosso arquivo CSS mesmo fica muito mais limpo e ainda por cima, conseguimos manter o mesmo controle sobre nosso visual.

E quando utilizamos esse tal de CSS genérico?

A regra é: sempre que for possível!
O ideal é identificarmos os estilos que se repetirão ao longo da produção de um site. Como o exemplo acima, existem várias partes do site que podem ser repetidas, por isso, sempre vamos criar primeiro seletores genéricos e conforme a necessidade criarmos seletores específicos.

Para entendermos melhor isso, vamos imaginar que estamos criando a primeira página HTML de um site, já fizemos sua estrutura com topo, rodapé, coluna lateral, menu e a div que receberá o conteúdo principal de nosso site, o texto e agora vamos começar a inserir o conteúdo de todas as divs que criamos para a estrutuação do visual.

Ao pararmos para analisar o layout e vemos que 90% da tipografia oferecida no layout é da mesma fonte e com o mesmo tamanho: Helvetica – 12px. Então o ideal é que esse estilo seja específicado desde o começo da nossa página. Para isso o mais fácil é estilizarmos a tag body, pois ela estará presente em todas as páginas e todo o conteúdo de dentro dela receberá a estilização por hierarquia:

body{
     font:12px Helvetica, Arial, sans-serif;
}

Isso ajuda muito ao se carregar conteúdo dinamicamente com uma linguagem do lado do servidor como PHP, ASP .NET, Ruby, Python , etc. Não precisamos nos preocupar em criar seletores para as tags, ids, classes. Caso haja a necessidade de uma outra fonte podemos criar um estilo, ou apontarmos para algo específico usando um seletor mais “profundo”, como por exemplo:

.h2_azul{
   color: #cc0000;
   font: 18px Geneva, Times New Roman, serif;
   text-decoration: none;
}

#topo #logo h1{
   color: #00ff00;
   font: 18px Geneva, Times New Roman, serif;
   text-decoration: none;
}

Conclusão

O CSS feito mais genérico facilita a manutenção do código, o controle sobre o conteúdo e sobre os estilos, facilita a manipulação de eventos com javascript puro ou com frameworks além de eliminar a maior parte de problemas de quebra do visual por carregamento de conteúdo dinamigo gerado por linguagens de servidor como PHP, ASP .NET, RUBY, Python, entre outros.

Compartilhe