Site Overlay

Arquitetando o CSS

Escrever CSS pode ser fácil, mas escrever CSS bem escrito é uma habilidade relativamente rara e preciosa. Conforme os seus projetos vão ganhando novas funcionalidades e sofrendo mudanças visuais, você pode se encontrar em situações onde alterar os estilos de um elemento ou adicionar uma variação de algo existente pode ser uma tarefa herculana, e a duplicação de código só traz mais complicações e problemas para a sua equipe e o seu projeto. Por isso, é importante refletir sobre o código CSS escrito e tratar a sua manutenção com a mesma atenção que se cuida do código da sua aplicação, independente da linguagem que você utilize.

Um dos vilões clássicos de um CSS mal cuidado é a complexidade de seletores usados. Além da degradação da performance das suas páginas, compreender o escopo de uma seletor para alterar alguma propriedade pode ser complicado.

Para entender o impacto de performance é necessário entender como os navegadores processam os seletores que escrevemos. Considere o seguinte seletor: ul#nav.

O navegador começará a ler o seletor de trás para frente – ao contrário do que nós estamos acostumados a ler, o que surpreende diversos desenvolvedores – e irá procurar na página todos os elementos da tag a. Após isso, ele irá filtrar esta lista por todos que estejam contidos em um elemento li, e então por todos que também estejam dentro de um elemento com id nav. E por fim, todos em que o elemento com o id nav seja da tag ul.

Considerando que o HTML para uma estrutura dessas seria uma lista não ordenada apenas com links, algo como #nav a seria uma solução mais simples para o navegador processar, e com o mesmo efeito. Ou até mesmo utilizando uma classe nav-link, por exemplo, diretamente nos elemento a dentro da lista com o id nav.

Outro ponto que gera muita discussão e confusão entre desenvolvedores: utilizar ids ou classes? Enquanto ids podem ser mais rápidos para o navegador procurar os elementos necessários na árvore do DOM, a diferença de performance é íntima, então a discussão acaba mais no assunto de preferência pessoal. Classes são ótimas para compor diversos aspectos compartilhados entre vários elementos, e ids ajudam a indicar que o seletor é específico para um elemento único da página.

Uma regra interessante a ser seguida é evitar seletores com mais de 3 partes, como header .nav a. Caso você se encontre escrevendo seletores maiores que algo assim, pare e reveja a sua estrutura para que não seja necessário escrever seletores tão grandes – seja utilizando mais classes ou reduzindo a especificidade dos seus seletores.

Nicole Sullivan popularizou uma abordagem na escrita de CSS e composição de estilos, similar a Orientação a Objetos, que é utilizada em linguagens de programação. O OOCSS – Object Oriented CSS – propõe a separação da estrutura dos estilos e os containers de seu conteúdo.

O objetivo é escrever um código mais fragmentado e reutilizável, onde diversas classes diferentes são utilizadas para compor o comportamento final de um elemento, independente da tag que ele possua ou o contexto que ele se encontre – dentro de uma lista, um formulário ou o cabeçalho da página.

Tome como exemplo os 2 botões a seguir:

<a href=”#” class=’button primary-button big-button’>Enviar mensagem</a>

<a href=”#” class=’button small-button’>Cancelar</a>

Podemos separar os aspectos destes elementos em 4 classes diferentes: uma para definir os estilos básicos de um botão, uma para as cores do botão principal, e outras duas para controlar os tamanhos de cada um, assim:

.button {

background-color: #999999;

color: white;

display: inline-block;

font-weight: bold;

padding: 0.5em 1em;

text-decoration: none;

}

.primary-button {

background-color: #389739;

}

.big-button {

font-size: 1.1em;

}

.small-button {

font-size: 0.9em;

}

Desta forma, botões em outras páginas e que possuam detalhes diferentes (como uma cor de fundo diferente, ou um ícone posicionado ao lado do texto) podem compartilhar os estilos básicos de um botão e aplicar os seus pontos específicos com outras classes, como danger-button ou icon-button.

6

Source: scriptcase / Arquitetando o CSS

Comments

comments

Leave a Reply

Your email address will not be published.