Atitit.css は、bem project_html/css_WEB-ITnose で CSS の構成と管理を指定します。-htmlチュートリアル-php.cn

Atitit.css は、bem プロジェクトにおける CSS の構成と管理を指定します

1 BEM とは何ですか? 1

1.1. ブロック 2

1.2. 要素 2

1.3. BEM ツリー (DOM ツリーと同様)。 3

1.4. Modifier (修飾子) 3

2. ブロックの独立性 4

3. 独立した CSS クラスの名前付け 5

5. OOCSS6

6. ACSS6

7. CSS の編成と管理まとめ attilax のまとめ 7

8. Atibem7

8.1. 修飾子は bem メソッドを使用しません。ステータス 7

8.2 を表現するには、よく書く .current .active を使用します。 Block のネーミングは良いですね。 7

8.3. 要素の名前付け8

9. SASS や LESS などの CSS 前処理言語を使用して記述されていますか? ? ? 8

10. 参考資料 8

BEM とは何ですか?

BEM は、ブロック、エレメント、モディファイアーの略です。これらの用語の意味については、この記事で詳しく説明します。

プログラミング方法論の最も一般的な例の 1 つは、オブジェクト指向プログラミング (OOP) です。このプログラミングパラダイムは多くの言語で見られます。 BEM と OOP はある程度似ています。これは、コードと一連のパターンを使用して現実の状況を記述する方法であり、使用されるプログラミング言語に関係なく、プログラムエンティティのみを考慮します。

Yandex は、BEM 手法を使用してサービスを開発する (ロシアの) 大企業です。

BEM は、Yandex Company が提案するフロントエンドプロジェクト開発手法です。 BEM という名前は、方法論の 3 つのコンポーネント、つまりブロック、要素、修飾子の英語の頭字語に由来しています。これら 3 つの異なるコンポーネントは BEM エンティティと呼ばれます。

著者:: ★(attilax)>>> ニックネーム: Laowa’s Claw (フルネーム:: Attilax Akbar Al Rapanui) 中国語名: Ailong、電子メール:1466519819@qq.com

1.1。ブロック

ブロックは、アプリケーションの「ビルディングブロック」と同様に、独立したエンティティです。ブロックは、単純または複合 (他のブロックを含む) のいずれかになります。

ブロック

ブロックは、Web アプリケーション開発では一般にコンポーネントまたはモジュールと呼ばれます。各ブロックは論理的および機能的に互いに独立しています。コンポーネント関連の JavaScript、CSS コード、HTML テンプレートはブロック内にカプセル化されます。ブロックが独立しているため、アプリケーション開発で再利用できるため、コードの重複が減り、開発効率が向上します。ブロックはページ上のどこにでも配置でき、ブロック同士を入れ子にすることもできます。同じブロックの複数のインスタンスがページ上に存在できます。ブロックの異なるインスタンスは同様の構造を持っています。ブロックの典型的な例はメニューです。プロジェクト内には、同様の構造とスタイルを持つ複数の異なるメニューが存在する場合があります。

Elements

Elements はブロックの構成要素です。要素はブロックの外で使用できません。 BEM では、要素を他の要素内にネストすることはお勧めしません。メニューブロックでは、各メニュー項目はブロック内の要素です。

1.2.

要素

要素はブロックの一部であり、特定の機能を持ちます。要素はコンテキストに依存します。要素は、それらが属すると想定されているブロックのコンテキスト内でのみ意味を持ちます。

たとえば、入力フィールドとボタンは検索ブロックの要素です。

ブロックの下にあるすべての要素は、相互のレベルに関係なく、平らに展開され、ブロックに属している必要があります

したがって、BEM は最大でも B+E+M レベル 3 しか持つことができず、B+E+ を持つことは不可能ですE+..+E+M 超長クラス名では、E が同じ名前を持つことはできません

1.3.
BEM ツリー (DOM ツリーと同様)。

テンプレート変換 (XSL または JavaScript を使用) を BEM ツリーに適用して、最終的なブラウザータグを生成します。

1.4.

モディファイアの

既存のブロックとほんの少しだけ異なる別のブロックの開発を避けるために、モディファイアの概念を導入します。

Modifier はブロックまたは要素の属性であり、ブロックまたは要素の外観または動作の変更を表します。

修飾子には名前と値があります。複数の修飾子を同時に使用できます。

ブロックの独立性

プロジェクトが発展するにつれて、ページ上のいくつかのブロックを追加、削除、または移動することがよくあります。たとえば、ロゴブロックと認証ブロックを交換したり、メニューを検索ブロックの下に配置したりすることができます。

このプロセスを容易にするために、ブロックは独立している必要があります。

独立したブロックは、他のブロック内にネストする場合も含め、ページ上のどこにでも配置できます。

独立したCSS

CSSの観点から:

BEM ではタグセレクターの使用が許可されていないため、最初は受け入れるのが困難です... .menu li でできることは、li ごとに .menu-item を記述する必要があります

· ブロック (または要素) には一意の「名前」（CSS クラス）は CSS ルールで使用できます。

· ID セレクターは使用しないでください: 非固有のニーズを満たすことができるのはクラスセレクターのみです

· HTML 要素は、完全にコンテキストフリーではないため、CSS セレクター (.menu td など) として使用できません。

· カスケードセレクター (注釈: .menu .item など) の使用は避けてください。

3.1. 独立した CSS クラスに名前を付ける

考えられる CSS クラスの命名スキームは次のとおりです:

