私は、CSS をよりモジュール化するために職場のプロジェクトで BEM を使用してきましたが、少し説明が必要だと感じるいくつかの状況に遭遇しました。
コンテキスト依存のスタイル。親アイテムのクラスに依存するモジュール/コンポーネントのスタイルを変更する必要性に遭遇し続けています。
私が製品リストをスタイルしているとしましょう。私は自分の.product-listコンポーネントを持っており、その中にすべての私.product-list__itemのものがあります。の.product-list__item場合<h3>、製品タイトルとして内側が含まれる場合があります。
私の質問は次のとおりです。
.product-list__itemのクラスも必要.itemですか?商品内のタイトルには次のクラスが必要です。
.item__title?
.product-list__item__title?
アイテムには説明ボックスもあり、価格が含まれているとします。
- 説明には次のものが必要です。
.item__description?
.product-list__item__description?
価格には次のものが必要です。
.item__description__price?
.description__price?
.price?
サブコンポーネントには、独自のコンポーネント名を別途追加する必要があります。つまり.item、または.description. 他にどこでスタイリングを適用するので、彼らはそれらを必要としていると思いますか?
また、上記の.product-listコンポーネントがあれば、問題ないように聞こえるコンポーネントがありますが、サブコンポーネントに独自のコンポーネント名がクラスとして追加されている.item場合、それ自体はあまり説明的ではありませんか?
複雑に聞こえるかもしれませんが、私はここで混乱することを真剣に考えており、あなたの意見を聞きたいと思っています. 私は BEM に関する記事をたくさん読んできましたが、この種のことを説明している人はいません。
ニール