属性セレクターを使用したレスポンシブスタイリング

クラス名に基づいた霧化されたスタイルの課題の1つは、コンテキストを決定するために特定のブレークポイントに依存することが多いことです。

<div></div>
<div></div>
<div></div>

プレフィックスは通常、各ブレークポイントを見つけるために使用されます。

<div></div>

これは、複数のクラスを追加する前にうまく機能します。ただし、複数のクラスの追加を開始すると、どのクラスがどのクラスに関連しているかを追跡し、コンテンツを追加、削除、または変更する場所を追跡することは困難です。

<div>
</div>

再編成によって読みやすさを改善しようとすることができます。

<div>
</div>

また、特別なスプリッターを追加することもできます（無効なクラス名は無視されます）：

<div>
</div>

しかし、それはまだ混乱を招き、理解するのが難しいと感じています。

実際のクラスの代わりにプロパティセレクターをグループ化することにより、より良い概要を取得し、プレフィックスの実装を避けることができます。

<div data-lg="span-4 font-size-xl font-weight-700" data-md="span-6 font-size-xl font-weight-500" data-sm="span-12 font-size-lg"></div>

これらはクラスのコレクションではなく、 [attribute~="value"]セレクターを使用し~=選択できるスペース分離プロパティのセットです。

 @media（min-width：0）{
 [data-sm〜 = "span-1"] {/*...*/}
 [data-sm〜 = "span-2"] {/*...*/}
 / *など */
}
@media（min-width：30rem）{
 [data-md〜 = "span-1"] {/*...*/}
 [data-md〜 = "span-2"] {/*...*/}
 / *など */
}
@media（min-width：60rem）{
 [data-lg〜 = "span-1"] {/*...*/}
 [data-lg〜 = "span-2"] {/*...*/}
 / *など */
}

これは少し奇妙に思えるかもしれませんが、原子クラスをプロパティに変換することはかなり単純だと思います（たとえば、 .sm-span-1 [data-sm~="span-1"]に変換）。さらに、プロパティセレクターはクラスと同じ特異性を持っているため、何も失うことはありません。さらに、クラスとは異なり、特殊文字（ / .:?など）を逃れることなくプロパティを書くことができます。

それでおしまい！繰り返しますが、これは、メディアクエリでの書き込みステートメントを簡単に書き、読み取り、管理できるようにするための単なるアイデアです。これは間違いなくクラスなどをキャンセルするための提案ではありません。

以上が属性セレクターを使用したレスポンシブスタイリングの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。