CSS ウェイトをより使いやすくするためのヒント-CSSチュートリアル-php.cn

CSS ウェイトをより使いやすくするためのヒント

青灯夜游

リリース： 2018-09-07 16:49:05

オリジナル

1945 人が閲覧しました

この記事では、いくつかの例を通して CSS のヒントをいくつか紹介します。これにより、CSS カスケードを使用してより使いやすくなり、不要な要件を減らし、それによって重みの問題も軽減する方法を知ることができます。

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

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

ヒント 2: currentColor や em などの動的な値を使用します。

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

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

ヒント 3: 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 プロパティは、色を自動的に照合します。おそらく何も変更する必要はなく、明るい色を暗い色に変更することができます。

ヒント 4: 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 ウェイトをより使いやすくするためのヒント