[BDX.IO] Maîtriser son style CSS

Lors de la conférence “Maîtriser son style CSS” donnée dans le cadre du BDX.IO, Pierre Renaudin nous a présenté ses conseils pour mieux concevoir et maintenir son CSS.

Pourquoi s’occuper de son CSS?

Un CSS doit être maintenable au fil du temps. Pour une meilleure maintenabilité, un code lisible pourrait aider. Ensuite, un CSS continue d’évoluer. Il faut donc pouvoir ajouter des nouveaux styles sans tout casser.

TIP 1: Définir quelques règles

• Ecrire les noms de classes en minuscule.

Exemple:

/*Bad*/
.userProfile {...}
/*Good*/
.user-profile{...}

• Eviter d’utiliser les id: choisir entre un id ou une classe. Si le style doit être utilisé à plusieurs endroits, il nous faut donc une classe.

Exemple:

/* Bad */
#top_navigation{...}
/* Good */
.top-navigation{...}

• Un sélecteur par ligne

Exemple:

/*Bad*/
.document, .document-open {...}
/*Good*/
.document,
.document-open {...} 

• Séparer les composants fonctionnels et graphiques

Exemple:

/*Bad*/
.button{
    background-color: blue;
    margin-top: 20px;
}

/*Good*/
button{
    background-color: blue;
}

.user-button{
   margin-top: 20px;
}

• Utiliser les sélecteurs plus directs

Exemple:

/*Bad*/
ul .user-list li span a:hover {...}
/*Good*/
.user-list a:hover{...}

• Refactorer son code au mieux

Définir des règles est utile lorsque nous écrivons les feuilles de style manuellement.

TIP2: Les préprocesseurs: SASS /LESS

Utiliser un préproceseur permet d’optimiser son code en amont et augmente la productivité.

Pour la conférence, le préprocesseur utilisé est SASS.

Niveau syntaxe, le CSS devient un “jeu d’enfant”. Par exemple avec SASS, on remplace les accolades par des tabulations.

Exemple:

body
    color: #333

Si nous utilisons SASS, nous aurons donc des fichiers .sass.

Quelques bases de SASS:

• définition des variables

Exemple .sass:

$font-stack:    Arial
$primary-color: #333
body
    font: $font-stack
    color: $primary-color

Après compilation (.css):

body {
    font: Arial;
    color: #333;
}

• les opérations

Exemple de fichier .sass:

$border-radius-base: 3px
.user-container
    border-radius: $border-radius-base *

Après compilation (.css):

.user-container {
   border-radius: 6px;
}

• Découper en partial les feuilles de styles

sass/
|—–style.sass
|—–_mixins.sass
|—–_variables.sass
|—–base/
|      |—–_colors.sass
|      |—–_typo.sass
|      |—–_utilities.sass
|
|—–components/
|      |—–_avatars.sass
|      |—–_buttons.sass
|
pages/
|—–_form.sass
|—–_header.sass

L’utilisation d’un préprocesseur de type SASS permet de faciliter l’écrire de feuilles de styles. A contrario, il est aussi plus facile de se tromper.

TIP3: Framework

Utiliser un framework permet de:

• démarrer rapidement
• respecter les normes que le framework impose
• normaliser des propriétés de base

Exemples de frameworks:

• Bootstrap (orienté style)
• Foundation (orienté structure)
• Inuit.css
• Knacss etc.

Lors de l’utilisation d’un framework, les conseils sont les suivants:

• Etendre le framework plutôt que le surcharger
• Initialiser les variables du framework
• Importer certaines portions du framework

Exemple: Définition de variables de Bootstrap et import partiel

$border-radius-small: 3px
$border-radius-large: 6px

/*imports*/
@import bootstrap/forms
@import bootstrap/tables

TIP4: Composants BEM (BLOCK-ELEMENT-MODIFIER)

BEM est une méthode de nommage et de classification des classes CSS. Chacune d’entre elles a une responsabilité unique. On a ainsi beaucoup de classes mais moins de code. Elles deviennent plus strictes et informatives.

Exemple :

.message-profile--small {...}

On se retrouve avec du code légèrement redondant dans le HTML mais pas dans le CSS.

Exemple :[

<article class=”message”>
     <header class=”message-header”>
     </header>
     <div class=”message-body”>
     </div>
</article>

TIP5: Single Responsability Principle

Méthode utilisée principalement dans le développement Orienté-Objet.

Chaque classe a une responsabilité unique :

• une classe pour le style graphique
• une classe pour identifier un bloc fonctionnel
• une classe pour modifier ou nuancer une autre

Exemple :

<article class=”message”>
     <header class=”message content”>
     </header>
     <div class=”message left”>
     </div>
</article>

TIP6 : Utilisation de sélecteurs spécifiques

• u-utilities : déclaration d’un utilitaire

Exemple :

.u-pull-left {
   float: left ;
}

• is-modifier : modification d’un bloc dans un certain état

Exemple :

<div class=”is-closed”> </div>

• block-element–modifier : spécification d’une variation

Exemple :

<div class=”user-avatar user-avatar--small”></div>

• js-property : réservation au Javascript

Exemple :

<div class=”js-expand”> </div>

TIP7: STYLEGUIDE

Souvent, nos feuilles de style ne sont pas documentées. Il est utile d’avoir la documentation pour maintenir notre CSS. Il existe donc un outil pour générer des guides de style : Hologram.  Cet outil est écrit en Ruby. Il va parser les commentaires de nos feuilles de style et générer un guide. On pourra utiliser Cortana pour définir le thème du guide.

Exemple: http://yago.github.io/Cortana-example/

Conclusion

Pour maîtriser son CSS , il faut retenir les points suivants:

• Respecter les règles de développement définies par l’équipe
• Structurer ses feuilles de style
• Utiliser des frameworks pour faciliter l’écriture de ses feuilles de style
• Documenter

ALLER PLUS LOIN

Hologram: http://trulia.github.io/hologram/

Cortana: https://github.com/Yago/Cortana

Guidelines : http://cssguidelin.es/ by Harry Roberts

https://medium.com/@fat/ by FAT (Bootstrap)