css設計について【BEM】

Question

お世話になります。

現在BEMを勉強しており練習のため下記を作成しましたが、なんだか冗長的になってしまいました。

下記コードををBEMを用いて記述したい場合、皆さんならどうされますでしょうか？
ご意見いただきたいです。

<header class="header">
    <h1 class="header__logo">ロゴが入ります。</h1>
    <nav class="header__nav">
        <ul class="header__nav__list">
            <li class="header__nav__list__item--type1"></li>
            <li class="header__nav__list__item--type2"></li>
            <li class="header__nav__list__item--type3"></li>
        </ul>
    </nav>
</header>

Answer 1

自分ならこうしますね。

<header> <h1>ロゴが入ります。</h1> <nav> <ul> <li></li> <li></li> <li></li> </ul> </nav> </header>

なんでこうなるかというと、まず<header>というのはファイルの中で1回しか出ないものですから、わざわざclassを指定する必要がありません。

ulリストの中の2番目のリストを装飾したいなら

header nav ul li:nth-of-type(2) {color:red;}

とすればいいので、子要素にもclassは必要ありません。

Comments

[退会済みユーザー]

ご回答ありがとうございます！

[s8_chu]

> まず<header>というのはファイルの中で1回しか出ないもの
HTML5では、そのような制約はないように思いますが、いかがでしょうか？

[mnnEditor]

「一般的には」という話で、特に他意はありません。
headerが2つ出てくる（たとえばPC用とスマホ用のheaderがあってウィンドウの幅で表示の切り替えとかを行なっているとか）ならclassかidを付与して複数置くというのは当然ありだと思います。

[Lhankor_Mhy]

横からすみません。

HTML5の仕様によると、このようなセマンティクスのようです。
> The header element represents introductory content for its nearest ancestor sectioning content or sectioning root element.
header要素は直近の祖先セクショニングコンテンツやセクショニングルートの導入を表す。

> The header element can also be used to wrap a section’s table of contents, a search form, or any relevant logos.
header要素は、セクションの目次、検索フォーム、関連ロゴなどを含んでよい。

なので、「一般的には」ひとつの文書に複数使われる要素かと思います。

[Lhankor_Mhy]

というか、よく見ると「BEMで」という質問の意図からずれているので、マイナス評価いたします。
質問の意図を無視する場合には、その理由を明示したほうがいいのではないでしょうか。

[sota_u]

一般的と仰っていらっしゃいますが、headerタグをひとつのファイル内にひとつだけしか利用してはならないという制約は見当たりません。
そのため、マイナス評価をさせていただきます。

[sota_u]

私の手法として例えば一例ですが、コンテンツの定義を、さらに細分化します。

例えば、
グローバルモジュール: g-xxxx
ページモジュール: p-xxxx
モジュールに対するパーツ: m-xxxx-yyyy

上記を前提とした場合、ご提示のソースは以下のようになります。
<header class="g-header">
<h1 class="m-header-logo">ロゴが入ります。</h1>
<nav class="m-header-nav">
<ul class="m-header-nav-list">
<li class="m-header-nav-list__item--type1"></li>
<li class="m-header-nav-list__item--type2"></li>
<li class="m-header-nav-list__item--type3"></li>
</ul>
</nav>
</header>