16

オブジェクト指向 CSS という新しいキャッチ フレーズが Web 開発分野で出現しているようです。

一見すると、これはキャッチーなスローガンにベスト プラクティスがパッケージ化されているだけのように思えます。私は運動の背後にある意図を理解し、完全に尊重しますが、それ以上のことはありますか?

このアプローチをより信頼できるものとして際立たせるさらなる洞察を誰かが持っていますか、それともクラスを正しく継承およびカスケードすることを確認するためのリマインダーとしてそれを取る必要がありますか?

4

10 に答える 10

10

CSS にすでに存在する何かのキャッチーな流行語だと思います。もちろん、OO とそうでないもの、および CSS がオブジェクト指向であることについて話し始める前に、それが実際に何であるかを定義する必要があります。しかし、OO の基本原則は次のとおりであると仮定すると、次のようになります。

  • クラス
  • 物体
  • 実例
  • 方法
  • メッセージパッシング
  • 継承
  • 抽象化
  • カプセル化
  • ポリモーフィズム
  • デカップリング

カスケード スタイル シートは、クラスの定義、(クラスを要素に割り当てることによる) インスタンス/オブジェクトの作成、クラスの継承 (多重継承でさえも)、抽象化 (例えば、プレーン要素のスタイル) とポリモーフィズム (異なる要素に同じクラス名を定義することによる)。もちろん、CSS の静的な性質のため、メソッド/メッセージの受け渡しはできません。

したがって、一般的にはオブジェクト指向の方法で CSS を開発するための有効なアプローチであると言えますが、実際にはオブジェクト指向 CSS とは呼びません。少なくとも私にとっては、それは CSS に深く内在するものだからです。「私はオブジェクト指向Javaをやっている...」と言っているようなものです。

于 2009-03-18T09:18:12.923 に答える
5

キャッチーな流行語と正当なデザイン アプローチ。

「クライアントはすべてを変更する」Web 開発パラダイムを忘れがちであるという点で、いくつかのアイデアは少し素朴だと思います。

于 2009-03-18T08:53:38.910 に答える
4

それを「オブジェクト指向のCSS」と呼ぶことの流行は、実際にはその有用性と概念の幅広い採用を損なっていると思います。

それを読んだとき、それがOOだったという主張は、それが実際に何であるかについての私の理解を実際に遅らせたと思います。

プログラミングで「オブジェクト指向」が何を意味するのかを知っている人は、実際にはオブジェクト指向ではないので、懐疑的になりますね。これは、CSSの効率を向上させるためにいくつかのOOの原則を適用する試みにすぎません。反対に、ほとんどのクライアント側の開発者は、プログラマーでなければ概念をまったく理解しないため、困惑したり、困惑したりするだけです。

したがって、優れたコンセプトは、ブランド変更が必要です。最大CSS！パワーCSS！CSS Reborn！CSS Squared！CSS Prime！そんな感じ。

于 2009-03-19T11:16:05.533 に答える
3

私は何年もこれを言ってきました。

CSS セレクターは、インスタンス ID とクラスに基づいています。多重継承もサポートしています。それはどれほど明白でしょうか？

CSS をオブジェクト用語で考える利点は、マークアップ要素の「キャスト」を開始するのが非常に簡単になることです。その div を突然 INotRenderedAnymore にする必要がありますか? JS に class 属性を一致するように拡張させるだけで.removed、スタイル プロパティをいじらないでください。

明らかに、これはかなり平凡な例ですが、特に JS 操作のコンテキストでは、利点は明らかです。変更が必要な実際のスタイルから JS を切り離すことができます。これはメンテナンスと抽象化の両方のボーナスですが、非常に具体的なスタイルを直接設定しない (CSS でオーバーライドできない) などの付加的な利点もあります。

于 2009-03-18T09:04:25.140 に答える
3

後世のために、この答えを何年も後に書きます。上記のすべての回答は、オブジェクト指向 CSS についての真剣な話を聞いたことがないことは明らかです。OPが流行語であるかどうかを尋ねたとき、それはその表現が会話に値する主題を指していることを示しているはずです（「オブジェクト指向とはどういう意味ですか？」よりも）。

Objected-Oriented CSS は、Yahoo のフロントエンド テック エバンジェリストである Nicole Sullivan によって造られたと私が信じている用語です。 彼女は、Facebook のコンサルティングを受けて、表示用のフロントエンド コードをよりスリムで管理しやすいものにリファクタリングしました。続けました。「オブジェクト指向」という用語は、CSS 自体の性質 (それ自体) を指すのではなく、簡潔さと拡張性に役立つ CSS および影響を受けるマークアップを記述するアプローチを指します。

