CSS で知らないヒント-CSSチュートリアル-php.cn

CSS で知らないヒント

伊谢尔伦

リリース： 2016-12-01 10:12:46

オリジナル

1373 人が閲覧しました

CSS のカスケードは、幸せであると同時に苦痛であるとも言えます。通常は非常にうまく機能しますが、問題が発生すると、たとえ CSS がない場合でも、人々は非常に興奮します。 CSS カスケードだけでなく、CSS の重みについても話しています。特別な問題が発生したときだけが難しいというわけではありません。CSS の難しさはあらゆるところにあると言えます。

この記事では、CSS カスケードをより使いやすくし、不要な要件を減らし、発生する問題を軽減する方法を知ることができるように、いくつかの例を通して CSS のヒントを示します。

ヒント 1

CSS を記述するときは、できるだけツリーの先頭に戻りたいと考えます。つまり、:root に戻ります。

たとえば、私たちのウェブサイトにはサイドバーがあり、このサイドバーに短い個人的な紹介を追加したいと考えています。 HTML の構造は次のようになります:

<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; がすでに .Posts に設定されていることがわかります。ページ全体が同じ行の高さを使用しているようです。その後、.Bio と .Posts の行の高さをルート要素に移動できます:

:root {
    line-height: 1.5;
}

ログイン後にコピー

これは CSS の常識のようですが、彼もお金を払いません同じことを定義する兄弟要素に注目してください。これにより、一部のコードが重複していることを見つけることもできます。実際、コードのリファクタリングに少し時間を費やすだけなので、これはそれほどひどいことではありませんが、これにより CSS コード処理の健全性が維持されます。

CSS で知らないヒント

葉ではなく木の枝にスタイルを書きます

ヒント 2

スタイルは常に属性の特定の組み合わせとして表示されます

良い例は、色と背景色の組み合わせです。小さな調整だけを行う場合を除き、すべてをまとめて調整する必要があります。要素に背景色を追加する場合、要素にはテキストが含まれない場合がありますが、いくつかの子要素が含まれる場合があります。したがって、前景色と背景色を一緒に設定することで、これらの要素が読みやすさやコントラストの問題に遭遇しないことを常に保証できます。次回背景色を変更するときは、テキストの色がすべてグループとして表示されるため、変更するテキストの色を探し回る必要はありません。

CSS で知らないヒント

ヒント 3

currentColor や em などの動的な値を使用します

テキストの色は他の属性でも使用される場合があります。たとえば、枠線、ボックスシャドウ、塗りつぶしの SVG アイコンなどです。同じ色を定義する代わりに、currentColor を直接使用することもできます。デフォルトでは、色は継承可能であり、他のプロパティの色を変更するには 1 か所を変更するだけで済みます。

同様に、font-size 属性に em 単位を使用すると、:root の font-size を変更するだけで要素のボックスモデルサイズを変更できます。

これについて詳しくは、「文字列を使用したスタイルの設定 (STRINGS)」の記事を参照してください。

CSS で知らないヒント

ヒント 4

inherit 属性値を使用して親要素のスタイルを継承し、UA 独自のスタイルをオーバーライドします。

ボタンや入力などのフォームコントロールの場合、ブラウザーごとに独自のスタイル (UA スタイル) があります。継承を使用して親要素のスタイルを継承することで、ブラウザの UA スタイルをオーバーライドできます。

button,
input,
select,
textarea {
    color: inherit;
    font-family: inherit;
    font-style: inherit;
    font-weight: inherit;
}

ログイン後にコピー

上記のコード例は sanitize.css から取得したものです。 Normalize.css もこの方法で使用されます。このように使用しない場合、それは...

を持っていることを意味します

input[type="range"]、input[type="radio"]、input[type="checkbox"] などの要素で前に紹介した currentColor 属性を直接使用して、色を自動的に一致させることもできます。おそらく何も変更する必要はなく、明るい色を暗い色に変更することができます。

CSS で知らないヒント

まとめ

これらは良いものですが、もちろん全員に使用を強制するものではありません。これらのヒントはシンプルで実用的であり、Web サイトが最大限のメリットを得ることができるということをお伝えしたいと思います。 CSS プリプロセッサを使用する場合でも、コードの出力に影響を与えることはなく、いくつかの変数を節約できる場合もあります。

タキオンなどの単一クラス名にも適しています。おそらく、複雑さと必要なクラスも軽減されます。

もう 1 つの興味深い機能が登場します。CSS のプロパティ (CSS 変数) をカスタマイズすることもできます。プリプロセッサとは異なり、カスタムプロパティをオーバーライドする場合、現在の選択範囲にのみ影響します。つまり、ある意味、それらは「カスケード変数」です。