編集:このStackOverflow Questionを指している Kobi による優れたコメントにより、以下の質問を修正しました。
Nicole Sullivan のオブジェクト指向 CSSフレームワークを試した人はいますか?または自分の? もしそうなら、利点/欠点は何でしたか?
フレームワークを使用している生産現場はありますかオブジェクト指向 CSS?
2456 次
4 に答える
3
OOCSS フレームワークは、独自の原則によって定義されたいくつかの問題を解決しません。OOCSS にはまだ冗長性が含まれており、コンポーネントの構成を DOM に移動することで、コンテンツをプレゼンテーションに結合します。
OOCSS は、ユーザーが一貫した方法で CSS を維持することを奨励する、いくつかの優れた設計上の決定を行います。これは良いことです。しかし、付属のドキュメントがないということは、ニーズに完全に適合しない場合は、リバース エンジニアリングを行う必要があることを意味します。このプロセスは信頼できないため、開始した場所に戻ってしまう可能性があります... 乱雑な CSS が作成されます。
于 2011-01-03T04:33:14.183 に答える
3
ほとんどのスタイルシートで OOCSS と通常の CSS の両方を使用しています。タイポグラフィのスタイリングに OOCSS を使用するのは理にかなっているとは思いませんが、列、ボックス、ボタンなどについては理にかなっていると思いますし、(私の意見では) コードをよりシンプルにするのに本当に役立つと思います。
やや不自然な（そしてひどい - クラスはフォームではなく機能を記述する必要があります）例を使用します。
OOCSSの使用
a.button {display: block; background-color: red;}
a.border {border: 1px solid orange;}
<a class="button border" href="#">My bordered button</a>
<a class="button" href="#">My normal button</a>
通常の CSS の使用
a.button_and_border {display: block; background-color: red; border: 1px solid orange;}
a.button_no_border {display: block; background-color: red;}
<a class="button_and_border" href="#">My bordered button</a>
<a class="button_no_border" href="#">My normal button</a>
ご覧のとおり、OO の例では CSS が少なく、個人的には読みやすいと思います。しかし、結局のところ、それはすべて個人の好みとコーディングスタイルによるものだと思います:)
于 2009-06-17T18:30:49.890 に答える
2
私はそれを使用し、それを愛しています。私が勤務している大学では、私が作成したリスト {} オブジェクトを使用するリッチなイントラネット Web アプリケーションを使用しています。リンクを水平方向と垂直方向に配置しますが、それらをヘッダー バー、メニュー、ツールバー、タブ、アコーディオン、およびボタン グループに変換する「拡張クラス」(スキン) を備えています。List {} オブジェクトには色や境界線は含まれず、clearfix といくつかの修飾子のみが含まれます。実際の外観は別のクラスに保存されます。また、プリプロセッサを使用して
このルートを下る場合、3つの提案をします。
BEM (ブロック / エレメント / モディファイヤ) の命名規則を使用する
基本的なレゴ ブロックを考え、クラスを使用してそれらを拡張します。
LESS または SASS を使用して外観を分離する
于 2013-02-10T02:59:50.703 に答える
2
彼女が提示した落とし穴の 1 つである oocss でタグを指定するべきではありません。そのため、他のタグで .button を使用して、その新しいタグを拡張できます。
<button class="button">works on this</button>
<a class="button">works on this also</a>
<input type="submit" class="button" value="and this too"/>
css で a.button を指定すると、別のタグで使用したい場合は css でもう一度繰り返す必要があることを意味します..主なポイントは、スタイルを繰り返さず、冗長性を避けることです..彼女をダウンロードする必要がありますgithub の例
于 2010-09-13T23:26:16.217 に答える