Modèle BUSES

31 mai 2023

Introduction
Un nom mémotechnique
Principe de conception de l'architecture
Quelques mauvaises expériences
- Mauvaises traductions
- Imbrication sur des composants complexes

Introduction

La modèle BUSE est un ensemble de principe de conception, de regle d'usage et d'organisation afin de mettre en place du code SCSS maintenable.
L'ensemble de ses règles n'est pas immuable et doit être adapté à vos besoins.
Les cas fondateurs du modèle

Un nom mémotechnique

Base : Function, mixin, variable, reset
Utilitaire : Les éléments de base réutilisable et partageable
Structure : Les squelettes responsive sans le contenu
Element : Spécificité d'un usage
Satellite : Les bibliothèques externes et leurs surcharges

Principe de conception de l'architecture

Avoir une arborescence simple et compréhensible par tous
Appliquer des règles de nomenclature et les respecter
Décider de tout cela avec son équipe, les impliquer

Arborescence

_sass
    1-Base
    2-Utilitaire
    3-Structure
    4-Element
    5-Satellite
    style.scss

Les dossiers principaux

L'ensemble des fichiers SCSS doit être regroupé et classé dans des répertoires
Préfixé chaque dossier par une numérotation afin de les faire apparaitre dans un ordre logique : du plus abstrait au plus spécifique

Chacun de ses répertoires possède un fichier index nommé __index.scss
Le double undersore permet que le fichier se retrouve toujours en haut de l'arborescence.

_sass
    2-Utilitaire
        __index.scss
        _block.scss
        _bouton.scss
        _espacement.scss
        _flex.scss
        _text.scss
        _z-index.scss

L'index sert de fichier d'intermédiaire pour importer tous les fichiers ou les index des sous-dossiers à la racine de ce répertoire.
Les imports sont classés par ordre alphabétique où par besoin quand c'est nécessaire
Utiliser des sous-dossiers dès lors que deux fichiers ou plus aborde le même thème

index d'un dossier Utilitaire

@import 'block';
@import 'bouton';
@import 'espacement';
@import 'flex';
@import 'text';
@import 'z-index';

Classement par ordre alphabétique

index d'un dossier Base

@import 'breakpoint';
@import 'couleur';
@import 'taille';

@import 'font';
@import 'base';
@import 'z-index';

Classement par besoin

index du dossier Base plus complexe

@import 'Variable/_index';
@import 'Function/_index';
@import 'Mixin/_index';

@import 'couleur';
@import 'focus';
@import 'font';
@import 'base';

Classement par besoin

La langue

Le français ou la langue maternelle de l'équipe :

On évite tous problèmes de mauvaises traductions
Le franglais est conseillé pour les mots francisés (pourriel par exemple) et pour des termes techniques (responsive, flex etc...)
Un jargon métier est difficilement traduisible
En cas de rachat, ça leur fera les pieds !
Si votre équipe est internationale on utilisera l'anglais, imposés quelque court de rafraichissement à vos équipes !

Fichier a la racine

La feuille de style qui comporte tous les imports nécessaires, style.scss

@import '1-Base/_index';
@import '2-Utilitaire/_index';
@import '3-Structure/_index';
@import '4-Element/_index';
@import '5-Satellite/_index';

Au même niveau, l'on peux ajouter des feuille spécifique, qui importerait tous les styles de texte et lien/bouton pour les appliques dans un éditeur WYSIWYG par exemple

Bonne pratique

Établir des règles

Que l'on travaille seul où a plusieurs, il est essentiel d'établir des règles sans exception, pour ne pas à avoir à faire du cas par cas et a complexifié votre projet.
Des règles sur la nomenclature de fichier, de dossier, de nom de classe, de type de sélecteur, de norme d'indentation et de tous ce qui vous semble utile, de chose que vous avait pu rencontrer par le passé et que vous ne souhaitez pas revoir !
Idéalement il faut mettre tous ça par écrit, sur un page de votre style guide

Bannir les imbrications

Même si les imbrications peuvent faciliter la vie et que cette fonctionnalité est en working draft coté CSS, voir CSS Nesting Module
Son abus ou son utilisation pour des composants complexes est inapproprié.
Pour avoir une règle simple, mieux vaut l'interdire !

Établir une convention de Nommage

Utilisé une méthodologie existante ou faite en une a votre image : convention de nommage de BUSES

Découpage en dossier

À partir de deux fichiers traitant du même thème on, crée un sous-dossier avec un index

CSS réinitialisation

On n'utilise pas de CSS reset tout fait, on créé son propre fichier en fonction de son besoin.
Beaucoup de réinitialisations ne sont plus à jour ou peuvent ajouter des contraintes

Convention de nommage

Un savant mélange de BEM et de OOCSS afin de gommer les imperfections

On n'utilise pas les imbrications
On n'utilise pas les id
On n'utilise pas de !important
On n'utilise pas les classes de style pour cibler un élément en JavaScript
On préfixe par js__ les classe pour le JavaScript
On travail en utilitaire

On utilise des sélecteurs à un seul niveau, __ pour un sous-élément

.bouton { ... }
.bouton__forme { ... }
.bouton__icon { ... }
<button class="bouton">
    <span class="bouton__forme">
        <img src="bouton__icon" alt="">
    </span>
</button>

Les modificateurs d'un élément sont préfixé v-- (v pour variation)

.bouton { ... }
.bouton.v--actif { ... }
<button class="bouton v--actif"></button>

On ne déclare que ce que l'on utilise
Pas de fonction pour généré tout l'espacement possible en toutes les tailles, direction, point de rupture
On utilise les initiles des propriété et valeur pour faires les utilitaires des espacement, du flexbox et cssgrid
.mt-2 pour marin-top de taille 2
.df pour display:flex
.ji-c pour justify-items: center;

Quelques mauvaises expériences

Mauvaises traductions

Je comptais ajouter un nouveau composant réutilisable pour géré les cadre, lorsque je découvrir qu'il en existait déjà un mais il était nommé card. Hors cadre en anglais c'est frame
Je pense qu'il y a confusion entre le sous-élément carte qui reprend une partie des propriétés d'un cadre.

Imbrication sur des composants complexes

En voulant changer la couleur de soulignement d'un lien actif sur un mega menu responsif, je suis tomber sur un fichier faisant plus de 300 lignes de code imbriqué, écris en BEM.
Des &__item il y en avait des dizaines sans compter tous les états actif, hover, focus...
Impossible de faire une simple recherche Ctrl + F