Rédiger un bon CSS

Publié: 2016-10-17

J'essaie toujours d'apprendre de nouvelles choses. Cependant, j'essaie aussi d'apprendre des façons d' améliorer la façon dont je fais déjà les choses. À la fois dans mon travail à temps plein et pour les projets parallèles des clients, la chose que j'ai toujours voulu améliorer était mon CSS. J'ai toujours eu l'impression d'être assez bon en matière de CSS, mais je l'ai toujours trouvé compliqué à lire et souvent difficile à maintenir.

Ce que j'ai essayé de faire, c'est de découvrir ce qui fait un CSS bon, lisible et maintenable. Je pense que j'ai trouvé (et trouvé) quelques façons de rendre tout cela possible.

Les problèmes

Il y a plusieurs choses qui me dérangent à propos de CSS. Les désagréments les plus courants que j'ai sont :

  • répéter le code commun
  • préfixes de navigateur
  • manque de commentaires
  • plus de sélectionneurs qualifiés
  • mauvais noms de classe

En ce qui concerne mes projets personnels, j'assume l'entière responsabilité de mon code. Je commente rarement mon CSS et le traite souvent comme une réflexion après coup. C'est tout simplement faux.

Pendant longtemps, j'ai pensé que mes noms de classe étaient "sémantiques" et que c'était juste moi qui faisais les choses, donc il n'y avait pas besoin d'expliquer le code, ou de petits "hacks", ou quoi que ce soit.

Revenir au code sur un projet de longue date prouve rapidement que cette théorie est très fausse.

Quand il s'agit de code au travail, je ne peux pas prendre tout le blâme. En fait, une partie du problème est le nombre de personnes qui ont mis la main là-dedans. Actuellement, notre équipe compte sept d'entre nous qui, à un moment donné, ont écrit du CSS pour nos sites, avec 6 à 8 autres qui sont venus et repartis au fil du temps. années. Chaque membre de l'équipe possède différents niveaux de connaissances et de compétences en matière de CSS.

De plus, comme c'est souvent le cas pour les projets de longue date, une partie du code est ancienne . Une grande partie est pré-CSS3, ou pré-toute-tendance-était-cool-il y a 5 ans. Dans les deux cas, il y avait souvent des façons différentes de faire les choses au moment où il a été écrit, et dans certains cas, un manque naturel de connaissances.

J'ai aussi appris que certains programmeurs insistent sur le fait que leur code est « auto-documenté ». Si vous n'êtes pas familier avec ce terme, il se traduit par "mon code n'a pas de commentaires".

Solutions

Même si rien n'est parfait, je crois qu'il y a des choses que nous pouvons faire pour améliorer notre code. J'ai découvert CSS Guidelines par Harry Roberts il y a quelque temps. Itt tient sa promesse de "conseils et directives de haut niveau pour l'écriture de CSS sains, gérables et évolutifs".

commentaires

Alors que les directives CSS donnent des détails sur les styles de commentaires, j'essaie personnellement de mettre quelque chose pour dire à l'avenir ce que je pensais. Je commence chaque composant par un commentaire représentant le titre, les détails sur l'intention du composant.

Lors de l'utilisation d'un préprocesseur, je style des commentaires spécifiques à inclure dans le CSS ou à ignorer par le préprocesseur. Je travaille toujours sur cette partie, et j'essaie de prendre l'habitude de mettre quelque chose , n'importe quoi .

Orientation objet

L'orientation objet est un paradigme de programmation qui divise les grandes choses en petites choses. De Wikipédia :

La programmation orientée objet (POO) est un paradigme de programmation qui représente le concept d '«objets» […] qui sont généralement des instances de classes, [et] sont utilisés pour interagir les uns avec les autres pour concevoir des applications et des programmes informatiques.

En matière de CSS, nous appelons ce CSS orienté objet, ou OOCSS . Le concept de base sépare la structure de l'élément de la peau de l'élément. Cela signifie que nous pouvons facilement réutiliser tous les modèles de conception récurrents, sans nécessairement réutiliser les détails de mise en œuvre spécifiques en même temps. OOCSS se concentre fortement sur la réutilisation du code, ce qui nous rend plus rapides et peut réduire la taille de notre base de code.

Je pense aux aspects structurels comme les squelettes ; cadres communs qui donnent des constructions appelées object . Ces objets sont des modèles de conception simples qui sont exempts de tout cosmétique. Nous extrayons la structure d'un ensemble de composants afin d'avoir un objet générique.

Nous ajoutons ensuite éventuellement la couche "peau" à notre structure afin de donner aux abstractions un aspect et une sensation spécifiques. Par exemple (tiré des directives CSS):

 /**
 * Un objet bouton simple et sans conception. Étendez cet objet avec un skin `.btn--*`
 * classer.
 */
.btn {
    affichage : bloc en ligne ;
    rembourrage : 1em 2em ;
    alignement vertical : milieu ;
}

/**
 * Peau des boutons positifs. Étend `.btn`.
 */
.btn--positif {
    couleur de fond : vert ;
    Couleur blanche;
}

/**
 * Peau des boutons négatifs. Étend `.btn`.
 */
.btn--négatif {
    couleur de fond : rouge ;
    Couleur blanche;
}

