MediCoder Aide

Blogues » MediCoder » Usage des classes CSS multiples pour simplifier le code
Par mytto20854 points 

Usage des classes CSS multiples pour simplifier le code

Voici un cas typique de code à simplifier. On souhaite ici avoir un affichage qui dépend du $vue, valant classique ou compacte, avant dans les deux cas, une base commune.

Le snippet côté template :

<div class="wrapper_line{{if $vue == 'compacte'}}_compacte{{/if}}">
...
</div>

Le code CSS concerné :

div.wrapper_line {
  position: relative;
  height: 2em;
  margin-bottom: 8px;
}
 
div.wrapper_line_compacte {
  position: relative;
  height: 1.1em;
  margin-bottom: 8px;
}

Plusieurs remarques :

  1. les deux classes CSS sont très proches en contenu
  2. le code n'est pas symétrique, car il n'y a pas de style spécifique pour la vue classique: elle se définie comme "non-compacte"
  3. la condition Smarty qui concatène un mot dans la classe n'est pas très élégante

Traitons les deux premiers point en factorisant les styles avec des classes multiples. Cela évitera de propager des modifications sur les deux modes, ouvrira la voie à d'autre modes et rendra le différentiel plus explicite :

div.wrapper_line {
  position: relative;
  margin-bottom: 8px;
}
 
div.wrapper_line.classique {
  height: 2em;
}
 
div.wrapper_line.compacte {
  height: 1.1em;
}

Le troisième point est traité de facto par cette nouvelle structure :

<div class="wrapper_line {{$vue}}">
...
</div>

Sponsors privilégiés

Mediboard project