Gibt es eine Bibliothek zur Überprüfung, ob CSS-Regeln in einem bestimmten Format geschrieben sind?

Question

In meinem Projekt, ich habe diese Konvention wie meine CSS-Dateien zu schreiben

.some_name_APP_CONTAINER <sub css rules...> { 

} 
.some_name_APP_CONTAINER <sub css rules...> { 

} 
.some_name_APP_CONTAINER <sub css rules...> { 

} 
etc... 

So in der CSS-Datei, möchte ich alle, um sicherzustellen, dass die Regeln (einschließlich solcher in Medien Abfrage) mit .some_name_APP_CONTAINER starten (ein Klasse), und der Teilstring some_name kann ein beliebiger Klassenname sein, sollte aber für alle Regeln in der CSS-Datei gleich sein. So gilt dies zum Beispiel:

.some_name_APP_CONTAINER .table { 

} 
.some_name_APP_CONTAINER div { 

} 
.some_name_APP_CONTAINER div:hover { 

} 

und das ist nicht gültig

.some_name_APP_CONTAINER .table { 

} 
.some_name_APP_CONTAINER div { 

} 
div:hover { 

} 

Das ist also in erster Linie aus Wartungsgründen, so dass alles unter der Klasse some_name_APP_CONTAINER eingekapselt wird. Gibt es irgendeine Bibliothek, die jemand für die Validierung von CSS-Regeln verwendet?

Auch ich bevorzuge node.js Bibliothek als das würde am besten funktionieren.

Dank

Answer 1

Sie einen CSS-Vorprozessor Sie das tun nutzen könnten, um zu helfen. Obwohl sie das CSS nicht analysieren würden, um die gewünschte Verkapselung zu gewährleisten, würden sie es sehr einfach machen, eine solche Struktur zu implementieren und zu überprüfen. Die beiden beliebtesten sind Sass und LESS.

Mit CSS-Vorprozessoren können Sie Ihre Selektoren verschachteln. Um "Namespace" Selektoren können Sie Folgendes tun.

Sobald der Pre-Prozessor die oben genannten Pseudo-CSS kompiliert, erhalten Sie die Ergebnisse, die Sie suchen.

.some_name_APP_CONTAINER table {} 
.some_name_APP_CONTAINER div {} 
.some_name_APP_CONTAINER div:hover {} 

die Ergebnisse sicherzustellen, dass Sie so einfach sein wollen könnte, wie zu sehen, wenn alle Wähler in einer Datei befinden mit dem .some_name_APP_CONTAINER Block/Selektor.