Stenografie für Klassennamen mit regex gezielte

Question

Aufgrund der Natur des BEM mit in das Projekt an dem ich arbeite, finde ich mich und andere die folgende in CSS-Dateien verwenden:

[class*="something"] { ... } 
[class*="__something-else"] { ... } 
[class*="--other-stuff"] { ... } 
[class*="more-things"] { ... } 
[class*="__even-more"] { ... } 

Gibt es eine empfehlenswerte Abhilfe um das obige zu verkürzen, um eine langweilige Wiederholung des Wortes class zu vermeiden, oder sollten wir bei dieser Methode bleiben?

Answer 1

Sie müssen den Präprozessor wie LESS oder SCSS/Sass verwenden.

Ich verwende SCSS, um Ihre Idee zu demonstrieren.

von @mixin und @content verwenden, können Sie eine Klasse-Selektor des Generatorfunktion erstellen:

@mixin contain($name) { 
    [class*=#{$name}] { 
    @content; 
    } 
} 

einen neuen Selektor enthalten erstellen:

@include contain(--big) { 
    font-weight: bold; 
    font-size: 50px; 
} 

https://jsfiddle.net/twxia/pLy3bz44/2/

Dies scheint nicht kürzer als nur Eingabe [class*=...], aber wenn Sie Sass verwenden, können Sie diegenerierenwie folgt aus:

+contain(--big) 
    font-weight: bold 
    font-size: 50px 

Ich denke, die Verwendung der automatischen Vervollständigung Plugin für Editor oder Sass wird sovle Ihr Problem: D