コンテキスト スタイルの基本的な概念と、親と兄弟に基づいてスタイルを定義する理由を理解しています。しかし、場合によっては、必要でない限り書く必要のない css を追加するだけのように思えます。これを例にとります。私のサイトに次のように定義した赤いボタンがあるとします。
.button.red{
background-color: #ff0000;
color: #fff;
}
したがって、次のコードをどこにでも配置できます。
<button class="button red">submit</button>
しかし、HTML から「赤」または「緑」のスタイルを削除し、コンテキスト スタイルを使用するのがベスト プラクティスであると聞いたことがあります。しかし、これは、その親に基づいて各赤または緑のボタンを書き込むための大量の追加 css につながります。なぜこれをやりたいのか、またはこれが必ずしもベストプラクティスではないのか、誰かが光を当てることができますか.
わかりました、最初に片付ける必要があるものがあると思います。それはセマンティック スタイリングです。ここで行っているのは、静的なスタイルをボタンに適用するだけです。これは問題ありませんが、指定した名前は非常に具体的です。一部のボタンが赤くなると言って、そのように名前を付けています。
しかし、さらに進んで、そのタイプのボタンを青色にすべきだと判断した場合はどうなるでしょうか? それとも緑？代わりに、このボタンのスタイルを設定する理由を説明するクラス名を使用する必要があります。赤いボタンのすべてがプライマリ アクションであるということではなく、プライマリ アクション ボタンが赤いという観点から考えてみてください。したがって、 Bootstrap の用語から盗むために、「ボタン レッド」のクラスではなく、「ボタン プライマリ」または「ボタン エラー」のクラスを指定します。これは、実際に達成しようとしていることの意味を説明するものです。 .
これには後の利点もあり、「ポップアップ コンテナー内のすべてのプライマリ ボタンが緑色になる」と宣言するなどのことができます。
.popup .button.primary {}
この種の分離により、コードの見栄えが良くなり、一般的なものから始めて、ニーズがより具体的になるにつれてルールをより具体的にすることができます。これは、プログラムとスタイルの両方の観点から役立ちます。