7

オブジェクト指向 css に関するこのプレゼンテーションを見ましたが、それを正しく理解していないか、OO 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 を構築する良い方法はまだわかりません。

4

4 に答える 4

7

CSS はオブジェクト指向ではありません。私の提案は、「オブジェクト指向 CSS」について読んだことは忘れて、解決しようとしている CSS の問題に集中することです。CSS の作成、読み取り、保守を容易にするため、または (CSS 変数などの) より多くの機能を取得するためであれば、LessまたはSassの方がニーズにはるかに適していると思います。

「オブジェクト指向 CSS」で提案されているような CSS を使用すると、長期的には「通常の」CSS よりも維持するのが簡単ではない、ひどく非意味的で無意味な CSS になります。との両方idにセマンティックで意味のある名前classを付ける必要があるため、セマンティックな CSS (プレゼンテーションではなく意図を記述する) を記述できるフレームワークを使用する方が、私の謙虚な意見でははるかに優れています。

于 2011-09-15T13:36:50.603 に答える
3

これは、実際の方法というよりも、「名前の削除」に近いものです。あなたが示したコードは、「エンタープライズ css」と呼ばれる軽蔑的なものであることが多く、言い訳はできません。

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

CSS を作成するときは、 Mozilla のガイドラインに従うことをお勧めします。これは、他のブラウザーでも同じように機能します。そしてIE6、7、8用のハックで専用の.cssファイルを作ります。

于 2011-09-15T14:10:19.453 に答える
3

アイデアは、多くの要素で同じ css クラスを再利用することです。これにより、css の作成と維持の両方が節約されます。したがって、.create-button .cancel-button .create-and-newボタンを定義する代わりに、パディング、、、、、、、.buttonおよびを定義するを使用するだけです。また、さまざまなボタン スタイルのいくつかの非常に小さなクラスは、またはを変更するのが好きですsizebackgroundcolorline-heightfont-sizefont-familyfont-weightcolorfont-size

私がまだよく使用している適切な oocss プロジェクトは、https ://github.com/stubbornella/oocss/wiki にあります。

しかし、はい、less を見る必要があります。複数の要素で同じ css プロパティを適切なクラス名で簡単に再利用できます。

于 2011-09-15T17:02:38.440 に答える