ブロックの CSS クラス名はブロックの名前 (ブロック名) です。

要素の CSS クラス名は、ブロック名と要素名をいくつかの記号で区切って組み合わせたものです。

カスケードを最小限に抑えるには、要素の CSS クラス名にブロック名を含める必要があります。

長い名前 (ブロック名など) 内の単語を区切るにはハイフンを使用し、ブロック名と要素名 (ブロック名__要素名) を区切るには 2 つのアンダースコアを使用します。

· 同じ CSS クラス名を持つため、同じ動作を持つブロックを正確に検出できます: CSS クラスセレクターを使用すると、同じ名前を持つすべてのブロックを選択でき、それらの動的な動作を簡単に定義できます

· BEM エンティティname すべて小文字または数字です。名前内の異なる単語は 1 つのハイフン (-) で区切られます。

· BEM 要素名とブロック名は 2 つのアンダースコア (__) で区切られます。

· ブール修飾子とそれが修飾するエンティティ名は 2 つのハイフン (--) で区切られます。名前と値のペアの修飾子は使用しないでください。

BEM について最も物議を醸しているのは、その命名スタイル

ブロック + 要素 + 修飾子です。これにより、レベルごとに非常に具体的かつ非常に長く記述することが奨励されます。

慣習的な CSS のネストとはまったく逆です。 3 つ以上のレイヤーを読むのは難しいです

OOCSS

OOCSS は、Object Oriented CSS の略で、CSS コードの編成と管理にオブジェクト指向の方法論を適用する実践です。モジュール性、単一責任原則、関心事の分離など、オブジェクト指向方法論の多くの概念は、大量の CSS コードを編成して管理する必要があるアプリケーションにも適用できます。 OOCSS では、繰り返し現れる視覚的なパターンを表す CSS オブジェクトの概念が導入されています。これらのパターンは、HTML、CSS、JavaScript コードの独立したスニペットに抽象化して、プロジェクト全体で共有できます。

OOCSS には 2 つの重要な原則があります:

最初の原則は、構造と外観を分離することです。繰り返し発生する視覚的パターンは、DOM 構造ではなく、外観のみに焦点を当てる必要があります。これには、CSS オブジェクト内の各コンポーネントに名前があり、CSS クラス名を通じて DOM 構造内でそのコンポーネントに対応している必要があります。したがって、OOCSS のスタイルルールはカテゴリセレクターを使用し、特定の DOM 構造に依存しません。これにより、CSS オブジェクトの再利用性が向上します。

2 番目の原則は、容器と中身を分離することです。これには、DOM ツリー内の位置に関連するルールが CSS スタイルに表示されないことが必要です。 CSS スタイルは、DOM 要素とその階層関係ではなく、コンテンツのみに焦点を当てる必要があります。

ACSS

ACSS とは Atomic CSS の略で、ヤフーが提案する独自の CSS コード編成方法で、ヤフーのホームページなどで使われています。 ACSS は、その哲学が平均的な開発者の理解とは大きく異なり、関心の分離の原則である CSS 作成の従来のベストプラクティスに挑戦しているという点で独特です。 ACSS は、関心事の分離の原則により、CSS コードが冗長で扱いにくく、保守が困難になると考えています。

ACSS の原則は、最大限の再利用性を実現するために、CSS スタイルを可能な限り小さな部分に分割することです。各 CSS クラスは 1 つのスタイルルールにのみ対応します。たとえば、CSS クラス M(10px) に対応するスタイルルールは margin: 10px です。 CSS スタイルを適用する場合、必要なアトミック CSS クラス名を DOM 要素に追加するだけです。 ACSS は、最終的な CSS スタイルファイルを生成するための Atomizer ツールを提供します。

ACSS の利点は、生成される CSS ファイルには必要なコンテンツのみが含まれ、冗長性がほとんどないため、CSS ファイルのサイズが削減され、パフォーマンスが向上することです。さらに、CSS クラスに対応するスタイルルールは変更されないため、異なるプロジェクトやコンポーネント間で CSS を簡単に共有できます。たとえば、従来の方法を使用する場合、header という名前の同じ CSS クラスによって実際に表現されるスタイルルールが、プロジェクトごとにまったく異なる場合があります。 ACSS では、M(10px) という名前の CSS クラスによって表されるスタイルルールは常に margin: 10px です。 ACSS の考えられる欠点は、ほとんどの開発者が理解しているベストプラクティスとは大きく異なり、すぐには受け入れられない可能性があることです。

CSS の組織と管理の結論 attilax のまとめ

上記では、BEM、OOCSS、SMACSS、ACSS などのいくつかの異なる CSS 命名規則を紹介していますが、それぞれに独自の長所と短所があります。開発チームにとって最も重要なことは、最適な組織と管理方法を見つけることです。いわゆるベストプラクティスに盲目的に従う必要はなく、最も適切な方法を見つける必要があります。著者は個人的な経験に基づいて、以下のような組織・マネジメント方法を推奨しています。

ACSS のアイデアには多くの利点があり、Yahoo のような大企業で実際に運用されていますが、ACSS のアプローチはほとんどの開発者にとって理解するのが難しいため、チームでない限りお勧めできません決断。より推奨されるアプローチは、理解しやすいモジュール化です。

BEM は、ブロック、要素、および修飾子を使用してページを記述します (重要なのは、複数人によるコラボレーションの名前付けの問題を解決することです)。この目的のために、cls+time メソッドを使用できます...