6

固定レイアウトに BEM を使用するのは簡単です。メディアクエリを使用したアダプティブ Web ページの CSS スタイル構造とは?

html サンプル:

<div class="t-news">
    <div class="t-news__post b-post">
        <div class="b-post__title"></div>
        <div class="b-post__text--green"></div>
    </div>
    <div class="t-news__post b-post--small">
        <div class="b-post__title"></div>
        <div class="b-post__text--red"></div>
    </div>
</div>

少ないサンプル:

.t-news {
     &__post {
         //some styles
     }
}
.b-post {
     &__title {
         //some styles
     }
     &__text {
         //some styles

         &--red {
              //some styles
         }
         &--green {
              //some styles
         }
     }

     &--small {
         //some styles
     }
}
  • .t-news - ページ テンプレート。内部のブロックの位置を定義するブロックです。
  • .b-post - BEM ブロック
  • .b-post__title - b-post の BEM 要素
  • .b-post__text--red - b-post__text の b-post__text の BEM 修飾子

メディアクエリをブロックの内側または外側に配置する必要がありますか?

4

1 に答える 1

6

私の経験では、柔軟性とモジュール性のために、ブロックが幅やマージンに責任を持つべきではないことに気付きました。プロジェクトに「弾力性のある」ブロックがあると、機能やレイアウトを壊すことなく、ページのさまざまな領域 (さまざまなサイズ) を占めるようにブロックを移動できます。マージンに関しては、より高いレベルで定義されている場合、ブロック間に一貫したスペースを維持する方が簡単です.テンプレートブロックのようなものだと思いt-newsます(「t」はテンプレート用であると考えてください)。

BEM はモジュール性がすべてであり、特定のブロックに関連するすべてのコードはファイル システムのブロックのフォルダーにとどまるため、CSS の一部にすぎないメディア クエリと同じであるべきです。重要なことは、CSS が何を行っているかを知ることです。たとえば、一連のルールがテンプレートの領域と余白を定義している場合、そのためのメディア クエリが必要かどうかに関係なく、これらのルールはブロックの一部である必要があります。これらの定義を担当しています。

このアプローチでは大量のメディア クエリが生成される可能性があり、レンダリング パフォーマンスに懸念が生じる可能性がありますが、この記事によると、複数のメディア クエリは互いに異なる場合にのみパフォーマンスに影響を与える可能性があります。のような同じルールの繰り返しは、@media (max-width: 850px)シリアル化され、1 つとして解釈されます。

このように、領域とマージンに関連するメディア クエリはテンプレート ブロックに入り、コンポーネント自体に関連する追加のメディア クエリはコンポーネント ブロックに入ります。テンプレートはサイズを担当するので、あなたの例では、「小さい」修飾子をテンプレート ブロックに変更します。

また、プロジェクトの存続期間中に色が変わる可能性があるため、修飾子としてgreenandを使用することを再検討します。やredなど、要素の外観を説明していないものを試すことをお勧めします。correctalert

最後に、修飾子は のように HTML の要素クラスに従う必要があることを覚えておいてくださいb-post__text b-post__text--alert。

更新されたコードは次のとおりです。

HTML :

<div class="t-news">
    <div class="t-news__post b-post">
        <div class="b-post__title">Title 1</div>
        <div class="b-post__text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eget ligula eu lectus lobortis condimentum. Aliquam nonummy auctor massa. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla at risus. Quisque purus magna, auctor et, sagittis ac, posuere eu, lectus. Nam mattis, felis ut adipiscing.</div>
    </div>
    <div class="t-news__post b-post">
        <div class="b-post__title">Title 2</div>
        <div class="b-post__text b-post__text--correct">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eget ligula eu lectus lobortis condimentum. Aliquam nonummy auctor massa. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla at risus. Quisque purus magna, auctor et, sagittis ac, posuere eu, lectus. Nam mattis, felis ut adipiscing.</div>
    </div>
    <div class="t-news__post t-news__post--small b-post">
        <div class="b-post__title">Title 3</div>
        <div class="b-post__text">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
    </div>
    <div class="t-news__post t-news__post--small b-post">
        <div class="b-post__title">Title 4</div>
        <div class="b-post__text b-post__text--alert">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
    </div>
</div>

SCSS :

.t-news {
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-start;
    margin: -0.5rem;

    &__post {
        margin: 0.5rem;
        width: calc(50% - 1rem);
        @media (max-width: 800px) { width: calc(100% - 1rem); }

        &--small {
            width: calc(25% - 1rem);
            @media (max-width: 800px) { width: calc(50% - 1rem); }
        }
    }
}

.b-post {
    box-sizing: border-box;
    border: 1px solid #eeb;
    background: #ffc;
    padding: 0.5rem;

    &__title {
        font-size: 1.5rem;
        @media (max-width: 800px) { font-size: 1.25rem; }
    }

    &__text {
        font-size: 1rem;

        &--correct {
            color: green;
        }

        &--alert {
            color: red;
        }
    }

    &--small {
        border: none;
        font-style: italic;
    }
}

お役に立てれば。

于 2016-06-22T15:52:15.543 に答える