Durante anos, a comunidade de padrões Web falou sobre a separação de conceitos. Separe seu CSS do seu JavaScript e do seu HTML. Todos nós fazemos isso, certo? CSS vai para seu próprio arquivo; JavaScript vai em outro, o HTML é deixado por si só, agradável e limpo.
Porém, quando você faz alguma alteração no HTML provavelmente vá precisar ajustar o CSS também, e assim terá que mexer em ambos os arquivos, ou seja, a separação de arquivos existe, mas há muita dependência. O que estamos tentando mostrar neste artigo/tutorial, é que podemos fazer com que você altere o HTML e não precise alterar o CSS em algumas modificações, apenas alterando a forma de dependência do CSS podemos fazer isto.
Explorando minhas abordagens
Ao longo de minha carreira, eu tive o prazer e o privilégio de trabalhar em algumas centenas de sites e diferentes aplicações web. Para a grande maioria desses projetos, eu era o único desenvolvedor para criar o HTML e CSS. Eu desenvolvi uma forma de codificação de sites que funcionaram bem para mim, eu as utilizo sempre que posso. Foi basicamente a forma que aprendi a criar, que dá certo, e que pode ser reutilizado.
Reutilizando Estilos
Antigamente, nós colocávamos a tag font e aplicávamos background para cada elemento do HTML que precisava de estilização. Ou seja, colocávamos diretamente no HTML as tags e estilizações. O que deixava de ser prático quando precisava alterar algo que repetisse em outro objeto. Imagine você ter 10 botões que tem uma borda de 1px, você precisar trocar a borda para 2px. Antigamente, era preciso ir de objeto em objeto para fazer isto, em quem sabe milhares de arquivos. O CSS nos permitiu reutilizar estilos de objetos, trocando em um local, troca em todos que usam o estilo.
Por exemplo, um menu de navegação tem uma lista de itens que parecem todos iguais. Repetindo estilos inline (no código HTML) em cada item não seria nada prático. Como resultado, em CSS fica assim:
#nav { margin: 0; padding: 0; list-style: none; }
#nav li { float: left; margin-right:15px; }
#nav li a { display: block; padding: 5px 10px; background-color: blue;}
Claro colocando float: left para cada item da lista e display: block; padding: 5px 10px; para cada link. É eficiente e funciona. O HTML que precisa ser feito para isto funcionar é:
Agora, o cliente volta e diz: "Eu quero um menu drop-down para aparecer quando o usuário clicar em "produtos". Com as alterações de HTML o código ficaria assim:
Temos agora um item da lista dentro de um item da lista, e links dentro dela. Nosso menu tem uma navegação horizontal, mas o cliente quer uma lista vertical, então adicionamos algumas regras de estilo a lista interna para corresponder ao que o cliente quer.
#nav ul { margin: 0; padding:0; list-style:none; }
#nav li li { float: none; }
#nav li li a { padding: 2px; background-color: red; }
Problema resolvido, certo? Mais ou menos.
Reduzindo a profundidade de Aplicabilidade
Provavelmente, o problema mais comum com CSS está em gerenciar as especificidades dos objetos, ou seja, o quantos níveis nós avançamos para determinar o estilo. O problema disto, é que se não entrarmos nos níveis vamos debater com o problema de que várias regras CSS são usadas por um único elemento na página. Com o nosso menu, as nossas regras iniciais estilizaram os itens da lista e os links da navegação e do menu. Isto não é bom.
Ao adicionar mais seletores a um elemento, fomos capazes de aumentar a especificidade, porém os itens de navegação estarão herdando os ítens de menu. Ou seja, todo o estilo CSS dos itens de navegação (itens do drop-down) estarão herdando o CSS dos ítens "pais" deles.
Aproveite e faça nosso curso de HTML e CSS e aprenda a recortar layouts
No entanto, isso pode se tornar um jogo de gato e rato como um projeto de alta complexidade. Em vez disso, deveríamos estar limitando o impacto das classes e estilos do CSS. Estilos de navegação deve aplicar-se e afetar somente os elementos que pertencem a ele, e estilos de menu deve aplicar-se e afetar somente os elementos que pertencem a ele.
Refiro-me a esse impacto como a profundidade de aplicabilidade. Esta profundidade vai impactar nos elementos ao seu redor. Por exemplo, um estilo como #nav li a, quando em uma estrutura HTML que inclui os nossos menus, tem uma profundidade de 5: a partir do ul > li > ul > li > a. (basta descer o DOM dos elementos para encontrar este 5 de profundidade).
Quanto mais profundo o nível de aplicabilidade, maior impacto dos estilos pode ter sobre o HTML e mais dependente o HTML está ao CSS. O objetivo do CSS mais gerenciável - especialmente em projetos maiores - é limitar a profundidade de aplicabilidade. Em outras palavras, escrever CSS para afetar somente os elementos que queremos que eles afetam. Sabemos também que criar muitos níveis de estrutura do CSS torna-o lento.
Seletores Child
Uma ferramenta para limitar o escopo do CSS é o selector child ( > ) (seta maior). Se você não precisa se preocupar com Internet Explorer 6 (e, felizmente, muitos de nós não), então o seletor child deve ser usado constantemente em seus CSS.
Seletores child limitam o âmbito de seletores. Voltando ao nosso exemplo de navegação, podemos usar o seletor child para limitar o âmbito da navegação de modo que não afetaria o menu.
#nav { margin: 0; padding: 0; list-style: none;}
#nav > li { float: left; margin-right:15px; }
#nav > li > a { display: block; padding: 5px 10px; background-color: blue; }
Para o menu, vamos adicionar um nome de classe para ele. Isto irá torná-lo mais descritivo e fornecer uma base para o resto dos nossos estilos.
.menu { margin: 0; padding: 0; list-style: none }
.menu > li > a { display: block; padding: 2px; background-color: red; }
O que temos feito é limitar o alcance de nosso CSS e isolar dois padrões visuais em blocos separados de CSS: uma para nossa lista de navegação e um para nossa lista de menu. Demos um pequeno passo para modularizar o nosso código e um grande passo para dissociar o código HTML do CSS.
Classificando o código
Limitar a profundidade de aplicabilidade ajuda a minimizar o impacto que um estilo pode ter sobre um conjunto de elementos muito mais profundas no HTML. No entanto, o outro problema é que assim que usar um seletor de elemento em nosso CSS, estamos dependendo de que a estrutura HTML nunca mude. No caso da nossa navegação e um menu, é sempre uma lista com um monte de itens da lista, com um link dentro de cada um deles. Não há flexibilidade para estes módulos.Vejamos um exemplo de algo que vemos em muitos modelos: uma caixa com um título e um bloco de conteúdo depois.
Vamos colocar alguns estilos.
.box { border: 1px solid #333;}
.box h2 { margin: 0; padding: 5px 10px; border-bottom: 1px solid #333; background-color: #CCC;}
.box ul { margin: 10px;}
O cliente volta e diz: "Esta caixa é legal, mas você pode adicionar uma outra com um pequeno resumo sobre o site?"
This is my blog where I talk about only the bestest things in the whole wide world.
About the Site
No exemplo anterior, uma margem foi dada para a lista para torná-lo se alinham com a posição acima dela. Com o exemplo do novo código, é preciso dar-lhe um estilo similar.
.box ul, .box p { margin: 10px;}
Isso vai fazer, supondo que o conteúdo nunca muda. No entanto, o objetivo deste exercício é reconhecer que os sites podem e devem mudar. Portanto, temos de ser pró-ativo e reconhecer que existem elementos alternativos que possam querer utilizar. Para maior flexibilidade, vamos usar classes para definir as diferentes partes deste módulo:
.box .hd { } /* this is our box heading */
.box .bd { } /* this is our box body */
Quando aplicado no HTML, ele se parece com isso:
This is my blog where I talk about only the bestest things in the whole wide world.
About the Site
Esclarescendo a inteção deste uso
Diferentes elementos na página poderiam ter um título e um corpo. Porém os estilos .hd e .bd estão "protegidos" na medida em que são filhos da nossa box, ou seja, somente poderão ser usados se estiverem dentro de um objeto com class="box". Mas isso nem sempre é tão evidente quando estamos olhando o noss HTML. Devemos esclarecer que estas classes .hd e .bd são para uso apenas dentro da classe .box.
.box .box-hd {}
.box .box-bd {}
Com esta convenção de nomenclatura melhor, não precisamos combinar os seletores. Nosso CSS final será assim:
.box { border: 1px solid #333; }
.box-hd { margin: 0; padding: 5px 10px; border-bottom: 1px solid #333; background-color: #CCC;}
.box-bd { margin: 10px; }
O bónus disto é que cada uma destas regras afeta apenas um único elemento: o elemento de que a classe é aplicada. Nosso CSS é mais fácil de ser lido e mais fácil de depurar.
O que fizemos?
Acabamos de ver duas maneiras de se disassociar o HTML do CSS:
- Usando seletores child;
- Usando seletores de classe.
Além disso, vimos como as convenções de nomenclatura são úteis para permitir que código seja mais claro, mais rápido, mais simples e mais compreensível.
Estes são apenas alguns dos conceitos que eu faço e uso no meu dia-a-dia.
😕 Poxa, o que podemos melhorar?
😃 Boa, seu feedback foi enviado!
✋ Você já nos enviou um feedback para este texto.
