4

BEM 命名規則を使用しようとしていますが、特定のページの修飾子をどこに含めるかを決定するのに少し苦労しています。

たとえば、オレンジ色のボタンがあるとします。

<button class="btn btn-orange">Button A</button>

私のプロジェクトには 3 つの異なるページがあります。

 - pageA.html - pageA.scss
 - pageB.html - pageB.scss
 - pageC.html - pageC.scss

ボタンpageB.htmlにはmargin-top:30px. このように修飾子を書くのは正しいですか：

.btn {
  padding: 5px 20px;
  background: orange;
  margin: 0

  &--margin-top {
    margin-top: 30px;
  }
}

そして、特定のページだけにそのような修飾子を含める最良の方法は何ですか? この場合、それはpageB.html. その修飾子を or 内に含める必要がありますpageB.scssか.buttons.scss?

4

2 に答える 2

4

ここで 2 つの概念を混同していると思います.BEMは、プロジェクトの構造化の問題を伴う命名規則です。両者は互いに何の関係もありません。BEM は、SASS ファイルの構造化に関して独断的ではないと思います。

ただし、ここでいくつか質問があります。

  1. このように修飾子を書くのは正しいですか？- BEMの規則に固執したい場合は正しいですが、選択した名前.btn--margin-topは長期的にはあまり幸運ではないかもしれません - 想像してみbtnてmargin-topください40px。どのように名前を付けますか？
  2. 特定のページだけにそのような修飾子を含める最良の方法は何ですか? - これらの CSS クラスは通常、特定のページ用には作成していません。BEMの要点は、モジュール化された CSS を記述できるようにすることです。これを念頭に置いて、これらの CSS クラスをブロック/要素/修飾子にそれぞれ割り当てて使用する必要があります。ここでのコツは、マークアップ内のブロック/要素/モディファイアが何であるかを判断することです。これにより、再利用可能な CSS が実現されるため、BEM クラスを追加することで、同じ CSS をすばやく適用できます。ページではなく、ブロックまたはコンポーネント
    の観点から考えてください。でのみ使用したい-クラスをマークアップに追加するだけです。pageBbtn--margin-toppageB
  3. その修飾子をpageB.scssor 内に含める必要があります。buttons.scss? - プロジェクトをどのように構成するかによって異なります。通常、ボタンやその他の UI 要素は、ほとんどの場合、Web サイト / Web アプリケーション全体に共通しているため、特定のページ (概念 BEM を最大限に活用したい場合は、ドロップする必要があると思います)。さらに、自分に合うものは何でも良いので、開発者のチーム内で働いていない限り、独自の方法に固執してください。
于 2015-10-13T15:56:14.607 に答える
1

本番サイトでは、意図的により具体的なページ用のファイルを使用して、この問題を解決します。

他の回答者は正しいです。BEM はこの問題を解決しませんが、解決策は css アーキテクチャで利用できます。

私は次のようにプロジェクトを構成する傾向があります。

  • モジュール
  • セクション
  • ページ

それぞれがより具体的になります。

セクションには、ボタンをレンダリングする特定の方法がある場合があります。その場合、sass は次のようになります。

.section {
  .button--primary {
    // styles 
  }
}

ページの場合、同じですが、ページ固有のキーがあります:

.page {
  .button--primary {
    // styles 
  }
}

あなたもできる：

.page {
  .section {
    .button--primary {
      // styles 
    }
  }
}

重要なのは、sass ファイルの構造の特異性を維持することです。ボタン ファイルは変更されず、サイトの HTML の任意の場所にドロップして正しくレンダリングすることができます。また、モジュールとして、サイト全体に適用するスタイルのみを含める必要があります。例えば：

.button--call-to-action {
  background-color: $brand-colours__call-to-action;
}

(ハイフンはcall-to-actionのバリエーションでbuttonあり、アンダースコアはcall-to-actionに属する色のセットの 1 つであることを示すために使用されますbrand-colours)

余白の上部は、margin-top: 20px;その効果をサイトの目的の部分に限定するサスの一部として単純に定義されます。

余談ですが、通常、特定のページ ファイル内のほとんどすべてが、チェーンのさらに上にあるセクションやモジュールのバリエーションにリファクタリングされます。つまり、多くの場合、それらは空になります。

于 2015-10-15T17:23:44.243 に答える