セレクターの長いチェーンを避け、LESS CSS がプレーン CSS にコンパイルされるときに自動的に作成される 1 つのクラスベースのセレクターを使用しようとしています。詳細については、以下の例を参照してください。
http://css-tricks.com/effectively-rendering-css/に触発されて、CSS レンダリングの効率を高めるために、要素ごとに一意のクラスを作成するというアイデアがありました (重複したクラスは意図的に有益である可能性があります)。
HTML
<div class="main">
<img src="something.jpg" />
<a class="link" href="#">Click me</a>
</div>
少ないCSS
div.main {
img {border:1px solid #ccc;}
a.link {color:blue;}
}
Standard Plain CSS (上記の LESS からコンパイル)
div.main img {border:1px solid #ccc;}
div.main a.link {color:blue;}
目的のプレーン CSS (上記の LESS からコンパイルされます。親内の子要素のクラスは のようにフォーマットされます。クラスが未定義の場合
.parentElement1-parentClass1-childElement1-childClass1に使用します)null
.div-main-img-null {border:1px solid #ccc;}
.div-main-a-link {color:blue;}
もちろん、要素のより具体的/説明的なクラス名でこの問題を解決できますが、はるかに大規模なアプリケーションの場合、クラス名の重複を避けるために、このアプローチの方が優れている可能性があります。「ボディ」要素がベースとして使用され、他のすべては命名法に関してそれに対して相対的です。この要件を満たすには、HTML のクラス名を手動で定義する必要がありますが、すべての要素のクラス名の作成を自動化するスクリプトを作成する可能性があります。
LESS がこの基準を念頭に置いて compile メソッドを持つことができるかどうか疑問に思っていました。このアイデアについてどう思いますか?また、このようなものが実行可能である場合はどう思いますか?