Regras para como separar o HTML do CSS

Aprenda como funcionam as dissociações de HTML e CSS, como que os seletores funcionam, qual a estrutura necessária para fazer um CSS e HTML correto.

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

Entre em contato com o autor e nos ajude a melhorar a qualidade dos posts cada vez mais!

AVISAR
Comentários
ASSINE NOSSA NEWSLETTER

As melhores publicações no
seu e-mail