Les "Helpers" sont des classes purement visuelles et utilitaires (non "sémantiques"), pas très jolie mais rudement pratiques en production pour alléger vos feuilles de styles.
**Attention toutefois !** Ce type de classes conduit fréquemment [à des abus au sein de votre code HTML](http://blog.goetter.fr/2014/11/10/bien-utiliser-un-framework-css/).
Par exemple, Si vous avez 20 images au comportement identique dans la page, ne les affublez pas de classes visuelles multiples telles que `img class="mod clearfix left inbl w200p pas mb1 large-mb2 small-mbn"` mais optez plutôt pour une classe personnalisée : `img class="media"` par exemple.
**Méthode :** Limitez-vous à 4 noms de classes au grand maximum par élément HTML. Si vous pensez qu’il vous en faut davantage, il est temps d’envisager une classe personnalisée, ou de profiter des pré-processeurs CSS.
_Les valeurs de helpers peuvent être modifiées au sein du fichier de configuration LESS / Sass._
## les Helpers de largeur
Largeurs fluides (en pourcentage) :
```css
.w10 {
width: 10%;
}
.w20 {
width: 20%;
}
.w25 {
width: 25%;
}
...
.w100 {
width: 100%;
}
```
Largeurs fixes (en pixel) :
```css
.w50p {
width: 50px;
}
.w100p {
width: 100px;
}
.w150p {
width: 150px;
}
...
.w960p {
width: 960px;
}
.w1140p {
width: 1140px;
}
```
Largeurs spéciales :
```css
.mw960p {
max-width: 960px;
}
.mw1140p {
max-width: 1140px;
}
.wauto {
width: auto;
}
```
## les Helpers d'espacement
Les herpers d'espacement comportent des classes dédiées aux marges externes (margin) et aux marges internes (padding).
