Guideline et bonnes pratiques SASS

Attention ! Cet article a plus de 1 an (2813 jours), ce qui signifie qu'il n'est pas forcément à jour !

Ne pas oublier les bases

Même si ce guide a pour but d’implémenter un guideline pour l’utilisation de SASS, nous ne devons pas oublier le formatage de base des règles CSS. Ceci inclut :

• Être constant dans son indentation
• Être constant où l’on place son espace avant/après les " : " et les "{ }"
• Avoir un plan pour la nomenclature des class
• Ne pas utiliser de ID #neverUseForLessDrama

@extend en premier tu mettras

Voir dès le début que la class hérite d’un tout autre ensemble de règles est pratique. C’est aussi avantageux de pouvoir surcharger cet héritage facilement et clairement.

.whatever {
    @extend .anotherClass;
    /*surcharge de style*/
    …
}

@include tu mettras par la suite

Après le @extend vient les @includes pour vos mixins. Encore ici, c’est surtout pour faciliter la compréhension de la class ainsi que le surcharge de style.

.whatever {
    @extend .anotherClass;
    @include transition(all 0.3s ease-out);
    /*surcharge de style*/
    …
}

Pseudo Class et Pseudo Elements imbriqués

Les Pseudo Class et Pseudo Elements sont reliés à la class, pour cette raison, nous devrions les imbriquer directement dans la class, et ce, avant tout autre class imbriquées. Par la suite, nous pourrons y ajouter des class imbriquées et rien d’autre ne devrait aller à la suite.

.whatever {
    @extend .anotherClass;
    @include transition(all 0.3s ease-out);
    /*surcharge de style*/
     …
    &:hover {
        background: blue;
    }
    &::before {
        content: "";
        display: block;
    }
    a {
        color:#fff;
    }
    span {
        color:red;
    }
}

Maximum de 3 niveaux d’imbriquage

.whatever {
    li {
        a {
            ...
        }
    }
}

Le principe est assez simple ici. Les chances sont que si vous êtes plus creux que 3 niveaux, vous êtes en train d’écrire du style avec des sélecteurs trop spécifiques. D’autant plus que ça rend le code difficile à lire, ça le rend aussi, moins réutilisable.

Section globale

Utiliser les sections globales comme une table des matières, aucun style ne devrait y résider.

// Vendor
@import 'bootstrap';

// fonts
@import 'components/fonts';

// utilities
@import 'utilities/variables';
@import 'utilities/mixins';

// components
@import 'components/buttons';
@import 'components/forms';

// layout
@import 'layout/general';
@import 'layout/header';
@import 'layout/footer';
@import 'layout/pages/home';

En fait, il peut même être mieux d’avoir le plus de fichiers possibles, de diviser son fichier, disons: @import ‘layout/header’; pour que dans ce dernier nous ayons : @import "global/header/logo/"; @import "global/header/dropdowns/"; @import "global/header/nav/"; Cet exemple, dans la vrai vie, ne serait certainement pas nécessaire, mais ce n’est qu’à titre d’exemple pour démontrer qu’il peut être plus simple et modulaire de tout séparer.

Partials sont tous nommés _partial.scss

C’est une convention de nommer les fichiers dépendants, qui seront importés et compilés dans un fichier parent, avec un underscore avant le nom.

Ne jamais commiter de fichier .css

De devoir commiter un fichier css indique habituellement une mauvaise configuration de workflow. Dans le projet git il ne devrait y avoir que les sources, les fichiers css seront compilés durant le déploiement. D’autant plus que si notre repo a des fichiers css, c’est à fort potentiel une source d’erreur et de conflits lors des push.

Soyez généreux avec les commentaires

C’est assez rare que l’on a des regrets d’avoir laissé un commentaire. Ils sont soit très pratiques ou tout simplement ignorés. De toutes façons, ils sont enlevés quand la compression des fichiers est effectuée.

.whatever {
    // modals are 6000, saving messages are 5500, header is 2000
    z-index: 5000; 
}

Mettre en variable tous les nombres communs, nombres avec signification

Si vous vous retrouvez à écrire plusieurs fois le même nombre qui ne serait pas 0 ou 100%, c’est que sûrement vous devriez le mettre en variable. Sass nous donne la possibilité de pouvoir jouer et contrôler facilement les variables nous donnant un accès facile à l’ajustement du style.

.whatever {
    $zHeader: 2000;
    $zOverlay: 5000;
    $zMessage: 5050;

    .header {
        z-index: $zHeader;
    }
    .overlay {
        z-index: $zOverlay;
    }
    .message {
        z-index: $zMessage;
    }
}

Dans Sass, les nombres sont un type de donné incluant tout du nombre sans unité, durée, fréquences, angles, etc. Ces derniers nous permet de faire des calculs. Pour cette raison nous devrions être constant dans la nomenclature des nombres.

Zeros

Les nombres devraient toujours afficher le zéro qui précède dans une valeur décimal, et ne jamais afficher de zéro non nécessaire à la fin.

// Yep
.foo {
  padding: 2em;
  opacity: 0.5;
}

// Nope
.foo {
  padding: 2.0em;
  opacity: .5;
}

Unités

Quand on travail avec des longueurs et des variables, nous ne devrions jamais avoir d’unité.

// Yep
// Yep
$length: 0;

// Nope
$length: 0em;

Vous n’avez qu’à penser au fait que les unités sont des chaines de caractères et que l’on ne peut pas faire de calcul avec des caractères. Pour ajouter les unités, nous devrions toujours multiplier un nombre par 1 unit comme suit :

$value: 42;

// Yep
$length: $value * 1px;

// Nope
$length: $value + px;

Mettre en variable toutes les couleurs

Habituellement, les chances sont que vous réutiliserai les couleurs à quelques endroits dans votre projet. Les variations de couleurs peuvent souvent être pris en charge par les fonctions internes de Sass. Vous pouvez en lire plus sur ce sujet : Sass color functions Les fonctions lighten ou darken aident considérablement à maintenir à jour un thème de couleur.

$sass-pink: #c69;

Vous êtes maintenant libre d’utiliser la variable où vous le désirez. Cependant si sont usage est rattaché à un thème, je serais d’avis de ne pas utiliser la variable comme tel. Au lieu, utilisez la avec une autre variable qui aurait un nom expliquant son utilisation.

$main-theme-color: $sass-pink;

En faisant cela, vous êtes plus à l’abri d’un changement de thème qui nous amènerait à quelque chose du genre de : $sass-pink: blue.

Le résultat final est entre vos mains

Sass ne fait rien que vous ne lui dirai pas de faire, vous devez donc considérer écrire votre code Sass pour que le résultat final soit exactement comme vous auriez écrit votre CSS sans ce dernier.

Catégories :

HTML CSS