CSS仕様 BEM CSSとOOCSSサンプルコード詳細説明

序文

プロジェクト開発中、各人のコーディング習慣が異なるため、記述された CSS コードは十分に構造化されておらず、整然とした意味に欠けています。誰もが日常のコーディングで BEM CSS や OOCSS のアイデアを使用したことがあるはずですが、体系的な理解や完全に標準化された使用法はありません。

BEM（ブロック、要素、修飾子）CSS入門

BEM はフロントエンドの命名規則です。名前が示すように、ページを意味的に豊かなブロックに分割します。ブロックはネストすることができ、コネクタを使用してモジュールと要素の状態の関係を表し、モジュール式で再利用可能、保守性が高く構造化された CSS コードを生成します。

命名規則

子孫ブロックまたは要素は二重アンダースコア __ で接続し、修飾子は二重ハイフン -- で接続します。

CSSを通じてHTMLコード構造を完全に復元できます

結論は

プログラマーにとって最大の難関は何か ==> 命名。日常の開発では、自分のスタイルが他のスタイルによって上書きされることにも遭遇します。その理由のほとんどは、名前の競合です。BEM はまさにこの問題を解決します。外側のスタイル名が意味を持ち、独立していて一意であればよく、その子孫はコンテンツやタイトルなどを安全に使用して接続できます。 （お母さんはもう私が何かに名前を付けられないことを心配する必要はありません）

利点: 明確な構造とセマンティクス。

デメリット: HTML 構造が深くネストされている場合、クラス名が長くなります。

OOCSS (オブジェクト指向 CSS) 入門

OOCSS は合意された命名規則ではなく、オブジェクト指向のアイデアです。私たちは皆、オブジェクト指向の考え方に精通しています。これは、モジュールをオブジェクトに抽象化します。その核心は、最も簡潔でクリーンな CSS コードを最も簡単な方法で記述し、コードの再利用性、保守性、拡張性を高めることです。

中心的なアイデア:

• HTML構造への依存を減らす
• CSSクラスの再利用を増やす

原則として

HTML構造への依存を減らす

一般的に、 <a>タグのスタイルを定義する場合、CSS は.nav__main ul li a {}と記述されます。パフォーマンスの問題に関係なく、このアプローチは要素タグの構造に過度に依存しています。HTML 構造が変更されると、CSS をリファクタリングする必要があり、追加のメンテナンス コストが発生します。OOCSS では、a タグにクラス.nav__main__itemを追加することを推奨しています。

CSSクラスの繰り返しの使用を増やす

OOCSS を使用する前は、このようなスタイルで記述するかもしれません。この方法の欠点は、重複したコードがあらゆる場所で見つかるため、メンテナンスが非常に面倒になることです。

共通スタイルを分析して抽象化し、再利用可能なフォント スタイルを提案できます。

結論は

OOCSS で最も重要なことは、プロジェクトのページから「オブジェクト」コンポーネントを分析して抽象化し、これらのオブジェクトの CSS ルールを作成して改善することです。その後、プロジェクトに新しいページを作成する場合でも、モジュールに要素を追加する場合でも、スタイルを少し書き直すだけで済みます。

BEMとOOCSSの組み合わせ

商品の重量を表示するコンポーネントを開発します。通常私たちが書くコードは次のようなものになるかもしれません。

問題ないように見えますが、保守性とシンプルさが非常に劣っています。 BEM と OCCSS を使用すると、コードを次のように変換できます。

以前のソリューションと比較すると、命名は長くなりますが、CSS クラス名が重複しないこと、スタイルが HTML 構造に依存しないこと、クラスの再利用が BEM と OOCSS の核となる考え方であることが保証されます。

要約する

BEM は命名規則であり、OOCSS は CSS の設計概念です。実際、BEM も OOCSS の概念を使用しています。

CSS コードの量が増えるにつれて、開発チームの規模もそれに応じて大きくなってきました。 CSS 開発チームでは、統一された固定された CSS コードの構成と管理の標準が必要です。不足している部分があれば、誰でも追加できます。

CSS仕様BEM CSSとOOCSSのサンプルコード詳細に関するこの記事はこれで終了です。CSS仕様BEM CSSとOOCSSの関連コンテンツについては、123WORDPRESS.COMの過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも123WORDPRESS.COMをよろしくお願いいたします。