Skip to content

Latest commit

 

History

History
81 lines (51 loc) · 2.23 KB

2.ix.HTML.md

File metadata and controls

81 lines (51 loc) · 2.23 KB

HTML

HTML e CSS dada a natureza de serem intrisecamente conectados, seria negligência minha não cobrir algumas orientações sintáticas e formatações para a marcação.

Sempre coloque aspas em atributos, mesmo se eles iriam trabalhar sem. Isto reduz a chance de acidentes, e o formato é mais familiar para a maioria dos desenvolvedores. Por tudo isso, iria funcionar (e é válido):

<div class=box>

... este formato é preferencial:

<div class="box">

As aspas não são requeridas aqui, mas é mais seguro incluí-las. Quando escrevemos múltiplos valores em um atributo de class, as separamos com dois espaços, assim:

<div class="foo  bar">

Quando múltiplas classes são relacionadas entre si, considere agrupá-las em colchetes ([ e ]), igual a:

<div class="[ box  box--highlight ]  [ bio  bio--long ]">

Isto não é uma firme recomendação, e é algo que ainda estou experimentado comigo mesmo, mas acarreta uma série de benefícios. Leia mais em Agrupando classes relacioandas em sua marcação (link). Tal como acontece com os nossos conjuntos de regras, é possível usar significativos espaços em branco em seu HTML. Você pode denotar quebras temáticas no conteúdo com 5 linhas de espaços, por exemplo:

<header class="page-head">
  ...
</header>





<main class="page-content">
  ...
</main>





<footer class="page-foot">
  ...
</footer>

Separe trechos relacioados vagamente em sua marcação com uma simples linha vazia, por exemplo:

<ul class="primary-nav">

  <li class="primary-nav__item">
    <a href="/" class="primary-nav__link">Home</a>
  </li>

  <li class="primary-nav__item  primary-nav__trigger">
    <a href="/about" class="primary-nav__link">About</a>

    <ul class="primary-nav__sub-nav">
      <li><a href="/about/products">Products</a></li>
      <li><a href="/about/company">Company</a></li>
    </ul>

  </li>

  <li class="primary-nav__item">
    <a href="/contact" class="primary-nav__link">Contact</a>
  </li>

</ul>

Isto permite aos desenvolvedores detectarem partes separadas do DOM em um relance, e também permite que certos editores de tetxo - como o Vim, por exemplo - possam manipular blocos de linhas vazias delimitadas da sua marcação.