2016-06-22 40 views
3

固定レイアウトにBEMを使用するのは簡単です。メディアクエリを使用した適応型WebページのCSSスタイル構造について教えてください。アダプティブWebページのBEM方法論を使用して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-ニュース - ページテンプレート。内部のブロックの位置を定義するブロックです。
  • .Bポスト - B-ポストのBEM要素
  • .B-post__text - - 赤 - BEMは
  • .B-post__titleブロックBポストのB-post__textのBEM剤を

私のブロックの内外にメディアクエリーを置くべきですか?

+1

正確に何を求めていますか? CSSでメディアクエリを最適に使用するには? BEMは "適応性"(これは応答性と同じですか?)ウェブサイトとメディアクエリでうまくいきます...ここでは、 "命名ブレークポイント"セクションをご覧ください:https://www.sitepoint.com/css-sass-styleguide/ – Joseph

+0

はい、私は、メディアクエリとBEMを一緒に使用する最良の方法は何かを知りたいと思います。 – pepeevich

答えて

3

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

BEMはモジュール性が高く、特定のブロックに関連するすべてのコードはfile systemのブロックのフォルダにとどまっているため、CSSの一部のみであるメディアクエリと異なるはずはありません。重要なことは、CSSの動作を知ることです。たとえば、ルールのセットがテンプレート内の領域とマージンを定義している場合、メディアクエリを必要とするかどうかにかかわらず、これらのルールはブロックの一部である必要があります。これらの定義を担当する。

このアプローチは、メディアクエリの多くを生成することができ、パフォーマンスのレンダリングとの懸念があるかもしれないが、彼らは互いに異なるをしている場合にのみ、this articleによると、複数のメディアクエリーは、パフォーマンスに影響を与える可能性があります。 @media (max-width: 850px)のような同じルールの反復は、シリアライズされ、1と解釈されます。

この方法では、領域とマージンに関連するメディアクエリがテンプレートブロックに入り、コンポーネント自体に関連する追加のメディアクエリがコンポーネントブロックに入ります。テンプレートはサイズの責任を負うので、あなたの例では、 "small"修飾子をテンプレートブロックに変更します。

また、プロジェクトの有効期間中に色が変化する可能性があるので、​​とredを修飾語として再考します。私はcorrectalertのような要素の外観を記述していないものを試してみることをお勧めします。

最後に、修飾子は、b-post__text b-post__text--alertのように、HTMLの要素クラスをフォローする必要があることに注意してください。

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; 
    } 
} 

この情報がお役に立てば幸いです。

+0

フィードバックありがとうございました。私はいくつかの質問があります: – pepeevich

+0

)なぜ "margin:-0.5rem;" tニュースのために。私はブロックの位置を追加するのは悪いことだと思う。親ブロックのみがその子の位置を設定できます。子ブロックは正確なサイズでなければなりません。 – pepeevich

+0

2)私はいくつかの開発者と話をしました。私たちの議論の要点は、 "b-block__element-modifier"を指定することができ、 "b-block__element b-block__element-modifier" block_element、b-block__element - 修飾子{/ *ここではコモンスタイル* /} "。 – pepeevich

関連する問題