CSS重複的規則，最佳實踐

假設我有HTML這樣的，我用的少：CSS重複的規則，最佳實踐

<div class="one"> 
    <p class="a"></p> 
    <p class="b"></p> 
</div> 
<div class="two"> 
    <p class="a"></p> 
    <p class="c"></p> 
</div>

而且我要的風格段落「A」級與紅色，「B」顏色藍色和「c 「顏色爲黃色。所以，我有以下幾點：

.one, .two { 
    .a { color: red; } 
    .b { color: blue; } 
    .c { color: yellow; } 
}

而且我知道，因爲它也可以寫成：

.one { 
    .a { color: red; } 
    .b { color: blue; } 
} 

.two { 
    .a { color: red; } 
    .c { color: yellow; } 
}

我知道我的例子是有點欠缺，但我的問題是，什麼是之間的區別二？第二個例子有點長，但沒有定義不應該屬於的規則。

所以我的問題是什麼，是把一些沒有意義節省一些線（像我就是這樣做的第一個例子）規則的缺點？它會產生更多的規則，讓它變慢等。

來源

2013-07-05 maru

爲什麼不簡單：

.a { color: red; } 
.b { color: blue; } 
.c { color: yellow; }

這兩個之間的區別是第一個涵蓋了所有六種類型：

.one .a, .one .b, .one .c, .two .a, .two .b, .two .c

雖然第二個只涵蓋4：

.one .a, .one .b, .two .a, .two .c

關於你的標記 - 沒有任何區別，exc EPT正好是第一的情況下（不.one和.two）將sliiiiiightly更快。

此外，請參閱this。

來源

2013-07-05 13:58:26 mishik

需要有大約40多個我在咯！很好的答案，但。除非需要，否則不要具體說明。 –

我知道在這種情況下類「一」和「二」是不必要的，但我們假設他們在那裏是爲了特異性。我知道第二個涵蓋的案例較少，不包括不必要的案例。所以我的問題是，哪一個更好？第一個是較短的，但將它產生不必要的規則和在任何情況下是慢？另外，這些例子只是爲了解釋，而我正在詢問如果指定了父類，則不會生成不必要的規則。謝謝。 – maru

在這種情況下，第一個更有意義。這些在渲染速度方面完全相同，但第一個更容易維護。 – mishik

除非用於樣式層次的原因，這是簡單的只寫：

.a { color: red; } 
    .b { color: blue; } 
    .c { color: yellow; }

來源

2013-07-05 14:06:06

CSS重複的規則，最佳實踐

回答

相關問題