2009-06-17 4 views
1

編集:。これによりStackOverflow Questionを指すコビことにより、優れたコメントに、私は以下の質問を改正している:誰かがNicole Sullivanのオブジェクト指向CSSフレームワークを使用していますか?

はそこに誰もがニコール・サリバンのObject-Oriented CSS枠組みたり、自分ののいずれかを試してみていますか?もしそうなら、長所/短所は何ですか?

フレームワークを使用している実稼働サイトはありますかオブジェクト指向のCSS

+3

を分離する

  • 使用LESSやSASSあなたがhttp://stackoverflow.com/questions/657407/object-oriented-css-catchy-buzz-phrase-or-legitimateを見たことがあります-design-approach? – Kobi

  • +3

    CSSの自然な部分に流行語があります。これはウェブサイト上のベストプラクティスではありませんか?これは、60年代のすべてのプログラマーが最終的にLinked Listを発明したのと同じです。 – jmucchiello

    +0

    コメントありがとうございました。 – Laz

    答えて

    3

    ほとんどのスタイルシートでOOCSSと通常のCSSの両方を使用しています。 OOCSSをタイポグラフィのスタイリングに使用するのは理にかなっているとは思えませんが、カラム、ボックス、ボタンなどの場合は意味があり、コードを簡単にするのに役立ちます。むしろ不自然使用

    (とひどい - クラスが形成されない、機能を記述する必要があります)例:あなたが見ることができるように、通常の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> 
    

    を使用して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> 
    

    を使用して

    、 OOの例ではCSSが少なくなっています。これは私が個人的に読んだほうが簡単です。しかし、今日の終わりには、それはすべて個人的な好みとコーディングスタイルになっていると思います:)

    2

    あなたが提示した落とし穴の1つであるoocssにタグを指定すべきではないので、.buttonそれ以外のタグでは、その新しいタグを拡張します。 CSSでa.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"/> 
    

    あなたはuは別のタグでそれを使用したい場合は、再度CSSでそれを繰り返す必要があります意味..あなたは、あなたのスタイルを繰り返していけないように 主なポイントであり、 githubで彼女の例をダウンロードする必要があります

    3

    OOCSSフレームワークは、独自の原則で定義されている問題のいくつかを解決しません。 OOCSSには依然として冗長性があり、コンポーネントの構成をDOMに移すことによって、その結合コンテンツがプレゼンテーションに戻されます。

    OOCSSは、ユーザーがCSSを一貫した方法で維持するように設計するうえで、優れた設計上の決定を下します。これは良いことです。しかし、それが付属しているドキュメンテーションの欠如は、それがあなたの必要性にあまり合わない場合にはリバースエンジニアリングする必要があることを意味します。このプロセスは信頼できるものではないので、あなたがどこで始まったのか...面倒なCSSで終わる可能性があります。

    2

    私はそれを愛用しています。私が雇用している大学では、作成したリスト{}オブジェクトを使用する豊富なイントラネットWebアプリケーションを使用しています。リンクを水平方向と垂直方向に整列させますが、ヘッダーバー、メニュー、ツールバー、タブ、アコーディオン、およびボタングループに変換する「拡張クラス」(スキン)があります。 List {}オブジェクトには色や枠線はなく、クリアフィックスといくつかの修飾子しかありません。実際の外観は、別々のクラスに格納されます。私はまた、プリプロセッサを使用します

    あなたがこのルートを下ったら、私は3つの提案をします。

    1. B.E.

    2. 基本的なレゴブロックを考え、それらを拡張するためにクラスを使用してください。外観

    関連する問題