OO CSS の原則の例には次のようなものがあります。

  • ID をセレクターとして使用しないでください。オブジェクトが一意であるという事実は、他のすべてをオーバーライドするような方法でそのキー プロパティを定義する必要があることを必ずしも意味しません。
  • ネストされたマークアップに基づく長いセレクターは避けてください。ドキュメント構造内の偶発的な位置に基づいて要素の外観を定義することは、多くの場合論理的な誤りであり、新しい位置に移動するとセレクターを書き直す必要があります。前述と同様に、この悪い慣行は、条件付きオーバーライドまたは拡張機能がセレクターに特別な強度と特異性を必要とする原因にもなりますが、これはほとんど役に立ちません。
  • 個々の要素の外観のすべての詳細を 1 つのルールにオーバーロードしようとするのではなく、明確な表現目的で要素を作成するには、非セマンティック マークアップを使用します。これにより、CSS の冗長性が低くなります。

最終的に OOCSS の目標は DRY です。基本的に似たようなもののバリエーションを作成しているときに、何千行もの CSS を書くべきではありません。

Nicole は、このテーマについていくつかの優れた講演を行っています。彼女はまた、採用すべき有用なテクニックと回避すべき悪い慣行について詳しく説明した記事をいくつか書いています。

「OOCSS」は、拡張可能な CSS レイアウトの定型コードを提供する、彼女が作成したフレームワークの名前でもあります。このフレームワークが優れている方法と理由 ( grids モジュールは事実上あらゆる場所で使用しています) は、コード自体から完全に自明ではありません。背後にあるアイデアに関する彼女のブログ投稿を読むと、間違いなくそれをより有効に活用するのに役立ちます。そしてCSS全般。

于 2012-08-30T13:03:51.027 に答える
2

「オブジェクト指向 CSS」という用語は誤称です。

「オブジェクト指向 CSS」は、CSS を最大限に活用するための単なるデザイン パターンであり、Jonathan Snooks がSMACSSと呼んでいるアプローチと基本的に同じです。

それを OOCSS と呼ぶか SMACSS と呼ぶかにかかわらず、このアプローチの鍵は、nav 抽象化のような一般的な UI 要素を作成することです。これらの UI 要素は、追加のクラスを要素やコンテナー要素に追加することで、より具体的な機能で拡張できます。または、別の方法として、要素の ID またはセマンティック クラスを使用して、独自のカスタム CSS ルールを追加することもできます。

Cascade Frameworkは、このアプローチに基づくまったく新しい CSS フレームワークです。小さなフットプリントで最適なパフォーマンス、最適な柔軟性、最適なモジュール性を提供します。

于 2013-03-25T21:01:38.183 に答える
1

CSS は、多くの点で OO 言語に似ています。

p { color: red }
p span { color: blue }

そして、あなたは本質的に継承を持っています。テリアが犬を拡張して動物のクラスを拡張する、より複雑な例を次に示します。

.animal { font-weight:bold; color: blue; } 
.dog:before, .terrier:before { content: "GRRR"; }
.animal, .dog, .terrier { color: brown }

これで、クラス animal、dog、terrier をオブジェクト指向の方法で使用できるようになりました。

CSS は、透過的な方法で要素のスタイルを指定するという、CSS が作成された問題を解決するのに非常に優れていることを覚えておくことが重要です。オブジェクト指向の概念が増えるともっと良くなるでしょうか? わからない。誰かが言ったとしましょう: CSS ファイルは、次のように見える場合、より単純になります。

@class dog @derives_from animal /* the syntax i just invented */
@class terrier @derives_from dog

.animal { font-weight:bold; color: blue; } 
.dog:before { content: "GRRR"; }
.terrier { color: brown }

これは単純に見えますが、さらに単純な解決策は、@class をドロップし、'dog' を任意の 'terrier' に、'animal' を任意の 'dog' サーバー側 (単純な replace ステートメント) または javascript に追加することです。

CSS の最も優れた点は、シンプルで簡単にフォールバックできることです。つまり、ブラウザーは理解できない CSS を解釈する必要がなく、問題なく動作します。主要な新しい CSS 構造とのこの下位互換性を破る必要があるため、オブジェクト指向の CSS はよりバズ フレーズになっていると思います。

于 2009-05-31T22:00:25.507 に答える
0

それは、テーブルとdivなどの議論の余地のあるものの1つです。

私の意見では、多くの開発者が OO に固執しているため、最初は Javascript、現在は CSS など、あらゆるものにオブジェクト指向を固執させようとしています。誤解しないでください JavaScript にも OO の要素がありますが、脱線します。

CSS はすでにそれ自体が流行語であるため (すべての雇用主は Web 2.0 CSS アプローチを望んでいます)、多くの新しい開発者が CSS に気づき始めています。これは悪いことではありませんが、開発者として最善を尽くし、CSS を改善しようとしました。開発者の心 (私は開発者です) では、オブジェクト指向の原則に従って CSS を整理することは完全に理にかなっています。

最終的に私が言おうとしているのは、オブジェクト指向 CSS は、より論理的に見えるため、特定の人々がとるアプローチにすぎないということです。開発者が保守する予定の CSS を作成している場合は、このアプローチが適しています。CSS と独自のスタイルをどのように記述するかは、本当にあなた次第です...

個人的には、人々が CSS をどのように書くかは気にしません。それを維持することが私にかかっているとしても、とにかく Firebug はその仕事を簡単にしてくれます。

于 2009-03-18T09:03:53.877 に答える