shop-cart

Vous lisez actuellement: Le css avec classe, petite introduction aux best practices.

Le css avec classe, petite introduction aux best practices.

Plus besoin de vous le présenter, le CSS est une partie essentielle dans la vie d’un projet.

On a tous eu cette sensation, dans notre vie de développeur, que le design d’une page était le pire moment à passer sur un projet. Tous ces éléments à styler, la réflexion sur comment les appeler et les placer. Tout ce temps perdu à rechercher sur le net des exemples a appliquer.

Aujourd’hui, je vous montrerais quelques outils actuel, permettant de vous mener sur la bonne route, qui vous réconcilieras avec le CSS, pour peu que vous vous y attardiez. Cependant, ne pensez pas trouver ici toutes les réponses, car je pendrais aussi du temps pour étayer mes propos dans des articles focus sur chaque partie.

OOCSS (Object Oriented CSS)

le principe ici, c’est qu’on va penser design de la page, indépendamment de la structure. Ce que je veux dire par là, c’est que l’on va créer des classes nous permettant d’avoir un élément visible, sans prendre en compte le type de balise auquel on va l’associer et des classes permettant d’associer des changements graphiques.

.myObject {
 display: block;
 border-radius: 5px;
 padding: 15px 20px;
}

.blue {
 background-color: blue;
}

.blue:hover {
  backgtound-color: cyan;
}

.bigText {
 font-size: 100px;
}

Ce qui est sympa avec ça, c’est qu’en créant notre objet CSS on va pouvoir en faire plein de choses, l’objet est créé avec des propriétés et la partie graphique sortie de la structure globale.

On va pouvoir le réutiliser partout, avec les même propriétés ou en variant au besoin.

L’avantage, c’est la modularité, c’est a dire qu’on peux la mettre dans 2 balise structurantes différentes et avoir exactement le même rendu, de positionnement et graphique.

Le jour ou le besoin client change, on adaptera le style, en modifiant uniquement notre objet CSS et la modification se répercuteras partout dans l’application.

Enfin, on va pouvoir jouer avec les combinaison de style (d’autres classes), afin d’avoir un même objet, mais avec des variantes de couleur ou de taille. Tout est possible en structurant proprement.

BEM (Block, Element, Modifier)

Le BEM CSS  apporte une solution au problème de nommage. Quand on analyse une page, on peux remarquer qu’elle se compose de différent blocs. Ces blocs comportent des éléments qui, bien-entendu, peuvent être des éléments de même type (boutons, input…) au sein du même groupe, mais avec des styles totalement different.

Dans l’exemple ci-dessous, on va partir d’un block auquel je vais donner une classe .Block. De là, les éléments qui seront enfants auront une classe du style .Block_element. Enfin, si plusieurs éléments du même type ont des styles ou des états différents, on jouera avec des modificateurs que l’on nommera .Block_element–modifier.

.Block {
}

.Block_element {
}

.Block_element--modifier {
}

Vous le remarquez, .Block a une majuscule, c’est normal. En BEM CSS, on écrit le nom du block en UpperCamelCase et pour les éléments et modificateur en lowerCamelCase.

l’avantage premier de BEM est qu’il permet de réduire grandement les conflits de nommage. Si on a un titre pour une page et un titre pour un article, on pourras leur définir une classe _title à chacun, sans que les styles se confondent:

.Page {
}

.Page_title {
}

.Article {
}

.Article_title{
}

Le principe des modifier est de préciser des changements de propriétés dans les éléments. Prenons l’exemple d’un bouton. Imaginons qu’au sein d’une même page je veuille en implémenter trois identiques, mais avec une couleur différente pour chacun :

.button {
  display: inline-block;
  padding: 10px 15px;
  border: 1px solid black;
  border-radius: 3px
  color: black;
}

.button--create {
  border-color: blue;
  color: blue;
}

.button--update {
  border-color: yellow;
  color: yellow;
}

et dans la structure html  nous aurions :

<button class="button">button</button>
<button class="button button--create">Create</button>
<button class="button button--update">Update</button>

SCSS (Sassy CSS)

Personnellement (ce n’est que mon avis et il compte beaucoup), je n’utilise plus de CSS à proprement dit. Je suis passé au SCSS ! C’est un préprocesseur CSS3 qui va nous permettre d’aller plus loin dans les feuilles de styles.

Première chose, et non des moindres, on peux imbriquer nos classes ! Oui, vous avez bien lu.
Plus besoin de décrire des classes, en parcourant une arborescence complète, imbitable, pour chaque éléments que l’on doit travailler.

