オブジェクト指向CSS（OOCSS）の基本
フロントエンドの開発は、毎年追加される多くの新しいテクニックで素早く動きます。開発者がすべてについていくのに苦労する可能性があります。 SassとPostCSSの間では、開発ツールの世界で迷子になるのは簡単です。.
1つの新しい技術は、略してOOCSSとも呼ばれるオブジェクト指向CSSです。これはツールではなく、それを目的としたCSS作成方法論です。 CSSをモジュール式およびオブジェクトベースにする.
この記事では、私が紹介したいのですが OOCSSのコアとなる基礎, そして これらのアイデアをフロントエンドのWeb作業にどのように適用できるか. このテクニックはすべての開発者についていけないかもしれませんが、あなたのワークフローがそれから利益を得ることができるかどうかを決めるために新しい概念を理解する価値があります.
CSSをオブジェクト指向にするもの?
オブジェクト指向プログラミング（OOP）は、以下に焦点を当てたプログラミングパラダイムです。 再利用可能なオブジェクトを作成する そして 関係を築く コードをプロシージャ（ルーチン、サブルーチン、または関数）に編成する手続き型プログラミングとは対照的に、それらの間.
OOPは両方で広く使用されるようになりました JavaScriptとバックエンドの言語 ここ数年で、CSSをその原則に従って整理することはまだ新しい概念です.
の “物” OOCSSでの HTML要素 またはそれに関連するもの（CSSクラスやJavaScriptメソッドなど）。たとえば、さまざまな目的（ニュースレターの登録、広告ブロック、最近の投稿など）で複製できるサイドバーウィジェットオブジェクトがあるとします。 CSSはできます これらのオブジェクトをまとめてターゲットにする スケーリングが簡単になります.
OOCSSのGitHubエントリを要約すると、CSSオブジェクトは4つの要素から構成されます。
- DOMのHTMLノード
- それらのノードのスタイルに関するCSS宣言
- 背景画像のようなコンポーネント
- オブジェクトに関連付けられたJavaScriptの動作、リスナー、またはメソッド
一般的に言って、CSSは考慮するとオブジェクト指向です。 再利用可能なクラス そして 複数のページ要素をターゲティング可能.
多くの開発者は、OOCSSは他のユーザーと共有するのが簡単で、数か月（または数年）の非アクティブな開発の後で簡単に拾うことができると言います。これは、CSSでオブジェクトを分類するためのより厳密な規則を持つSMACSSのような他のモジュラー方式と比較されます。.
もっと知りたければ、OOCSS FAQページにたくさんの情報があります。そして、作者のNicole Sullivanは、OOCSSと、それが現代のWeb開発とどのように結びついているかについてよく話します。.
スタイルから構造を分離
OOCSSの大部分は、ページ構造（幅、高さ、余白、パディング）を外観（フォント、色、アニメーション）から分離するコードを書くことです。これにより、 カスタムスキニング 複数のページ要素に適用する 構造に影響を与えずに.
これは、可能なコンポーネントを設計するのにも役立ちます。 レイアウトを移動 簡単に。たとえば、 “最近の投稿” サイドバーのウィジェットは、同様のスタイルを維持しながら、フッターまたはコンテンツの上に移動できる必要があります。.
これは、OOCSSの例です。 “最近の投稿” この場合のウィジェットは、私たちのCSSオブジェクトです。
/ *構造* / .side-widget 幅：100％;パディング：10px 5px。 / * Skinning * / .recent-posts font-family：Helvetica、Arial、sans-serif;カラー：＃2b2b2b。フォントサイズ：1.45em。
それに注意してください レイアウト で管理されている .サイドウィジェット 複数のサイドバー要素にも適用できるクラス 外観 で管理されている .最近の投稿 他のウィジェットのスキンにも使用できるクラスです。たとえば、 .最近の投稿 ウィジェットはフッターに移動されました。同じ配置にはならないかもしれませんが、同じルックアンドフィールを持つことができます。.
CodePenのこのサイドバーの例も見てください。それはフロートとテキストの配置のためにクラスの明確な分離を使用するので、 複製は余分なCSSコードを必要としません.
コンテナーをコンテンツから分離する
コンテナー要素からコンテンツを分離する OOCSSのもう一つの重要な原則です.
簡単に言えば、これは可能なときはいつでも子セレクタの使用を避けるべきであることを意味するだけです。アンカーリンク、ヘッダ、ブロッククォート、または番号なしリストなどのユニークなページ要素をカスタマイズするときは、それらに子孫セレクタではなくユニークなクラスを指定する必要があります。.
これは簡単な例です：
/ * OOCSS * / .sidebar / *サイドバーの内容* / h2.sidebar-title / *特別なh2要素スタイル* / / * OOCSS以外のもの* / .sidebar / *同じサイドバーの内容* / .sidebar h2 / *は必要以上に特殊性を追加します* /
2番目のコードフォーマットを使用するのは恐ろしいことではありませんが、きれいなOOCSSを書きたい場合は最初のフォーマットに従うことを強くお勧めします。.
開発ガイドライン
開発者は常にOOCSSの目的を議論しているため、正確な仕様を確定するのは困難です。しかし、ここにあります あなたがよりクリーンなOOCSSコードを書くのを助けることができるいくつかの提案：
- と連携 IDではなくクラス スタイリング用.
- しようとする マルチレベルの子孫クラスの特異性を無視する 必要でない限り.
- 定義する 繰り返し可能なクラスを持つユニークなスタイル （フロート、クリアフィックス、ユニークなフォントスタックなど）.
- 要素を拡張する ターゲットクラス 親クラスではなく.
- スタイルシートを整理する セクションに, 目次の追加を検討する.
開発者は依然としてJavaScriptのターゲティングにIDを使用する必要がありますが、CSSには必要ありません。 彼らはあまりにも具体的です. 1つのオブジェクトがCSSスタイリングにIDを使用する場合、IDは一意の識別子であるため、複製することはできません。あなたがスタイルのためにクラスだけを使うなら 継承ははるかに予測しやすくなります.
さらに、クラスは追加機能のために一緒に連鎖することができます。 1つの要素に10個以上のクラスを関連付けることができます。 1つの要素に対する10個以上のクラスは私が個人的に推奨するものではありませんが、開発者は無制限のページ要素に対して再利用可能なスタイルのライブラリを蓄積することができます。.
OOCSS内のクラス名はやや物議を醸しており、根拠はありません。多くの開発者はクラスを短くしてポイントにすることを好みます.
キャメルケースも人気です、例えば .errorBox の代わりに .エラーボックス. OOCSSのドキュメントでクラスの命名を見ると、キャメルケースが “公式” 勧告。ダッシュに問題はありませんが、原則としてOOCSSのガイドラインに従うのが最善です。.
OOCSS + Sass
ほとんどのWeb開発者はすでにSassが大好きで、すぐにフロントエンドのコミュニティを追い越しています。まだSassを試したことがない場合は、試してみる価値があります。それはあなたが変数、関数、入れ子、そして数学関数のようなコンパイル方法でコードを書くことを可能にします.
有能な手では、SassとOOCSSは天国で行われた試合かもしれません。 The Sass Wayブログでこれに関する優れた記事を見つけるでしょう。.
例えば、Sassを使うと @extend ディレクティブを使用すると、あるクラスのプロパティを別のクラスに適用できます。プロパティは重複していませんが、その代わりに2つのクラスはコンマセレクタで結合されています。これにより、CSSプロパティを一箇所で更新できます。.
スタイルシートを常に書いているのであれば、これで節約できます。 タイピングの時間 そして助けて OOCSSプロセスを自動化する.
また覚えている コードのメンテナンスはOOCSSの大部分です. Sassを使用することで、変数、ミックスイン、および高度なリンティングツールをワークフローに結び付けることで、作業が容易になります。.
優れたOOCSSコードの重要な属性は 誰とでもそれを共有する能力, 後日自分でも、そして簡単に手に入れることができる.
パフォーマンスの考慮事項
OOCSSは、混乱することなくスムーズに動作することを目的としています。開発者は最善を尽くします ではない 実際にはそれがDRY開発の背後にある前提です。時間が経つにつれて、OOCSS技術は、個々のプロパティが与えられた文書に何十回も適用された何百ものCSSクラスにつながる可能性があります。.
OOCSSはまだ新しい話題なので、肥大化の話題について議論するのは難しいです。多くのCSSファイルは、ほとんど構造を持たずに肥大化してしまいますが、OOCSSは、厳密な構造を提供し、（理想的には）肥大を軽減します。パフォーマンス上の最大の懸念は、いくつかの要素がレイアウト構造とデザインのための一握りの異なるクラスを蓄積するかもしれないHTMLにあるでしょう.
あなたはStack OverflowやCSS-Tricksのようなサイトでこのトピックに関する興味深い議論を見つけるでしょう。.
私のお勧めは、サンプルプロジェクトを構築し、それがどのようになるかを見てみることです。あなたがOOCSSに恋をすると、それはあなたがウェブサイトをコーディングする方法を根本的に変えるかもしれません。あるいは、あなたがそれを嫌うのであれば、まだ新しいテクニックを学んでいて、それがどのように機能するかについて批判的に考えています。何があっても勝ちです.
忙しく書くOOCSS
Web開発で何かを学ぶ最良の方法は練習することです。 CSSの基本をすでに理解しているのであれば、順調に進んでいます。!
OOCSSは前処理を必要としないので、CodePenなどのオンラインIDEで試すことができます。簡単なプロジェクトは、始めてそこからあなたの知識を向上させるのに最適です。.
これらのリソースを調べて、OOCSSの発展分野における研究をさらに進めてください。.
- OOCSSオフィシャルウェブサイト
- オブジェクト指向CSS：何、どのようにそしてなぜ
- OOCSS + Sass = CSSへの最善の方法
- オブジェクト指向CSSの紹介
