CSS格式的優缺點

我知道四種CSS格式。你認爲哪個更好？

A）經典

.class1 { 
} 
.class1 .class2 { 
} 
.class1 .class2 .class3 { 
} 
.classFoo { 
}

B）經典idented

.class1 { 
} 
    .class1 .class2 { 
    } 
     .class1 .class2 .class3 { 
     } 
.classFoo { 
}

C）相同的線

.class1 {} 
.class1 .class2 {} 
.class1 .class2 .class3 {} 
.classFoo {}

d）同一行idented

.class1 {} 
    .class1 .class2 {} 
     .class1 .class2 .class3 {} 
.classFoo {}

來源

2010-08-20 Topera

老實說，我不認爲它使你用什麼風格的差異，只要你使用它一貫和這是與其他人誰就有可能在根據和同一項目與您合作協議根據您的工作場所/辦公室施加的任何特定文件要求。

說了這麼多，我的選擇是對的風格，與血統大致組團：

.className { 
    width: 50%; 
    background-color: #fff; 
    /* ...etc... */ 
} 

.className .descendantOne { 
    /* ...stuff... */ 
} 

.className .descendantTwo { 
    /* ...stuff... */ 
} 

.anotherClassName { 
    /* ...stuff... */ 
}

說了這麼多，其他人有其他的，有效的，喜好。

很顯然，對於生產代碼來說，爲縮小代碼提供服務會更有效率，因此單行格式更接近我在開發完成後使用的格式。

來源

2010-08-20 18:15:03

+1表示一致性 – 2010-08-20 18:21:58

一個巨大的樣式，B，因爲它更容易，因爲所有互聯的導航。（使用像SASS這樣的東西加強了這一點）。

對於一個非常小的一個，A

C和d我不會推薦，因爲它是難以閱讀/操作的屬性和值。我認爲唯一的例子是如果你急於修復某些東西而不關心縮進，否則我不會看到任何好處。

當然對於生產你可以選擇最小化版本，所以我的意見反映了正在編輯的意見。

來源

2010-08-20 18:14:47

如果是由sass或更少生成的css，通常只能看到縮進。如果你不使用sass（如果可以的話，你應該這樣做），這基本上是a vs c的問題。當你只有一個規則的設置時，c是有意義的，當你擁有更多的規則時，這是有意義的。

來源

2010-08-20 18:16:07

優點：

：

很容易瀏覽和查找性能迅速
更容易重新定位元素

缺點，當明白

較大的文件大小（由於額外的選項卡/空格），其依次加載速度較慢

其他人可能不熟悉您的格式（但我不會擔心太多）

來源

2010-08-20 18:21:29 alexy13

優點和交叉類型？ A，B，C或D？ – Topera 2010-08-20 18:26:45

以上全部。 – alexy13 2010-08-20 18:54:46

CSS格式的優缺點

回答

相關問題