KNACSS et la réusabilité : @extend versus balisage

Je me suis plongé un peu plus dans KNACSS et ma foi, y a pas mal de choses qui me séduisent dans son côté modulaire réutilisable (via les helpers notamment).

En parallèle, j'ai été emballé par le principe de grille sémantique, qui permet de s'affranchir de tout balisage non porteur de sens (.span-x...) et superflu grâce à la puissance des préprocesseurs (Sass, Stylus ou Less)

Du coup je me posais la question suivante : plutôt que de parsemer le code HTML de helpers tels que .mt2, .w30 etc. y aurait-il un inconvénient à utiliser massivement la fonction @extend des préprocesseurs ?

Exemple :

section {
  @extend .w70;
  @extend .mt2;
}
aside {
  @extend .w30;
  @extend .mt2;
}

Qui générerait le code suivant :

aside, section {
  margin-top: 20px;
}
section {
  width: 70%;
}
aside {
  width: 30%;
}

En outre, grâce aux placeholders de Sass ou Stylus, cela permettrait de ne générer que les helpers réellement utilisés, de manière propre, sans risquer les débordements liés aux @extend de classes.
On aurait alors les helpers au sein d'un knacss.sass :

(...extrait...)

%mt0, %mtn { margin-top: 0; }
%mt1, %mts { margin-top: 10px; }
%mt2, %mtm { margin-top: 20px; }
%mt3, %mtl { margin-top: 30px; }
%mr0, %mrn { margin-right: 0; }
%mr1, %mrs { margin-right: 10px; }
%mr2, %mrm { margin-right: 20px; }
%mr3, %mrl { margin-right: 30px; }
%mb0, %mbn { margin-bottom: 0; }
%mb1, %mbs { margin-bottom: 10px; }
%mb2, %mbm { margin-bottom: 20px; }
%mb3, %mbl { margin-bottom: 30px; }
%ml0, %mln { margin-left: 0; }
%ml1, %mls { margin-left: 10px; }
%ml2, %mlm { margin-left: 20px; }
%ml3, %mll { margin-left: 30px; }

Et qu'on appellerait comme ceci :

section {
  @extend %w70;
  @extend %mt2;
}
aside {
  @extend %w30;
  @extend %mt2;
}

Mais peut-être que cette façon de procéder n'est pas l'idéale, et c'est pourquoi je viens ici vous demander votre avis
Modifié par Spheerys (30 Jan 2014 - 21:13)

En me penchant à nouveau sur la question (oui cette nuit), j'en conclus que ce n'est pas aussi facile que cela dans la vraie vie.

En effet, dans un site, il y a grosso-modo deux types d'éléments :
1- ceux qui définissent la structure (header, footer, nav, aside, .content, ...)
2- tous les autres

Les principes d'@extend et de semantic.gs s'appliquent principalement sur des éléments de structure... et c'est à mon sens là où il y en a le moins besoin puisque ces éléments n'ont pas (ou peu) de nature à être massivement réutilisables.

Un cas concret de nécessité de réutilisabilité serait celui-ci :
J'ai 10 éléments neutres (div par ex.) quasi-identiques en tous points (couleur de fond, police, propriétés de base)... sauf 1 ou 2 qui doivent se distinguer, par exemple parce que l'un d'entre eux ne doit pas avoir de marge haute.
La question est : comment distinguer facilement cet élément un peu différent des autres ? (et les autres comme lui dans le document ?)
Il va bien falloir leur appliquer une distinction dans le HTML, donc plutôt une classe, donc pourquoi pas faire simple et compréhensible avec une classe ".mt0" ?
Le faire avec un @extend me paraît bien moins pratique puisque de toute façon il faudra distinguer les div avec des classes au final.

Bref, je suis toujours circonspect

EDIT :
Et pour en revenir aux éléments de structure tel que aside, section, header, etc. il ne faut pas se leurrer : en pratique, on va leur appliquer directement des styles (puisqu'il s'agit d'éléments bien définis) sans avoir besoin d'utiliser des @extends qui ne sont censé s'appliquer qu'à des éléments réutilisables.
Modifié par Raphael (02 Feb 2014 - 07:56)

Merci pour ton retour d'analyse.
Ça réponds parfaitement à mon interrogation

Je vais partir sur une grille sémantique pour la structure et utiliser des bouts de Knacss tel que prévu initialement