最近のCSSの考え方や、BEMを少し取り入れたコーディングの問題点

Question

最近のCSSの考え方や、BEMを少し取り入れたコーディングをしているのですが、

下記のようにトップページのヘッダーのクラス名をつけました。

下記はすべてのページで共通する、要素なのですが、そうするとこのように共通する部分に同じCSSを当てたいと思った時、現場ではどうしているでしょうか？

<header class="top-header" role="banner">

ひとつのﾌﾟﾛﾊﾟﾃｨすべてのページ分のセレクタをカンマで指定するのでしょうか？
要素をユニークなクラス名にすると、セレクタがカンマでとんでもない数になるのですが、
問題ないのでしょうか？

それともさほど上記の考えは現場ではなされていないでしょうか？

実際のソースがないとわかりにくいと思いますので、追加します。

・top

<header class="top-header" role="banner"> <h1 class="top-header__top-primary-heading">（WEＢサイト制作）を行っています。</h1> <ul class="top-header__address" role="address"> <li><a href="tel:[phone]">TEL</a></li> <li><a href="mailto:[e-mail]">[e-mail]</a></li> </ul> </header>

・blog

<header class="blog-header" role="banner"> <h1 class="top-header__top-primary-heading">（WEＢサイト制作）を行っています。</h1> <ul class="top-header__address" role="address"> <li><a href="tel:[phone]">TEL</a></li> <li><a href="mailto:[e-mail]">[e-mail]</a></li> </ul> </header>

・CSS

blog-header,top-header,top-header,～ ｛

｝

Answer 1

topのヘッダーもblogのヘッダーもデザインは全く同じで、
中身のテキストが少し変わるだけなのであれば、
そもそもclass名を別にする必要もないのではありませんか？？

<header class="site-header" role="banner"> ・・省略・・ </header>

で統一するとか？

Block-Element-Modifierの概念で考えれば、
このケースであればルートにあたるBlockをそもそも分ける理由がありません。
もし仮にtopとblogで微妙なバリエーションの違いがあるのであれば、
Modifierで対応するべきケースとなるので、例えば

<header class="site-header__top" role="banner"> ・・省略・・ </header> <header class="site-header__blog" role="banner"> ・・省略・・ </header>

のような感じにすれば良いのでは。
この場合.site-header__topと.site-header__blogでは
書かれるCSSはほとんど同じになるでしょうが、完全に手書きでBEMるなら
その辺の冗長性は許容する必要があるかと思います。
（Sassとか使えればそのへんは@extendとかで解消できそうですが。）

個人的にはこの辺がシングルクラスベースのBEMに馴染めない理由なので
Block-Element-Modifierの概念自体は参考にしながら、
多少のマルチクラス併用は許容するくらいにして運用したい派です。
まぁその辺は突き詰めると宗教戦争になりかねないので、
あくまで個人の好みの問題ですけどね。

Comments

[退会済みユーザー]

いつもお返事ありがとうございます。

＞
topのヘッダーもblogのヘッダーもデザインは全く同じで、
中身のテキストが少し変わるだけなのであれば、
そもそもclass名を別にする必要もないのではありませんか？？

その通りですね。
今は、各要素をユニークなクラス名をつけると聞いていますので、各ページで別のクラス名にしたのですが、セレクタをページ分、カンマで指定しないといけなくなる事に直面しました。
そこで、一体各要素を移動しても使えるようにする為にユニークなクラス名をつけている方達は、一体どのようにして共通部分を維持しているのか疑問になりました。

理論上は、OOCSSのように共通部分のCSSを作り、共通しない部分は別のクラスとして作成し、マルチクラスで指定するのか、
セレクタをページ分指定するしかなと思いました。

そのようなコーディングをされている方は増えてきていないでしょうか？
その場合どう実現しているのか、もしご存知でしたら教えてください。

逆に、まだ始まったばかりの流行で、大手サイトをコーディングしている会社員でもない限り、そのような考えは不要で、
フリーランスを目指す場合は、共通部分のクラス名が同じで現場でも問題ないと考えられている場合は、そのようにしようかと思っています。

流行は、働き方によって不要な場合もあるようですね。
判断が難しいです。

BEMも流行なのかもしれないので、完璧なBEMはおっしゃる通り長すぎるので、そのうち廃れる可能性がありそうですね。

どの流行に今乗っておくべきかも、考えながらコーディングをしないといけないと思いました。
どれに乗って、どれに乗るべきでないかも、今後質問させて頂こうかと思います。

Answer 2

あるグループには共通の特性+αをもつ要素が多数あるといった状態でしょうか？
それでしたらスペース区切りで複数のCSSをセット可能なので、下記のように共通の要素を別クラスに抜き出すのも一つの方法かと思います。

<header class="header-common" role="banner"> /* トップページのヘッダ */ <header class="header-common sub-page" role="banner"> /* サブページのヘッダ */

ただIE6を対応ブラウザに加えるなら、複数クラス指定の実装が不十分らしいので注意が必要です。

Comments

[hirohiro]

というかこれ自体BEM的な考え方ですね。質問意図を取り違えていましたでしょうか。

[退会済みユーザー]

ありがとうございます。

ヘッダーの部分のCSSはまったく同じになる予定です。
テキストなどが変わります。