BEMとSMACSS：CSS方法論の比較

それに直面しましょう。従うべき優れた方法論やアーキテクチャがない場合、CSSを使用するのは非常に困難です。さまざまなセレクターをあちこちに作成することは、理想的な戦略ではありません。それは多くの特異性関連の問題を引き起こし、コードベースを混乱させ、デバッグを困難にする可能性があります。

CSSの方法論に従うことで、開発プロセスに関与するすべての人が同じ言語を話すことが保証されます。これは、複数の人がいる大規模なプロジェクトでは特に重要であり、ソフトウェアのスケーリングが容易になり、新しいチームメンバーがコードベースにすばやく頭を悩ませることができます。

この記事では、広く使用されている2つのCSS手法、ブロック、要素、モディファイア（BEM）とCSS用のスケーラブルおよびモジュラーアーキテクチャ（SMACSS）を比較します。それらの類似点と、それらが最終的に互いにどのように重なり合うかを見ていきます。

BEMとは何ですか？

BEMは、フロントエンドコードの読み取り、理解、操作、およびスケーリングを容易にする単純な命名規則です。堅牢で明示的です。

HTMLドキュメントが適切に構造化されていない場合、HTMLドキュメントがいかに乱雑になるかは誰もが知っています。CSSクラスに不適切な命名規則を追加すると、理解が難しく、バグが多く、スケーリングがさらに困難なコードベースが作成されます。

BEMの命名規則に従うと、CSSファイルだけでなくHTMLドキュメントの構造も簡単になります。独立したコードブロックとCSSセレクターを使用してコンポーネント駆動型の方法で考えることができ、コードを再利用可能でモジュール化できます。

BEMを使用するには、その命名規則に従うだけです。

• Bはブロックを表します。ブロックはスタンドアロンエンティティです。例として、カードコンポーネントがあります
• Eは要素を表します。要素は、意味的に関連付けられているブロックの一部であり、それ自体では意味がありません。
• Mは修飾子を表します。これは、要素またはブロックの外観または動作を変更できる単なるフラグです。

以下の例で、これらすべてがどのように組み合わされるかを見てみましょう。

<div class="card card-current">
  <div class="card__img">
    <img src="#" alt="#" />
  </div>
  <div class="card__desc">
    <h3>Card Title</h3>
    <p>Some descriptiton for our card element.</p>
  </div>
  <div class="card__buttons">
    <button class="card__button card__button-danger">Delete</button>
    <button class="card__button card__button-success">Confirm</button>
  </div>
</div>

BEM方法論では、ブロックにはクラス名しかありません。これは、上記の例で確認できます.card。ブロックの一部である要素には、ブロック名の前に二重下線と要素の名前が続きます。これは、上記の例で、、、、.card__imgおよび.card__descを.card__buttons使用して確認できます.card__button。

最後に、修飾子には、この例のよう.card-currentに、.card__button-success変更するブロック名または要素が接頭辞として付けられ.card__button-dangerます。

 

SMACSSとは何ですか？どのように機能しますか？

SMACSSは、CSSコードベースをより整理され、クリーンで、スケーラブルで、モジュール化するために、CSSルールセットを分類するための一連のルールです。SMACSS方法論に従って、CSSルールセットを5つのカテゴリに分類できます。

1. ベース
2. レイアウト
3. モジュール
4. 州
5. テーマ

ベース

HTML要素にデフォルトのスタイルを与えるすべてのCSSルールセットは、基本ルールと呼ばれます。クラスまたはIDセレクターを使用する代わりに、要素、属性、疑似クラス、子、または兄弟セレクターを使用して、これらのルールセットを定義します。これらのスタイルルールは、HTML要素のデフォルトのスタイルをリセットするため、リセットと呼ばれることがあります。

レイアウト

再利用に基づいて、レイアウトスタイルはメジャースタイルとマイナースタイルに分割できます。主要なコンポーネントは、ヘッダー、フッター、サイドバー、本文など、ページの構造を確立するコンポーネントです。ページレイアウトは、レイアウトルールと呼ばれるいくつかの主要なコンポーネントで構成されています。一方、モジュールは、主要コンポーネント内に存在するマイナーコンポーネントです。

モジュール

モジュールは、互いに分離され、区別されるUIコンポーネントです。これらは通常、レイアウトコンポーネント内にありますが、他のモジュールコンポーネント内にある場合もあります。これらは、他のユーザーインターフェイスモジュールやレイアウトの影響を受けません。例としては、アコーディオン、モーダルまたはダイアログ、カルーセルなどがあります。

