[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 * 2```
**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 :[
```

     
     
     
     
```

## 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 :
```

     
     
     
     
```

## 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 :
` `
- **block-element–modifier** : spécification d’une variation
Exemple :
``
- **js-property** : réservation au Javascript
Exemple :
` `

## 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)

Menu

Pourquoi s’occuper de son CSS?

TIP 1: Définir quelques règles

TIP2: Les préprocesseurs: SASS /LESS

TIP3: Framework

Conclusion

ALLER PLUS LOIN