オブジェクト指向CSS

Question

私はこのpresentation about object oriented cssを見て、私は私のどちらかがそれを正しく理解していないか、オブジェクト指向のCSSを使用する利点を理解していないと思う：

例HTML：

<div class="border-1 bg-2 color-1 font-1"> 
</div> 

例CSS ：

/* borders */ 
.border-1 { border: 1px solid red; } 

/* backgrounds: */ 
.bg-2 { background: yellow; } 

/* other sections */ 

私は非常に有用であろうカラースキームを切り替えることができること、例えば、すぐに複数の要素のスタイルを変更することができるという利点を参照してください。

実際には、HTML内、またはその一部のスタイル/ルックを定義しています。もちろん、style属性を使用するよりも優れています。これは、一連のグループのスタイルを引き続き交換できるためです。

重要なのは、HTML内でスタイルグループを定義していることですが、HTML内に「論理」グループを作成する必要があることを学びました（例：class="nav-item"/class="btn submit-btn"）。CSSはスタイルを完全に適用し、 （例えば.nav-item, .submit-btn { background: red; }）、「文体的」な観点から一緒に属している。

多分私は完全にその概念を誤解しました。しかし、私はまだ私のCSSを構築する良い方法を知らない。

Answer 1

CSSはオブジェクト指向ではありません。私の提案は、あなたが "オブジェクト指向のCSS"について読んだことを忘れ、解決しようとしているCSSの問題に焦点を当てることです。 CSSを書く、読んだり維持したり、CSS変数のような多くの機能を入手しやすくするためには、LessまたはSassがあなたの必要性にぴったりでしょう。

「オブジェクト指向CSS」で提案されているようなCSSを使用するだけで、長期的には「普通の」CSSよりも保守が容易ではない、意味のない意味のないひどいCSSにつながります。 idとclassの両方にsemantic and meaningful namesが必要です。したがって、プレゼンテーションの代わりにインテントを記述するセマンティックCSSを書くことができるフレームワークを使用することは、私の謙虚な意見でははるかに優れています。

Answer 2

これは実際の方法である「名前の削除」のほうが多いです。 あなたが示したコードは、しばしば "enterprise css"と呼ばれるものです。言い訳はありません。

以上のことから、要素に複数のクラスがあると、実際にはパフォーマンスが低下します。

他のブラウザでも同じように動作するCSSを作成する場合は、Mozilla's guidelinesに従うようにアドバイスしてください。 そして、専用の.cssファイルをIE6,7、および8のハッキングで作成してください。