// Notre style en CSS
section {
  display: block;
}

section div {
  width: 700px;
}

section div span {
  font-size: 16px
}

// deviendras en SCSS
section {
  display: block;

  div{
    width: 700px;

    span{
      font-size: 16px;
    }
  }
}

On se retrouve avec une arborescence visuelle identique à ce que l’on trouve dans nos fichiers HTML. Plutôt cool, isn’t it ?

Et ce n’est pas tout, on a aussi la possibilité de stocker des valeurs comme sous forme de variables.

On peux définir une couleur, ou bien une police, comme étant une variable et l’utiliser dans autant de propriétés que l’on souhaite. Avec ça, si on change le contenu de notre variable, elle se répercutera partout où elle a été appelé. Quel gain de temps quand même !

// exemple de déclaration de variable pour des couleurs

// déclaration des couleurs
$color1: yellow;
$color2: blue;
$color3: green;

// utilisation des couleurs
div {
  background-color: $color1;

  p {
    color: $color2;

    button {
      border: 1px solid $color3;
    }
  }
}

On bénéficie aussi de la possibilité de faire des feuilles de styles de façon modulaire, que l’on peux importer ailleurs dans notre projet. réutilisons l’exemple des couleurs :

Dans un fichier color.scss, nous déclarerons nos variables de couleurs :

// color.scss
$color1: yellow;
$color2: blue;
$color3: green;

Ensuite, dans un fichier styles.scss, nous importons nos couleurs :

// styles.scss
@import "color.scss";

div {
  background-color: $color1;

  p {
    color: $color2;

    button {
      border: 1px solid $color3;
    }
  }
}

Parlons rapidement des mixins. Plus qu’une simple classe, elle sont en fait une sorte de fonction, que l’on crée directement dans notre feuille de style. Comme une vraie fonction en programmation, elle peut prendre, ou non, un paramètre. Et comme son nom l’indique, elle va nous permettre de créer des mix de plusieurs style et de les utiliser où bon nous semble.

// exemple de mixin avec parametre pour un 
// border-radius en fonction du navigateur

// déclaration du mixin ($radius est le paramètre)
@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
  -moz-border-radius: $radius;
  -ms-border-radius: $radius;
  border-radius: $radius;

// utilisation du mixin (5px est donc la valeur que prendre $radius)
.button {
  @include border-radius(5px);
}

SCSS étant un langage clairement orienté object, nous pourrons utiliser de l’héritage. Ici le principe est simple, dans un cas où nous aurions plusieurs éléments distincts, qui auraient un certain nombre de propriétés identiques, nous pourrions les regrouper au sein d’une classe unique que l’on étendrait aux autres.

// déclaration d'une classe parente
%centered {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

// @extend permettant d'étendre la classe parente par héritage
.container {
  @extend %centered.

  .button {
    @extend %centered;
  }
}

Enfin, nous avons la possibilité d’utiliser des opérateurs mathématiques. Le plus simple ici serait directement de vous montrer un exemple assez incroyable concernant le calcul automatique de RATIO.

Disons que nous souhaitions calculer la taille de deux <div> côte à côte dans un container (une grille de 1000px de large).

// déclaration de mes largeur par un système de calcul
.container {
  width: 100%;

  .left {
    float: left;
    width: 680px / 1000px * 100%;
  }

  .right {
    float: right;
    width: 300px / 1000px * 100%.
  }
}

Je définit les largeurs que je souhaite en pixels, et décide de les convertir en pourcentage. Le design que mon UI m’a fournit fait 1000px, mais je ne connait pas la taille d’écran de mes utilisateurs. Avec l’exemple sus-cité, nous partons d’un container de 100% et demandons à SCSS de se débrouiller pour convertir les tailles de bases, se référants à une grille de 1000px, en pourcentage.

Il y a des centaines de possibilités avec les opérateurs, il serait bien trop long de vous les développer ici, mais n’ayez craintes, je prendrais du temps pour faire le focus sur chaque partie de cette petite introduction.

 

Avec

1155

Vues


Écrit par

Christophe Mendes

Christophe est développeur front spécialisé intégration chez Blueanchor. En reconversion depuis plus d’un an aux technologies du web, il travail essentiellement sur le framework Angular et garanti l’esthétique des outils et des projets clients.


Afficher la conversation (0)

Recommander cette page

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

0 People Replies to “Le css avec classe, petite introduction aux best practices.”