12

私はCSSを書いているときにBEM方法論を使い始めましたが、特定のことを行うための最良の方法を見つけるのに苦労することはほとんどありませんでした。

ここでは、パネルの簡単な例を取り上げたいと思います。

BEMスタイルを使用してパネルコンポーネントCSSを作成しているとしましょう。したがって、私のCSSは次のようになります。

.panel {}

.panel__titlebar {}

.panel__content { display: none; }

パネルは、クロムレスまたはクロムありのいずれかです。そこで、パネルに別の修飾子クラスを定義します。

.panel--with-chrome {
 border: 4px solid black;
 border-radius: 4px;
}

たとえば、パネルをフルスクリーン/最大化した状態にして、クロームとタイトルバーが消えることもできます。パネルとタイトルバーの両方に修飾子を定義する代わりに、親（たとえば、パネル-フルスクリーン）で修飾子を定義するのが賢明であり、残りの要素はそれに応じて変更されます。だから今私のCSSは次のようになります：

.panel--fullscreen {
 /* something has to be done here */
}

.panel--fullscreen .panel__titlebar { display: none; }

フルスクリーンモードでクロームを削除するには、次のいずれかを実行できます。

  1. パネルを切り替える-パネルと一緒にJSのChromeクラス-フルスクリーンクラス

  2. パネル内のクロムCSSを上書きします--fullscreenクラス。

理想的には、JSの1つのクラス（ .panel--fullscreen）だけを切り替えてフルスクリーンモードを切り替えたいので、最初は良くありません。

そして、2番目のものは悪い習慣です。以前のCSSを上書きする必要があるからです。

それで、それについて行くための最良の方法は何ですか？あなたのコメントに感謝します。

ありがとう

4

2 に答える 2

14

答えは多くのものに依存します。

まず、ロジックと外観に「panel--with-chrome」および「panel--fullscreen」修飾子がどれだけあるか。また、このロジックがどのようなものかについても説明します。

「panel--with-chrome」が多くのCSSプロパティと特別なJS機能をもたらす場合、「panel--fullscreen」を適用するときにJavaScriptで切り替えます。
また、使用するJavaScriptフレームワークによっても異なります。Yandexで使用している「i-bem.js」では、修飾子の追加に簡単に反応できます。

しかし、使用するフレームワークでそのような反応を便利に表現できない場合、この回答はあまり効果的ではありません。

他のケースでは、「panel--with-chrome」にプロパティがあまりなく、ページにJavaScriptロジックがない場合、「panel--fullscreen」クラスでそれらのCSSプロパティを再定義します。

要約すると、従うべき普遍的な解決策や厳格な規則はありません。あなたは自分の場合に何が役立つかを自分で決める必要があります。決定は多くのものに依存する必要があります：

  • プロジェクトが将来も維持されることを期待している場合、どのソリューションをサポートするのが簡単ですか？
  • 使用するJavaScriptフレームワークの機能
  • パフォーマンス関連
    この特定のケースではありませんが、選択しているバリアントのレンダリング速度を測定する場合があります。
  • あなたがチームで働いているなら、他の人の意見
  • プロジェクトのファイル構造
    ここYandexでは、ブロックのCSSとJavaScriptを同じブロックフォルダーに保存します。したがって、CSSとJavaScriptはすべて1つの場所にあるため、これらの間でロジックを共有することは問題ではありません。
    ただし、JavaScriptファイルを個別に保持する場合、これは共有ロジックのサポートの快適さに影響を与える可能性があります。

等々...

于 2013-01-01T10:57:39.617 に答える
2

私は最初のオプションを選びます。結局、状態を切り替えているので、それに応じてクラスを追加/削除/切り替えする必要があります。CSSIMOで大量のデータを元に戻すよりも優れています。

于 2012-12-30T18:13:37.037 に答える