CSS
CSSデザインパターン
サーチ…
前書き
これらの例は、 BEM 、 OOCSS 、 SMACSSなどのCSS固有のデザインパターンを文書化するためのものです 。
これらの例は、 BootstrapやFoundationのようなCSSフレームワークを文書化するためのものではありません。
備考
これらの例は、CSS固有の方法論/設計パターンを文書化するためのものです。
これらの方法論には、以下が含まれますが、これに限定されません。
これらの例は、 BootstrapやFoundationのようなCSSフレームワークを文書化するためのものではありません。 CSSフレームワークで1つ以上のCSSメソドロジ/デザインパターンを適用する方法の例を含めることができますが、それらの例は、その特定のフレームワークでのメソドロジ/デザインパターンとフレームワーク自体の使用に焦点を当てることです。
BEM
BEMはBlocks, Elements and Modifiers略です。これは当初、ロシアの技術企業Yandexによって考案された方法論でしたが、欧米のWeb開発者にもかなりの牽引力をもたらしました。
同じ意味で、BEMメゾロジーは、HTMLとCSSコードを3つのタイプのコンポーネントにコンポーネント化することに関するものです。
ブロック：独自の意味を持つスタンドアロンエンティティ
例は、
header、container、menu、checkbox、textbox
要素：スタンドアロンの意味を持たず、ブロックに意味的に結びついているブロックの一部。
例としては、
menu item、list item、checkbox captionとheader title
修飾子：ブロックまたは要素のフラグで、外観や動作を変更するために使用されます。
例は
disabled、highlighted、checked、fixed、size big、color yellow
BEMの目標は、CSSコードの可読性、保守性、柔軟性を最適化することです。これを達成する方法は、以下のルールを適用することです。
- ブロックスタイルは決してページの他の要素に依存しません
- ブロックはシンプルで短い名前で、
_または-を避ける必要があります - 要素をスタイリングするときは、
blockname__elementname形式のセレクタを使用します - スタイリング修飾子を使用する場合は、
blockname--modifiernameおよびblockname__elementname--modifiername形式のセレクタを使用します - 修飾子を持つ要素またはブロックは、変更中のブロックまたは要素からすべてを継承する必要があります
コード例
BEMをフォーム要素に適用すると、CSSセレクタは次のようになります。
.form { } // Block
.form--theme-xmas { } // Block + modifier
.form--simple { } // Block + modifier
.form__input { } // Block > element
.form__submit { } // Block > element
.form__submit--disabled { } // Block > element + modifier
対応するHTMLは次のようになります。
<form class="form form--theme-xmas form--simple">
<input class="form__input" type="text" />
<input class="form__submit form__submit--disabled" type="submit" />
</form>