// Défini la taille de notre grille.

$grid-width: 960px;



// Flex-Grid.

[grid-role~="row"] {

  display: flex; margin-left: auto; margin-right: auto; width: $grid-width;

  & > & {

    [grid-role~="column"]:first-child { margin-left: 0; }

    [grid-role~="column"]:last-child { margin-right: 0; }

  }

  & > [grid-role~="column"] {

    margin-left: 10px; margin-right: 10px;

    @for $i from 1 through 12 { &[column-size="#{$i}"]{ flex: $i; }}

  }

}

<div grid-role="row">

  <div grid-role="column" column-size="4">Collonne de 4 rangées</div>

  <div grid-role="column row" column-size="6">

    <div grid-role="column" column-size="2">2:Start</div>

    <div grid-role="column" column-size="2">2</div>

    <div grid-role="column" column-size="2">2:End</div>

  </div>

  <div grid-role="column" column-size="2">2 rangées</div>

</div>

• Si c'est la structure de la page → balise html (table)
  
• Si c'est des données sémantiques → Texte dans la balise (textNode) ou attribut @data-*
  
• Si c'est de la présentation → attribut @class
  
• Si c'est pour identifier l'objet de façon unique → attribut @id
  

(03-01-2014, 06:16 PM)Xenos a écrit : Table/thead/tbody/tfoot/tr/td/th sont des balises html sémantiques, et ne sont à utiliser que si les données sont tabulaires (des données dépendantes de deux paramètres, des matrices, etc...)

Parfois, comme ici, on aimerait une apparence de "tableau" sans que les données soient véritablement tabulaires, et en ce cas, l'utilisation d'un attribut (ici, @role) est à privilégier, sinon un lecteur d'écran ou un robot d'indexation considèrerait que le site est un tableau géant, alors qu'en pratique, il s'agit juste d'une méthode de présentation.

Mais je suis d'accord: j'aurai également choisi une @class puisqu'il s'agit de présentation, et non pas créé un nouvel attribut @role (d'autant que cela rend la page non-conforme à html5, les attributs persos devant être précédés d'un "data-" il me semble, donc, @data-role serait à utiliser).

(05-01-2014, 07:57 PM)t.bodeux a écrit : Coucou, pour ce qui est de la taille qui vaut 12, Simplement car les tailles du fichier CSS s'arrête la !