Comment se préoccuper de la qualité du code CSS ?

On peut trouver de nombreuses publications sur la qualité d'une code écrites dans des langages de programmation tels que JavaScript, JavaRuby et autres. Beaucoup de choses ont déjà été dites en termes de modèles de conception, de tests automatisés et d'architecture logicielle. Dans toutes ces publications, CSS semble être traité comme un support, alors qu'il constitue une part importante de toutes les applications Internet.

Dans cet article, nous décrirons les outils et les bonnes pratiques que nous utilisons à Codest, afin que les projets que nous fournissons à nos clients soient toujours de la plus haute qualité.

PRÉPROCESSEUR SCSS

L'écriture d'un code CSS est suffisante pour les petites applications. Lorsqu'il s'agit d'une projetIl est important que le code pour des objets HTML similaires ne doive pas être répété plusieurs fois à des endroits différents. Le préprocesseur SCSS nous aide à utiliser les variables, les fonctions et les "mixins", qui rendent notre code plus structuré et plus propre.

La liste suivante contient un exemple de mixin qui vous permet de respecter le principe "Ne pas se répéter" :

@mixin flex-center {
  display : flex ;
  align-items : center ;
  justify-content : center ;
}

En utilisant ce mixin, nous pouvons écrire du code :

.item-a {
  display : flex ;
  align-items : center ;
  justify-content : center ;
  ...
}

.item-b {
  display : flex ;
  align-items : center ;
  justify-content : center ;
  ...
}

De manière plus concise et plus claire :

.item-a {
  @include flex-center ;
}

.item-b {
  @include flex-center ;
}

BEM MÉTODOLOGIE

La méthodologie BEM est une convention de nommage simple qui permet de créer un code CSS modulaire, réutilisable et évolutif. Dans le cadre de Codest, nous l'utilisons pour styliser les composants VueJS. Nous essayons d'organiser notre code de manière à ce qu'un seul fichier .scss, contenant un bloc, soit assigné à un seul composant .vue. Le style du composant v-page-header.vue peut servir d'exemple.

.page-header {
  &__title {
    font-size : 2.0rem ;
    couleur : $color-noir ;
    background : $color-white ;
  }

  &__logo {
    background : url('/images/background.png') no-repeat 0 0 ;

    &--vertical {
      background : url('/images/background-2.png') no-repeat 0 0 ;
    }
  }
}

CLASSES D'UTILITÉ

En travaillant avec la méthodologie BEM, nous avons remarqué que pour effectuer une opération très simple - par exemple, mettre en gras une partie du texte - nous devons inventer des noms de classe CSS artificiels :

.page-header {
  &__bolder-item {
    font-weight : bold ;
  }
}

Pour éliminer ce problème, nous nous sommes inspirés des classes "utilities" utilisées dans le code source du framework Bootstrap. Grâce à cela, dans le code des modèles Vue/HTML nous pouvons utiliser le type suivant :

<div>
  <span class="text-bold">Contenu</span>
</div>

ANALYSE STATIQUE DU CODE

Il n'est pas nécessaire de convaincre qui que ce soit que le fait de travailler avec un code transparent et contenant des structures cohérentes permet de modifier et d'ajouter facilement de nouvelles fonctionnalités. Il est important que toute personne qui commence à travailler sur un fragment de code existant puisse le trouver assez rapidement. Cependant, les programmeurs ont souvent leurs propres habitudes qui peuvent ne pas être comprises par d'autres personnes. équipe membres. C'est pourquoi il est si important d'utiliser des outils qui vous permettent d'automatiser la vérification du code. Dans le cadre de Codest, nous utilisons l'outil SCSS-LINT pour analyser automatiquement un code SCSS, qui contient un ensemble de règles prédéfinies. L'une des règles les plus intéressantes et les plus restrictives que nous utilisons dans nos projets peut être la règle PropertySortOrder, qui garantit l'ordre approprié des attributs au sein d'une même classe SCSS.

Imaginez les deux parties suivantes du code SCSS :

.item-a {
    font-size : 14px ;
    couleur : #FF00FF ;
    margin-top : 10px ;
    font-weight : bold ;
    background-color : #00FFFF ;
    padding : 5px ;
    marge-bottom : 10px ;
}

.item-b {
    font-size : 18px ;
    padding : 3px ;
    couleur de fond : #00FFFF ;
    margin-bottom : 4px ;
}

et :

.item-a {
  margin : 10px 0 ;
  padding : 5px ;
  couleur de fond : #00FFFF ;
  couleur : #FF00FF ;
    font-size : 14px ;
    font-weight : bold ;
}

.item-b {
  margin-bottom : 4px ;
  padding : 3px ;
  couleur de fond : #00FFFF ;
    font-size : 18px ;
}

Les deux passages sont corrects, mais le second est plus lisible. Les attributs connexes tels que les marges et les interlignes sont regroupés.

Résumé

Il est difficile en quelques phrases de donner toutes les informations sur l'organisation du code CSS dans les vastes applications web que nous créons avec le framework Codest. Nous encourageons tous nos lecteurs à laisser des commentaires sur les outils et les bonnes pratiques que vous utilisez dans vos propres projets.