州

CSSルールセットは、コンポーネントのさまざまな状態のスタイルを指定するために使用されます。これは基本的に、UIモジュールのデフォルトのスタイルを上書きします。たとえば、メッセージトーストコンポーネントが成功または失敗した状態である可能性があり、それを表すために赤または緑の色を表示できます。状態は、BEM方法論の修飾子に似ています。

テーマ

テーマCSSルールセットの目的は、テーマ固有のスタイルを作成することです。テーマ固有のプロパティは、主にデフォルトの色と画像を上書きします。

BEMとSMACSS：開発者の経験の比較

クリーンなコード

BEMは命名規則に従い、要素にクラス名を付ける方法を開発者に指示します。これは、HTMLドキュメントとスタイルシートを構造化するための優れた方法を提供します。クラス名は非常に長くなる可能性がありますが、それでもクリーンで読みやすいものです。

SMACSSは、コードベースもクリーンにします。その分類ルールにより、スタイルルールを明確かつ簡潔に宣言する必要がある場所がわかります。また、その命名規則により、クラス名が最小限であるため、HTMLドキュメントがクリーンで読みやすくなります。

どちらの方法論も、コードベースがクリーンで読みやすく、ナビゲートしやすいことを確認するのに最適です。

ファイル構造

プロジェクトフォルダ内のファイルをどのように構造化するかは非常に重要です。両方の方法論を比較して、それぞれがファイルをどのように構成しているかを確認しましょう。

BEM方法論には、プロジェクトフォルダーを整理するための3つのアプローチがあります。

• ネスト
• フラット
• フレックス

ここで、3つのアプローチがどのように機能するかを確認できます。BEM手法に従って、プロジェクト内のブロックごとに新しいファイルを作成する必要があります。プロジェクトが大きくなり、追加のブロックが追加されると、プロジェクトディレクトリが乱雑になり、開発がより困難になる可能性があります。

プロジェクトの規模は関係ありません。SMACSSの方法論に従っている場合は、上記のSMACSSの概要セクションで見たのと同じフォルダー構造になります。SMACSS分類ルールを使用し、プロジェクトフォルダーの構造を定義します。

この方法では、モジュールファイルは通常、プロジェクトが成長するにつれて最大になります。これにより、モジュールの検索が面倒になる可能性がありますが、単純な場合Ctrl+F、またはCommand+FMacを使用している場合は、モジュールを簡単にすばやく検索するのに役立つことがわかりました。

この点で、両者の間に明確な勝者がいるとは言えません。私にとっては、ディレクトリ全体ではなく、単一のファイルを検索したいと思います。

開発時間

SassやLessなどのCSSプリプロセッサを使用していない限り、BEM手法を使用している場合、開発は少し遅くなる可能性があります。命名規則に従ってクラス名を宣言する必要があると、少し時間がかかる場合があります。これが私が意味することです：

<div class="card card-current">
  <div class="card__img"></div>
  <div class="card__desc"></div>
  <div class="card__buttons">
    <button class="card__button card__button-danger">Delete</button>
    <button class="card__button card__button-success">Confirm</button>
  </div>
</div>

クラス名の長さに注意してください。通常のCSSを使用してこれらの要素をターゲットにする場合、少し手間と時間がかかる可能性があります。これが私が意味することです：

.card{...}
.card-current{...}
.card__img{...}
.card__desc{...}
.card__button{...}
.card__button-danger{...}

これは、CSSプリプロセッサ（この場合はSass）を使用している場合に解決できるため、上記のコードは次のようになります。

.card{
  &__img{...}
  &__desc{...}
  &__buttons{...}
}

HTML要素にクラス名を書き込む必要があるため、ブロックごとに、要素と修飾子の前にブロック名を付ける必要があります。

SMACSSの中核は分類です。厳密な命名規則に従う必要はありません。同様のスタイルルールを配置する場所を示し、開発者に要素の命名の柔軟性を提供します。セレクターの分類に従ってプレフィックスを付けることをお勧めします。たとえば、レイアウトスタイルのルールは。として記述できます.l-example。

