私の経験では、柔軟性とモジュール性のために、ブロックの幅やマージンに責任があるべきではないことに気付きました。プロジェクトに「弾力のある」ブロックを持つことで、機能やレイアウトを損なうことなく、ページの異なる領域(サイズが異なる)を占めることが可能になります(moved around)。マージンに関しては、ブロックがより高いレベルで定義されていると、ブロック間に一貫したスペースを維持する方が簡単です:t-news
のようなテンプレートブロック(「t」はテンプレート用です)。
BEMはモジュール性が高く、特定のブロックに関連するすべてのコードはfile systemのブロックのフォルダにとどまっているため、CSSの一部のみであるメディアクエリと異なるはずはありません。重要なことは、CSSの動作を知ることです。たとえば、ルールのセットがテンプレート内の領域とマージンを定義している場合、メディアクエリを必要とするかどうかにかかわらず、これらのルールはブロックの一部である必要があります。これらの定義を担当する。
このアプローチは、メディアクエリの多くを生成することができ、パフォーマンスのレンダリングとの懸念があるかもしれないが、彼らは互いに異なるをしている場合にのみ、this articleによると、複数のメディアクエリーは、パフォーマンスに影響を与える可能性があります。 @media (max-width: 850px)
のような同じルールの反復は、シリアライズされ、1と解釈されます。
この方法では、領域とマージンに関連するメディアクエリがテンプレートブロックに入り、コンポーネント自体に関連する追加のメディアクエリがコンポーネントブロックに入ります。テンプレートはサイズの責任を負うので、あなたの例では、 "small"修飾子をテンプレートブロックに変更します。
また、プロジェクトの有効期間中に色が変化する可能性があるので、とred
を修飾語として再考します。私はcorrect
とalert
のような要素の外観を記述していないものを試してみることをお勧めします。
最後に、修飾子は、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;
}
}
この情報がお役に立てば幸いです。
正確に何を求めていますか? CSSでメディアクエリを最適に使用するには? BEMは "適応性"(これは応答性と同じですか?)ウェブサイトとメディアクエリでうまくいきます...ここでは、 "命名ブレークポイント"セクションをご覧ください:https://www.sitepoint.com/css-sass-styleguide/ – Joseph
はい、私は、メディアクエリとBEMを一緒に使用する最良の方法は何かを知りたいと思います。 – pepeevich