この記事では、カスケードを使用して友達を作成し、おそらく重複の必要性を減らし、それによって特定事項との戦いを最小限にする方法をいくつか示します。
ヒント1：
各CSSプロパティを書き留めるときは、階層内でできるだけ高く移動するようにしてください。 つまり、基本に戻ります。
たとえば、私たちのサイトにはサイドバーがあり、それに小さな伝記を追加したいと考えています。 マークアップは次のようになります。
<body> <main class=“Posts”> <aside class=“SideBar”> <nav class=“Nav”> <p class=“Bio”>
CSSは次のようなものです。
.Bio { font-size: .8em; line-height: 1.5; color: #888; }
うまくいくはずです。 ただし、一部の要素のスタイルが同じであることが判明する場合があります。 私たちの場合、これはフォントサイズと色です。 したがって、これらのプロパティをナビゲーション（Nav）と伝記（Bio）から共通の親要素であるサイドバー（SideBar）に移動しましょう。
.SideBar { font-size: .8em; color: #888; }
また、line-height属性が1.5であるとします。 メッセージに対して定義する必要があります。 したがって、ページ全体で同じ行の高さが使用されるため、この属性をBioおよびPost要素からルートに移動しましょう。
:root { line-height: 1.5; }
これは当たり前のように思えるかもしれませんが、多くの場合、関連する要素の1つが同じ属性を持っていることを確認せずに、新しい要素を本当に設計したいと考えています。 また、これは、他のセクションからスタイルをコピーするか、インターネットで見つかったスニペットを貼り付けると発生します。 コードの再編成には少し時間がかかり、かなり怖いように見えますが、CSSをより健全に保つことができます。
すべての葉ではなく、枝を作ります
ヒント2：
特定のプロパティを組み合わせて設計します。
素晴らしい例は、色と背景色の属性の組み合わせです。 小さな変更を加えない限り、これらの属性は一緒に変更するのが最適です。 要素の背景色を追加する場合、テキストを含めるべきではありませんが、子要素は含めることができます。 したがって、前景と背景の色を同時に調整する場合、互換性またはコントラストの問題がないことを確認できます。 また、次に背景色を変更するときには、テキストのすべての色を探す必要はありません。すべての色は近くにあるため、変更する必要もあります。
ヒント3：
currentColorやemなどの「動的な」値を使用します。
他のプロパティにカラーテキスト属性を使用することが理にかなっている場合があります。 たとえば、SVGアイコンの境界線、ボックスシャドウ、または塗りつぶし属性の場合。 それらを直接指定する代わりに、color属性のプロパティを複製するcurrentColorを使用できます。 色はデフォルトで継承されるため、1か所で変更するだけで十分です。
同様に、emはfont-sizeにマッピングされ、ルートのフォントサイズを変更するだけで任意の要素をスケーリングできます。
currentColorとEMの詳細については、 こちらをご覧ください 。
ヒント4：
親要素から継承するUAスタイルを複製します。
ブラウザによって特定の方法で設計されたボタンや入力フィールドなどのコントロールを作成します。 inherit属性を使用してそれらを複製することにより、独自のスタイルに適合させることができます。
button, input, select, textarea { color: inherit; font-family: inherit; font-style: inherit; font-weight: inherit; }
上記の例は、sanitize.cssから取られています。 normalize.css、および同じことを行うため、これらの要素を使用する場合は、すべて設定されていることを考慮してください。
また、スライダー、ラジオボタン、チェックボックスなどの他の入力要素を再設計することもできます。また、上記のように、currentColorを使用して、colorプロパティを自動的に考慮に入れます。 また、何も変更せずにテーマを明るいものから暗いものに変更します。
おわりに
これはすべて素晴らしいですが、誰がそれを必要としますか？ もちろん、各状況でこれらのアプローチをすべて強制的に使用するべきではありません。 これは、小規模でシンプルなサイトに最適です。 しかし、プリプロセッサを使用している場合でも、出力を受け取るCSSの量が減った場合、またはいくつかの変数が単に必要ない場合、何も悪いことは起こりません。
また、タキオンなどの「特別なクラス」にも適しています。 これは、必要なクラスの複雑さと数を減らすのに役立ちます。
もう1つの興味深い点は、CSS変数などの有望なカスタムプロパティです。 プリプロセッサの変数とは異なり、カスタムプロパティを複製すると、現在のセレクタにのみ影響します。 したがって、それらは「カスケード変数」のようなものになります。 しかし、私はまだこれを確認し、実際にどのように機能するかを確認する必要があります。
Habr読者向けのPaysto支払いソリューション：