Pour répondre aux commentaires de mon article de la semaine dernière (sur le besoin d’une approche un peu plus DRY du CSS), voilà une mise en pratique par l’exemple, avec du Sass en hors d’oeuvre.

Pour une intégration plus DRY

DRY est l’acronyme de « Don’t Repeat Yourself », qui veut dire « ne vous répétez pas ». C’est une philosophie de programmation qui demande d’éviter le plus possible les actions répétitives, pour gagner en plaisir de travail, productivité, et efficacité en évitant les erreurs de copier-coller. Dans l’intégration, cela passe par un choix judicieux des classes données aux éléments HTML, et un découpage clair des CSS.

Pour illustrer cela, nous allons prendre comme exemple des boutons.

Il est possible que vous utilisiez un même bouton sur plusieurs sites différents, en changeant simplement la couleur du fond/du texte, par exemple. Il serait donc judicieux, quand vous designez votre bouton en CSS, d’en garder le code dans un coin, pour pouvoir le réutiliser sur un prochain projet. Comme cela, plutôt que de le retaper, il suffira de le copier-coller, et changer les valeurs de couleur.

Cette approche est déjà plus DRY que de réécrire tout le code complètement, mais c’est pas encore ça. Pour faire mieux sans plomber le temps de chargement de notre page avec un trop grand nombre de CSS, il nous faut un outil, et cet outil, c’est SCSS.

Finalement, Le SASS/SCSS, c’est quoi?

Le SASS est un langage qui se compile en CSS, et qui fournit de nombreux outils pour nos feuilles de style.

Le SCSS, lui, est un descendant du SASS, créé pour avoir une compatibilité parfaite avec le CSS. Toute feuille de style en CSS est aussi une feuille SCSS valide.

Ces deux « langages » restent les deux faces d’une même pièce, la gem ruby Sass. La grosse différence entre les deux provient de l’utilisation de l’indentation à la place des braces{ } et des points virgules du CSS. En résulte une syntaxe plus épurée et plus propre, qui fait tendre ma préférence vers celui ci. Néanmoins le pas à faire est plus grand qu’avec le SCSS, ce qui fait que j’aurais tendance, pour un premier contact, à conseiller ce dernier. 

Pour les installer, vous aurez besoin d’une installation de Ruby (ça prend 5 minutes, j’ai fait un tutoriel ici), et de taper ensuite dans une console « gem install sass ». Voilà, c’est tout.

Pour plus d’informations, je vous renvoie sur l’article de Vincent Ginet.

Application du SCSS dans ce cas précis

Le SCSS nous permettra ici de séparer le CSS de notre bouton dans un fichier, sans pour autant avoir plusieurs CSS à la fin. Notre temps de chargement est donc sauvegardé. Ceci est possible grace à une réécriture de la commande @import, chronophage en CSS, mais très utile en SCSS.

Il permettra aussi une personnalisation simplifiée des boutons, grâce à un systeme de variables très simple.

L’exemple

Notre exemple est donc un bouton. Il doit couvrir toutes les formes de boutons possibles, et ce sur 4 états: normal, hover, disabled, importants.

création du fichier

Nous allons tout d’abord créer le fichier qui va contenir notre CSS. Vu que c’est un bouton, il me semble judicieux de le mettre dans un dossier button. Ce bouton ayant en plus vocation d’être tres simple, nous allons l’appeler « simple ». Notre fichier sera donc /buttons/_simple.scss. Le underscore (_) signifie que ce fichier n’est pas un « vrai » CSS, mais une portion destinée à être insérée dans un CSS. Ce style de mini-css est nommé « partial ».

contenu du fichier

Le code SCSS de nos 4 boutons est celui là.

.button, input[type="submit"], button {
  color: #FFF;
  font-size: 14px;
  background: #2A2;
  font-style: italic;
  margin: 30px 5px;
  padding: 10px 30px;
  cursor: pointer;
  opacity: 0.8;
  float: right;
 
  &:hover{
    opacity: 1;
  }
 
  &:disabled, &[disabled]{
    background: #888;
    color: #FFF;
  }
 
  &.important{
    background: #A22;
    color: #FFF;
  }
}

Voilà. Maintenant, il est possible d’ajouter ce modèle là de bouton dans un projet en l’important, simplement avec la ligne @import « buttons/simple ». Notez l’absence d’extension (le fichier peut donc être de manière indifférenciée un SCSS ou un SASS), et l’absence de l’underscore (il est obligatoire pour signifier que le fichier est une partial, donc implicite). Le seul inconvénient est que si l’on veut personnaliser le bouton, il faut encore modifier le fichier à plusieurs endroits répartis dans le code. Ajoutons quelques variables pour simplifier l’édition.

[note: une variable est comme une petite boîte contenant une valeur. Cela permet de manipuler des boîtes par leurs noms, peu importe leurs valeurs]

Créer une variable est très simple: il suffit de lui choisir un nom, de le précéder par $, et de lui donner une valeur. Pour faire bien, nous allons donner à nos variables une importance moindre, en les suivant avec !default. Comme ça, si nous avons besoin de personnaliser nos boutons, nous pourrons le faire depuis notre style.scss.

$normal_background_color: #2A2 !default;
$normal_text_color: #FFF !default;
 
$disabled_background_color: #888 !default;
$disabled_text_color: #FFF !default;
 
$important_background_color: #A22 !default;
$important_text_color: #FFF !default;
 
.button, input[type="submit"], button {
  color: $normal_text_color;
  font-size: 14px;
  background: $normal_background_color;
  font-style: italic;
  margin: 30px 5px;
  padding: 10px 30px;
  cursor: pointer;
  opacity: 0.8;
  float: right;
 
  &:hover{
    opacity: 1;
  }
 
  &:disabled, &[disabled]{
    background: $disabled_background_color;
    color: $disabled_text_color;
  }
 
  &.important{
    background: $important_background_color;
    color: $important_text_color;
  }
}

Voilà, notre bouton est fini. Pour l’utiliser, il suffit de le charger depuis notre css et le personnaliser, comme cela. 

$normal_background_color: #705ece;
$normal_text_color: #FFF;
 
$disabled_background_color: #888;
$disabled_text_color: #FFF;
 
$important_background_color: #A01;
$important_text_color: #FFF;
 
@import "buttons/simple";

Le mot de la fin

Et maintenant que nous avons fait tout ça, à quoi ça sert? Finalement, le mettre en vrac dans le CSS aurait eu le même résultat. Pour ce projet, c’est vrai.

Oui, mais pour le prochain? Si nous voulons le même bouton, pas besoin de copier-coller-modifier. Une ligne fait le travail de chinois pour nous, ne reste plus que la personnalisation. Au fil des projets, de nouveaux boutons seront créés, et votre dossier se remplira. Vous finirez peut être aussi par créer un dossier « structure », un dossier « alert », et plein d’autres. Vous vous créerez une collection d’outils, facile à réutiliser et partager.