Ici, nous voyons comment la classe .btn fournit simplement une structure à un élément, mais n'a rien à voir avec les cosmétiques. Nous pouvons étendre .btn avec une seconde classe, comme .btn--positve pour donner à cet élément un style plus spécifique :

 <bouton class="btn btn--positif">OK</bouton>

Je préfère de loin utiliser plusieurs classes dans mon HTML plutôt que d'utiliser quelque chose comme @extend dans un préprocesseur. Cela me donne plus de visibilité dans mon HTML me permettant de voir rapidement quelles classes sont appliquées à mon élément. Cela signifie également que mes classes ne sont pas étroitement liées aux autres styles de mon CSS. Cela aide en quelque sorte OOCSS à suivre les concepts d' encapsulation .

BEM

BEM ( Block, Element, Modifier ), est une méthodologie frontale développée chez Yandex. BEM est en fait une méthodologie très complète, et honnêtement, je n'ai pas creusé tous les détails, mais ce qui m'intéresse, c'est simplement la convention de dénomination.

J'utilise des conventions de nommage de type BEM. Le concept est le même, mais la syntaxe exacte peut différer légèrement.

BEM répartit les cours en trois groupes :

  1. Bloc : la racine ou la base d'un composant
  2. Element : un composant à l'intérieur d'un bloc
  3. Modificateur : une variante ou une extension du Bloc

Une analogie très basique ( pas un exemple):

 .chien {}
.dog__tail {}
.chien--petit {}

Les éléments sont délimités par deux traits de soulignement (__) et les modificateurs sont délimités par deux traits d'union (–).

Dans l'analogie ci-dessus, nous voyons que .dog est le bloc, la racine de l'élément. Ensuite, .dog__tail est un élément, c'est une partie plus petite d'un bloc .dog . Enfin, .dog--small est Modifier, une variante spécifique du bloc .dog . Vous pouvez également appliquer des modificateurs aux éléments. par exemple, nous pourrions avoir .dog__tail--short pour encore une fois, spécifier une variation sur l'élément dog__tail .

Dans certains cas, je peux vouloir plusieurs mots pour les blocs, les éléments ou les modificateurs. Dans tous les cas, ceux-ci sont séparés par un seul trait d'union (-), et les classes sont toujours écrites en minuscules .

Préprocesseurs

J'ai passé du temps à travailler les préprocesseurs CSS dans mon flux de travail, et jusqu'à présent, cela a été incroyablement précieux. Les préprocesseurs CSS prennent du code écrit dans un langage prétraité et le convertissent en bon vieux CSS. Ils ne sont pas CSS, ce qui signifie qu'ils ne sont pas liés par les mêmes règles et limitations que CSS. Bien que CSS soit génial, il ne nous permet pas toujours de faire facilement les choses que nous aimerions faire.

Par exemple, une chose qui serait vraiment sympa en CSS est les variables . Peut-être que vous voulez que quelque chose ait la marge gauche d'un élément identique à la largeur d'un autre, et soudainement quelqu'un décide que ces nombres doivent changer. Puisqu'il s'agit du même numéro et que votre mise en page peut dépendre de ce numéro, vous devez le modifier à plusieurs endroits. Mais avec un varibale , vous pouvez le modifier à un seul endroit et le refléter dans l'ensemble de la mise en page. Bien sûr, les préprocesseurs sont bien plus que de simples variables, mais c'est un début !

Vous n'êtes évidemment pas obligé d'utiliser un préprocesseur, mais je pense que vous constaterez que la plupart des gens qui le font ne reviendront pas en arrière. Je sais que je ne le ferai pas. Le gain en flexibilité et la lisibilité accrue sont des choses auxquelles je ne peux tout simplement pas renoncer. Le simple fait de pouvoir utiliser des variables et des mixins suffit à me garder accroché.

Il existe plusieurs préprocesseurs disponibles, mais les deux seuls que j'ai vraiment regardés et utilisés sont LESS et SASS . Veuillez jeter un coup d'œil et envisager d'en ajouter un à votre flux de travail, vous ne regarderez pas en arrière.

Final

Mon vrai point ici, c'est que CSS peut être meilleur. Tout peut être mieux. Quelqu'un m'a dit récemment dans un commentaire sur un post sur Reddit que "CSS n'a pas de sémantique". Je ne suis pas du tout d'accord. CSS 100%, sans aucun doute peut être sémantique.

Utiliser OOCSS et BEM donne en fait à votre CSS une signification très sémantique. Cela ne signifie pas que c'est facile dès le départ, mais cela vaut la peine d'être exploré. Combinez cela avec les préprocesseurs CSS, et vous avez le potentiel d' un CSS très lisible, maintenable et évolutif .

J'aimerais également noter que cela rend non seulement votre CSS (prétraité ou non) plus lisible, mais rend également votre HTML plus lisible, en appliquant des noms de classe sémantiques aux éléments.

TL;DR

Ok, peut-être que c'était beaucoup - pour résumer, écrivez un meilleur CSS en faisant ceci :

CSS orienté objet :

  • chaque classe fait une chose — elle le fait bien, elle le fait bien

Noms des classes de style Block, Element, Modifier (BEM) :

  • Bloc : .grid
  • Élément : .grid__item (2 traits de soulignement)
  • Modificateur : .grid--wide (2 traits d'union)

Les préprocesseurs sont géniaux :

  • Découvrez-les : MOINS – SASS
  • ou trouvez-en d'autres : 8 préprocesseurs CSS pour accélérer le temps de développement