|<- [[Meaningful Whitespace]]|[[Commenting]] ->|

====== HTML ======

Étant donné la nature intrinsèquement interconnecté du HTML et CSS, il serait négligent de ma part de ne pas couvrir quelques règles concernant la syntaxe et le formatage du balisage.

Toujours mettre les attributs entre "", même s'ils marcheraient sans cela. Cela réduit les chances d'accident, et est davantage familier pour une majorité de développeurs. Bien que les deux possibilités suivantes fonctionnent (et soient valides) :

<code>
<div class=box>
</code>

…ce format est à privilégier :

<code>
<div class="box">
</code>

Les " ne sont pas obligatoires ici, mais restez du côté safe et incluez-les.

Lorsque vous utilisez de multiples valeurs dans un attribut classe, séparez-les par deux espace, comme suit :

<code>
<div class="foo  bar">
</code>

Lorsque différentes classes sont related les unes et les autres, consider grouping them in square brackets ([ and ]), like so:

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

Ce n'est pas une firm recommendation, et c'est quelque chose que j'expérimente encore moi-même, mais cela offre de nombreux bénéfice. Lisez en plus dans Grouper des classes related dans votre markup.

Comme pour nos bases de règle, il est possible d'utiliser des espaces signifiants dans vitre HTML. Vous pouvez dénoter des césures thématiques dans le contenu avec 5 lignes vides, par exemple :

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





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





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

Séparez des éléments indépendants mais related de markup avec une ligne vide, par exemple :

<code>
<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>
</code>

Cela permet aux développeurs de visualiser les différentes parties du DOM d'un seul coup d'œil, et permet aussi à certains éditeur de texte —comme Vim par exemple—, de manipuler des blocs de markup délimités par des lignes vides.

===== Further Reading =====

  - [[http://csswizardry.com/2014/05/grouping-related-classes-in-your-markup/|Grouping related classes in your markup]]