ただし、SMACSSは、モジュールがプロジェクトとともに指数関数的に成長する可能性があるため、モジュールに同じ命名規則に従うことをお勧めしません。モジュール内の関連要素の前にベース名を付けることをお勧めします。たとえば、.baseはモジュールであり.base-element、モジュール内の要素になります。

私の意見では、SMACSSでの開発時間は、BEMよりもはるかに高速です。これは、このような長いクラスセレクターを作成する必要がないためです。

スケーラビリティとサポート

これらの2つの方法論のどちらが、より優れたスケーラビリティとサポートを提供するかを判断するのは困難です。BEMはより多くのサポートを提供するように見えますが、SMACSSはよりスケーラブルな代替手段であるように見えます。それでも、ここで比較してみましょう。

多くの人が、BEM方法論を使用するとクラス名が非常に長くなる可能性があるため、新しいチームメンバーがコードベース内を移動するのが非常に面倒で困難になる可能性があると主張しています。しかし、私は同意しません。私の意見では、ブロックごとに新しいファイルが作成されるため、BEMで何が起こっているのかをすばやく理解する方が簡単です。

さらに、BEMを使用すると、再利用可能なコンポーネントを作成できるようにコードを構造化できます。また、修飾子を使用して、コンポーネントが配置されているコンテキストに合わせてコンポーネントの外観と動作を変更できます。プロジェクトが成長し始めたときにブロックまたはコンポーネントごとに新しいファイルを作成するのは少し多すぎる可能性があり、スケーラビリティには役立ちません。

大規模なチームで新しいプロジェクトに参加する人にとって、SMACSSはほとんどサポートを提供せず、起こっていることに頭を悩ませることを困難にする可能性があります。ただし、スケーラビリティの観点から、SMACSSがどのように機能するかを理解できるようになると、スタイルルールの分類がプロジェクトのスケーリングにどのように役立つかがわかります。

結論

この記事では、広く使用されている2つのCSS方法論であるBEMとSMACSSについて説明しました。プロジェクトでどちらを使用するかに関わらず、より構造化されたCSSとUIの利点を活用できます。私の意見では、どちらも他を凌駕していません。それは本当に個人的な好みに依存しています。

ソース：https ：//blog.logrocket.com/bem-vs-smacss-comparing-css-methodologies/

#css #SMACSS #ui 

What is GEEK

Buddha Community

BEMとSMACSS：CSS方法論の比較

それに直面しましょう。従うべき優れた方法論やアーキテクチャがない場合、CSSを使用するのは非常に困難です。さまざまなセレクターをあちこちに作成することは、理想的な戦略ではありません。それは多くの特異性関連の問題を引き起こし、コードベースを混乱させ、デバッグを困難にする可能性があります。

CSSの方法論に従うことで、開発プロセスに関与するすべての人が同じ言語を話すことが保証されます。これは、複数の人がいる大規模なプロジェクトでは特に重要であり、ソフトウェアのスケーリングが容易になり、新しいチームメンバーがコードベースにすばやく頭を悩ませることができます。

この記事では、広く使用されている2つのCSS手法、ブロック、要素、モディファイア（BEM）とCSS用のスケーラブルおよびモジュラーアーキテクチャ（SMACSS）を比較します。それらの類似点と、それらが最終的に互いにどのように重なり合うかを見ていきます。

BEMとは何ですか？

BEMは、フロントエンドコードの読み取り、理解、操作、およびスケーリングを容易にする単純な命名規則です。堅牢で明示的です。

HTMLドキュメントが適切に構造化されていない場合、HTMLドキュメントがいかに乱雑になるかは誰もが知っています。CSSクラスに不適切な命名規則を追加すると、理解が難しく、バグが多く、スケーリングがさらに困難なコードベースが作成されます。

BEMの命名規則に従うと、CSSファイルだけでなくHTMLドキュメントの構造も簡単になります。独立したコードブロックとCSSセレクターを使用してコンポーネント駆動型の方法で考えることができ、コードを再利用可能でモジュール化できます。

BEMを使用するには、その命名規則に従うだけです。

• Bはブロックを表します。ブロックはスタンドアロンエンティティです。例として、カードコンポーネントがあります
• Eは要素を表します。要素は、意味的に関連付けられているブロックの一部であり、それ自体では意味がありません。
• Mは修飾子を表します。これは、要素またはブロックの外観または動作を変更できる単なるフラグです。

以下の例で、これらすべてがどのように組み合わされるかを見てみましょう。

