Deklarieren von Sass-Variablen mit der BEM-Methode

Question

Ich versuche, die BEM-Methode für meine Variablen zu implementieren.

// Variables 
    // Colors 
    $color--blue--light: #3696D1; 
    $color--grey: #2D4452; 
    ... 
    // Fonts 
    $body__font--sans-serif--roboto: 'Roboto', sans-serif; 
    ... 

/* Global */ 

body { 
    font-family: $body__font--sans-serif--roboto; 
    background-color: $color--blue--light; 
    color: $color--grey; 
}... 

Ist dies ein guter Ansatz für die BEM-Methode?

Auch ich werde die Farbvariable für verschiedene Blöcke (Körper, Header ...) verwenden, sollte ich einen Block hinzufügen, wenn die Farbvariable deklariert?

Answer 1

Wenn es hilft, Ihren Code zu organisieren und zu standardisieren, ist das ein guter Ansatz. Wenn Sie das Gefühl haben, dass es unnötig ist, können Sie eine andere Konvention verwenden.

Zum Beispiel habe ich BEM verwenden in Markup:

<div class="myBtnClass myBtnClass--blue"> 
    <div class="myBtnClass__inner"> 
     etc etc etc 

In der Benennung von Variablen ich hilfreich nicht das Gefühl ist so ausführlich und streng und ich verwende einfach

$red: #cc0000; 
$roboto: 'Roboto', sans-serif; 

kann aber auch auf die abhängig Komplexität des Projekts, an dem Sie arbeiten.