BEM設計をする際のクラス名について

現状

HTML,CSSを勉強しています
クラス名をつけるのがとても苦手で、最近CSSの完全設計ガイドを購入しました
BEM設計を取り入れたいと思い練習中なのですが、複数ページで同じCSSを共有したい場合のクラス名をどうつければよいのか
flexコンテナー、flexアイテムにどのような英単語を使用すればいいのか定まらず悩んでいます
以下の場合みなさまはどのようなHTMLを記述するのかお聞きしたくこちらを利用させていただきました
相談できる方が身近におらず、場違いな部分がありましたら申し訳ございません
ご意見いただけますと幸いです

ホームページ

企業HP
トップページ＋下層ページ

デザイン

画像と同じデザインが下記２ページで使用されている

会社概要（ディレクトリ名：company）
サービス概要（ディレクトリ名：service）

ソースコード

HTML
1<section class="company-about">
2<div class="inner">
3<div class="company-about__flex">
4
5<div class="company-about__text">
6<h2 class="title01"></h2>
7<p>テキストテキストテキストテキストテキストテキストテキスト
8テキストテキストテキストテキストテキストテキストテキストテキスト
9テキストテキストテキストテキストテキスト</p>
10<div class="company-about__btn-flex">
11<a href="#" class="btn01">ボタン</a>
12<a href="#" class="btn01">ボタン</a>
13</div>
14</div>
15
16<div class="company-about__image"><img src="image"></div>
17
18</div>
19</div>
20</section>
21
22
23<section class="company-concept">
24<div class="inner">
25<div class="company-concept__flex --reverse">
26
27<div class="company-concept__text">
28<h2 class="title01"></h2>
29<p>テキストテキストテキストテキストテキストテキストテキスト
30テキストテキストテキストテキストテキストテキストテキストテキスト
31テキストテキストテキストテキストテキスト</p>
32<div class="company-concept__btn-flex">
33<a href="#" class="btn01">ボタン</a>
34<a href="#" class="btn01">ボタン</a>
35</div>
36</div>
37
38<div class="company-concept__image"><img src="image"></div>
39
40</div>
41</div>
42</section>

BEM設計を勉強中です
会社概要（ディレクトリ名：company）をHTMLにした場合、今までこのように書いていました
サービス概要（ディレクトリ名：service）ページでは.company-aboutが.service-aboutなどになります

大体タイトル(about,concept)にあたる部分とディレクトリ名（company,service）を合体させてsection（ブロック）のクラス名にして、
section（ブロック）の中にエレメントとして内容を書いていくような流れです

悩んでいること

今行っているようなクラス名の命名方法だと、同じデザイン・同じCSS内容なのにページやsectionが変わる度に新たなクラス名を指定する必要があります
クラス名にcompany-aboutのような意味があるため別ページに流用することができません
また、flexコンテナー、flexアイテムのクラス名にも自分のなかで違和感があり、納得言っていません
.company-about__textはpタグについたほうが意味としては正しいし.company-about__imageもimgタグについたほうが意味がわかる気がするからです
他に.company-about__text-boxや.company-about__flex-textが思いついたのですがなんだかしっくりきません
.company-about__btn-flexもこれでいいのかな、と悩んでいます

BEMで書こうとしてみるとブロックにするかエレメントにするか、自分が書いているものはエレメントなのかブロックなのか、それすらもわからなくなってしまう時がありかなり迷走しています

みなさまはこのような場合どのようにHTML・クラス名を記述されますか？
お時間のある方がいらっしゃいましたら自分だったらこう書くなあ〜というHTMLを残していただけると嬉しいです

回答3件

Lhankor_Mhy

総合スコア36442

投稿2024/01/31 05:18

BEMと一口に言っても、マルチクラスを許容するのかとかと、ユーティリティクラスを許容するのかとか、詳細度を変更するのを許容するのかとか、エレメントのネストを許容するのかとか、いろいろ宗教宗派があると思います。宗教戦争をするつもりはないのですが、ご質問者の教義に触れてしまうことはあると思いますので、その辺りはご寛恕ください。

クラス名にcompany-aboutのような意味があるため別ページに流用することができません

これは、もう少しボックス名を寛容にしてみてはどうでしょうか。たとえばcompany-infoやcompany-cardのようにするとか。もし意味論的に引っかかるのであれば、CSSに使用しないクラスを作ってマルチクラスにしてみてはどうでしょうか。クラスのかぶりの可能性が増えますが、たとえば「ブロックは必ずケバブケース」などと決めておけば重複が防げるかもしれません。

また、flexコンテナー、flexアイテムのクラス名にも自分のなかで違和感があり

これについては、ご自由になさったらいいのではないかと思います。個人的には、BEMは『詳細度が複雑になることを防ぐ』『クラスかぶりを防ぐ』の2点を達成すればいいと考えているので、セマンティクスについてはあまり気にせずに、わかりやすければいいだろうと思っています。company-about__container とか company-about__body とか company-about__figure とか company-about__footer とか、抽象度を上げてみるのもいいかもしれないですね。

ただまあ、ご質問の趣旨から外れるかもしれませんが、フレックスコンテナがそんな深いところにいることに違和感がありました。「company-about や inner は仕事してないの？」という気持ちです。特にinnerブロックはエレメントを持ってないですが、何のためにあるんでしょう。

mazemaze

総合スコア7

投稿2024/02/06 02:01

編集2024/02/06 07:01

お悩みの

今行っているようなクラス名の命名方法だと、同じデザイン・同じCSS内容なのにページやsectionが変わる度に新たなクラス名を指定する必要があります

の部分で私見を書きます。
解決法：
①ユーティリティクラスを作って（.col2, .col2__body, .col2__text など)　それを再利用する
②Sassならmixin記法で書いて一元化する
③BootstrapなどのCSSフレームワークなど導入する
④同じデザイン箇所の量によるが、やられている通り同じデザインだけどクラス名分けて書く

④は一見非効率に見えるが、例えばserviceだけ少し違うデザインにしたい、とかの場合変更が複雑にならないで済みます（打ち消しのcss書かないで済みます）。ちょいデザイン違いみたいなのが多い場合、こちらの方が逆に効率的かと思います。

BEM記法は割と悩みどころも多く、ベストプラクティスはサイトの規模・ページの種類・所属組織（やり方）の方針にもよります。

lifull_shimaokk

総合スコア129

投稿2024/02/06 03:26

クラス名の命名は、いつになっても悩むものです。
私も実装よりもこの命名に時間がかかったりすることがよくあります。

少し別の切り口にはなりますが、Tailwind CSSなどを用いて、全てユーティリティクラスで対応してしまうというのも何かの際に検討してみるのも良いかもしれません。

最新の回答から1ヶ月経過したためこの意見交換はクローズされました

意見をやりとりしたい話題がある場合は質問してみましょう！

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！