<div class="card card-current">
  <div class="card__img">
    <img src="#" alt="#" />
  </div>
  <div class="card__desc">
    <h3>Card Title</h3>
    <p>Some descriptiton for our card element.</p>
  </div>
  <div class="card__buttons">
    <button class="card__button card__button-danger">Delete</button>
    <button class="card__button card__button-success">Confirm</button>
  </div>
</div>

BEM方法論では、ブロックにはクラス名しかありません。これは、上記の例で確認できます.card。ブロックの一部である要素には、ブロック名の前に二重下線と要素の名前が続きます。これは、上記の例で、、、、.card__imgおよび.card__descを.card__buttons使用して確認できます.card__button。

最後に、修飾子には、この例のよう.card-currentに、.card__button-success変更するブロック名または要素が接頭辞として付けられ.card__button-dangerます。

 

SMACSSとは何ですか？どのように機能しますか？

SMACSSは、CSSコードベースをより整理され、クリーンで、スケーラブルで、モジュール化するために、CSSルールセットを分類するための一連のルールです。SMACSS方法論に従って、CSSルールセットを5つのカテゴリに分類できます。

1. ベース
2. レイアウト
3. モジュール
4. 州
5. テーマ

ベース

HTML要素にデフォルトのスタイルを与えるすべてのCSSルールセットは、基本ルールと呼ばれます。クラスまたはIDセレクターを使用する代わりに、要素、属性、疑似クラス、子、または兄弟セレクターを使用して、これらのルールセットを定義します。これらのスタイルルールは、HTML要素のデフォルトのスタイルをリセットするため、リセットと呼ばれることがあります。

レイアウト

再利用に基づいて、レイアウトスタイルはメジャースタイルとマイナースタイルに分割できます。主要なコンポーネントは、ヘッダー、フッター、サイドバー、本文など、ページの構造を確立するコンポーネントです。ページレイアウトは、レイアウトルールと呼ばれるいくつかの主要なコンポーネントで構成されています。一方、モジュールは、主要コンポーネント内に存在するマイナーコンポーネントです。

モジュール

モジュールは、互いに分離され、区別されるUIコンポーネントです。これらは通常、レイアウトコンポーネント内にありますが、他のモジュールコンポーネント内にある場合もあります。これらは、他のユーザーインターフェイスモジュールやレイアウトの影響を受けません。例としては、アコーディオン、モーダルまたはダイアログ、カルーセルなどがあります。

州

CSSルールセットは、コンポーネントのさまざまな状態のスタイルを指定するために使用されます。これは基本的に、UIモジュールのデフォルトのスタイルを上書きします。たとえば、メッセージトーストコンポーネントが成功または失敗した状態である可能性があり、それを表すために赤または緑の色を表示できます。状態は、BEM方法論の修飾子に似ています。

テーマ

テーマCSSルールセットの目的は、テーマ固有のスタイルを作成することです。テーマ固有のプロパティは、主にデフォルトの色と画像を上書きします。

BEMとSMACSS：開発者の経験の比較

クリーンなコード

BEMは命名規則に従い、要素にクラス名を付ける方法を開発者に指示します。これは、HTMLドキュメントとスタイルシートを構造化するための優れた方法を提供します。クラス名は非常に長くなる可能性がありますが、それでもクリーンで読みやすいものです。

SMACSSは、コードベースもクリーンにします。その分類ルールにより、スタイルルールを明確かつ簡潔に宣言する必要がある場所がわかります。また、その命名規則により、クラス名が最小限であるため、HTMLドキュメントがクリーンで読みやすくなります。

どちらの方法論も、コードベースがクリーンで読みやすく、ナビゲートしやすいことを確認するのに最適です。

ファイル構造

プロジェクトフォルダ内のファイルをどのように構造化するかは非常に重要です。両方の方法論を比較して、それぞれがファイルをどのように構成しているかを確認しましょう。

BEM方法論には、プロジェクトフォルダーを整理するための3つのアプローチがあります。

• ネスト
• フラット
• フレックス

ここで、3つのアプローチがどのように機能するかを確認できます。BEM手法に従って、プロジェクト内のブロックごとに新しいファイルを作成する必要があります。プロジェクトが大きくなり、追加のブロックが追加されると、プロジェクトディレクトリが乱雑になり、開発がより困難になる可能性があります。

