2

誰かの CSS ファイルをレビューしていて、このビットに出会いました。彼は優れた CSS デザイナーなので、何かを言う前に、私がフォローしていないものがあるかどうかを確認したいと思いますか?

以下のスニペットでは、いくつかの属性を誤って再定義しているように見えます。つまり、href の hover およびアクティブ状態の text-decoration 属性と color 属性です。

.myClass
{
    display: inline-block;
    padding: 0 15px 10px 15px;
}

a.linkWhatsThis:link, 
a.linkWhatsThis:visited, 
a.linkWhatsThis:hover, 
a.linkWhatsThis:active {
    font-size:11px;
    color: #42382c;
    text-decoration: underline;
    line-height:16px;
}

a.linkWhatsThis:hover, 
a.linkWhatsThis:active {
    color: #990000;
    text-decoration: none;
}
4

4 に答える 4

3

それは、彼がそうでなければ次のいずれかを書く必要があるからです。あなたも同じことをします:

a.linkWhatsThis:link, 
a.linkWhatsThis:visited {
    font-size:11px;
    color: #42382c;
    text-decoration: underline;
    line-height:16px;
}

a.linkWhatsThis:hover, 
a.linkWhatsThis:active {
    color: #990000;
    text-decoration: none;
    font-size:11px;
    line-height:16px;
}

また

a.linkWhatsThis:link, 
a.linkWhatsThis:visited,
a.linkWhatsThis:hover, 
a.linkWhatsThis:active {
    font-size:11px;
    line-height:16px;
}

a.linkWhatsThis:link, 
a.linkWhatsThis:visited, {
    color: #42382c;
    text-decoration: underline;
}


a.linkWhatsThis:hover, 
a.linkWhatsThis:active {
    color: #990000;
    text-decoration: none;
}

そして彼は、自分のやり方の方が短く、きれいで、読みやすいと考えていました。

于 2012-08-27T16:07:15.337 に答える
3

重複とは考えないでください。オーバーライドと考えてください。彼は特定の状況でスタイリングをオーバーライドしているだけです。彼が書いた方法では、マークアップがわずかに少なくなっています。「複製」していないときは実際に長いところを以下に示します。

.myClass
{
    display: inline-block;
    padding: 0 15px 10px 15px;
}

a.linkWhatsThis:link, 
a.linkWhatsThis:visited, 
a.linkWhatsThis:hover, 
a.linkWhatsThis:active {
    font-size:11px;
    line-height:16px;
}

a.linkWhatsThis:link, 
a.linkWhatsThis:visited {
    color: #42382c;
    text-decoration: underline;
}

a.linkWhatsThis:hover, 
a.linkWhatsThis:active {
    color: #990000;
    text-decoration: none;
}
于 2012-08-27T16:08:30.567 に答える
3

それは彼が違いによってコーディングできるようにします。

最初に、リンク、訪問済み、ホバー、およびアクティブのスタイルを定義しますが、これらはほとんど互いに同じです。

次に、その下で、2 つの特定のケースでそれをオーバーライドします。

この方法でコードを短くすることができ、これら 4 つがほとんど同じであるという事実をコード内に反映することもできます (自己文書化)。

重複禁止ルールを適用すると、次のようになります。

a.linkWhatsThis:link, 
a.linkWhatsThis:visited, 
a.linkWhatsThis:hover, 
a.linkWhatsThis:active {
    font-size:11px;
    line-height:16px;
}

a.linkWhatsThis:link, 
a.linkWhatsThis:visited {
    color: #42382c;
    text-decoration: underline;
}
a.linkWhatsThis:hover, 
a.linkWhatsThis:active {
    color: #990000;
    text-decoration: none;
}

または次のように:

a.linkWhatsThis:link, 
a.linkWhatsThis:visited {
    font-size:11px;
    line-height:16px;
    color: #42382c;
    text-decoration: underline;
}
a.linkWhatsThis:hover, 
a.linkWhatsThis:active {
    font-size:11px;
    line-height:16px;
    color: #990000;
    text-decoration: none;
}

後者はルールを複製し、前者は簡潔でなく、自己文書化も少なくなります。彼のバージョンは、「...を除いてお互いにまったく同じ」と言っています。

于 2012-08-27T16:04:57.177 に答える
2

そうです、重複しています。それは、その CSS の作成者がスタイルをそのように照合することを選択したからです。色と行の高さは共有されているため、それぞれのケースをカバーするために、それか、より個別のルールを作成するかのいずれかです。どちらの方法でも重複があります-ルールまたはセレクターのいずれかです。重要なのは、最終的にどのルールが勝つかです。

于 2012-08-27T16:04:32.147 に答える