18

私はhtml + cssを書くためにBEMアプローチを使用しています。この構文では:

  • ブロック: block_name
    • 要素: block_name__element_name
    • モディファイア: block_name__element_name -- モディファイア

別のブロック内にブロックがあると混乱します。たとえば、ヘッダーでは、ヘッダーを参照できるブロックにし、nav とロゴをブロックにしたいと考えています。これらのナビゲーション ブロックとロゴ ブロックを、site_header 内にあるものとして参照したいと思います。でも、どうやって書くの？block_name__sub_block_name のようなブロックの連鎖はかなり長いようです。

誰かがこの例を書く典型的な方法を持っていますか?

<div class="site_header__logo">
    <a class="site_header__logo__link">
        <img class="site_header__logo__image">
    </a>
</div>

<nav class="site_header__main_nav">
    <ul>
        <li class="site_header__main_nav__item">
            <a class="site_header__main_nav__link">Home</a>
        </li>
        <li class="site_header__main_nav__item">
            <a class="site_header__main_nav__link">About Us</a>
        </li>
        <li class="site_header__main_nav__item">
            <a class="site_header__main_nav__link">Contact Us</a>
        </li>
    </ul>
</nav>

<div class="site_header__phone">
    <p class="site_header__phone__number">
        555.555.5555
    </p>
</div>

4

3 に答える 3

-3

ええ、クラス名の中から多くを取り除くことができます。例えば：

HTML:

`

<nav class="site_header">
    <ul>
        <li class="nav_item">
            <a class="nav_link">Home</a>
        </li>
        <li class="nav_item">
            <a class="nav_link">About Us</a>
        </li>
        <li class="nav_item">
            <a class="nav_link">Contact Us</a>
        </li>
    </ul>
</nav>

`

次に、CSS 内に次のように記述します。

`

.site_header { 
    ... stuff ...
}

.site_header .nav_item {
    ... nav_item stuff ...
}

.site_header .nav_link {
    ... nav_link stuff ...
}

`

于 2014-03-28T21:16:13.557 に答える