プロジェクトの規模は関係ありません。SMACSSの方法論に従っている場合は、上記のSMACSSの概要セクションで見たのと同じフォルダー構造になります。SMACSS分類ルールを使用し、プロジェクトフォルダーの構造を定義します。

この方法では、モジュールファイルは通常、プロジェクトが成長するにつれて最大になります。これにより、モジュールの検索が面倒になる可能性がありますが、単純な場合Ctrl+F、またはCommand+FMacを使用している場合は、モジュールを簡単にすばやく検索するのに役立つことがわかりました。

この点で、両者の間に明確な勝者がいるとは言えません。私にとっては、ディレクトリ全体ではなく、単一のファイルを検索したいと思います。

開発時間

SassやLessなどのCSSプリプロセッサを使用していない限り、BEM手法を使用している場合、開発は少し遅くなる可能性があります。命名規則に従ってクラス名を宣言する必要があると、少し時間がかかる場合があります。これが私が意味することです：

<div class="card card-current">
  <div class="card__img"></div>
  <div class="card__desc"></div>
  <div class="card__buttons">
    <button class="card__button card__button-danger">Delete</button>
    <button class="card__button card__button-success">Confirm</button>
  </div>
</div>

クラス名の長さに注意してください。通常のCSSを使用してこれらの要素をターゲットにする場合、少し手間と時間がかかる可能性があります。これが私が意味することです：

.card{...}
.card-current{...}
.card__img{...}
.card__desc{...}
.card__button{...}
.card__button-danger{...}

これは、CSSプリプロセッサ（この場合はSass）を使用している場合に解決できるため、上記のコードは次のようになります。

.card{
  &__img{...}
  &__desc{...}
  &__buttons{...}
}

HTML要素にクラス名を書き込む必要があるため、ブロックごとに、要素と修飾子の前にブロック名を付ける必要があります。

SMACSSの中核は分類です。厳密な命名規則に従う必要はありません。同様のスタイルルールを配置する場所を示し、開発者に要素の命名の柔軟性を提供します。セレクターの分類に従ってプレフィックスを付けることをお勧めします。たとえば、レイアウトスタイルのルールは。として記述できます.l-example。

ただし、SMACSSは、モジュールがプロジェクトとともに指数関数的に成長する可能性があるため、モジュールに同じ命名規則に従うことをお勧めしません。モジュール内の関連要素の前にベース名を付けることをお勧めします。たとえば、.baseはモジュールであり.base-element、モジュール内の要素になります。

私の意見では、SMACSSでの開発時間は、BEMよりもはるかに高速です。これは、このような長いクラスセレクターを作成する必要がないためです。

スケーラビリティとサポート

これらの2つの方法論のどちらが、より優れたスケーラビリティとサポートを提供するかを判断するのは困難です。BEMはより多くのサポートを提供するように見えますが、SMACSSはよりスケーラブルな代替手段であるように見えます。それでも、ここで比較してみましょう。

多くの人が、BEM方法論を使用するとクラス名が非常に長くなる可能性があるため、新しいチームメンバーがコードベース内を移動するのが非常に面倒で困難になる可能性があると主張しています。しかし、私は同意しません。私の意見では、ブロックごとに新しいファイルが作成されるため、BEMで何が起こっているのかをすばやく理解する方が簡単です。

さらに、BEMを使用すると、再利用可能なコンポーネントを作成できるようにコードを構造化できます。また、修飾子を使用して、コンポーネントが配置されているコンテキストに合わせてコンポーネントの外観と動作を変更できます。プロジェクトが成長し始めたときにブロックまたはコンポーネントごとに新しいファイルを作成するのは少し多すぎる可能性があり、スケーラビリティには役立ちません。

大規模なチームで新しいプロジェクトに参加する人にとって、SMACSSはほとんどサポートを提供せず、起こっていることに頭を悩ませることを困難にする可能性があります。ただし、スケーラビリティの観点から、SMACSSがどのように機能するかを理解できるようになると、スタイルルールの分類がプロジェクトのスケーリングにどのように役立つかがわかります。

結論

この記事では、広く使用されている2つのCSS方法論であるBEMとSMACSSについて説明しました。プロジェクトでどちらを使用するかに関わらず、より構造化されたCSSとUIの利点を活用できます。私の意見では、どちらも他を凌駕していません。それは本当に個人的な好みに依存しています。

ソース：https ：//blog.logrocket.com/bem-vs-smacss-comparing-css-methodologies/

#css #SMACSS #ui