0
我不知道有沒有通過瀏覽器在性能上的區別,如果你這樣的代碼:提高速度
<div class="css-1 css-2 css-3 css-4 css-5">
<div class="css-everything">
加載該網站更快,如果你把所有的東西在的CSS-的一切,而不是部分CSS類?
我不知道有沒有通過瀏覽器在性能上的區別,如果你這樣的代碼:提高速度
<div class="css-1 css-2 css-3 css-4 css-5">
<div class="css-everything">
加載該網站更快,如果你把所有的東西在的CSS-的一切,而不是部分CSS類?
其唯一的角度物質的條件,你說。沒有其他的。
例子:
考慮你有一個場景,如:
場景:1
CSS:
.button {
width:100px;
border-radius: 5px;
}
.blueBG {
background-color: blue;
}
.redBG {
background-color: red;
}
.left{
float: left;
margin-left: 10px;
}
.right {
float: right;
margin-right: 10px;
}
HTML:
<a href="stackoverflow.com" class="button red left">StackOverflow</a>
<p class="blue">Text with blue background</p>
<img class="left" src="image.jpg"></img>
現在想想,如果我在這裏使用一個代碼有點像這樣:
CSS:
.blueButtonLeft {
width:100px;
border-radius: 5px;
background-color: blue;
float: left;
margin-left: 10px;
}
.blueButtonRight {
width:100px;
border-radius: 5px;
background-color: blue;
float: right;
margin-right: 10px;
}
.redButtonLeft {
width:100px;
border-radius: 5px;
background-color: red;
float: left;
margin-left: 10px;
}
.redButtonRight {
width:100px;
border-radius: 5px;
background-color: red;
float: right;
margin-right: 10px;
}
HTML:
<a href="stackoverflow.com" class="blueButtonLeft">StackOverflow</a>
<!-- Need of defferent code for img and p -->
希望差別很明顯。不是嗎?
場景:2
我很抱歉,我需要一定都會回來熄滅了一段時間和更多的後來編輯。
我不認爲它的速度更快。我會更快,更好地把CSS代碼放在不同的CSS文件中。這將保持乾淨,當你需要改變一些東西,你可以搜索速度更快。只有在發展的時候 –
@KeesSonnema。當你真正部署站點你要的所有文件一起串聯,以減少HTTP請求的數量。 –
@Kees Sonnema:Yi Jiang是對的 - 這完全是關於保存HTTP請求。您還可以縮小CSS文件以使用更少的帶寬。但我真的不明白這個問題。 CSS-Classes與他們定義的地方沒有任何關係。 – feeela