css合併減少重複程式碼簡單例項

antzone發表於2017-03-13
CSS單例

合併具有相同作用的css程式碼可以有效的節省程式碼量，下面就通過簡單的程式碼例項演示一下一個節省程式碼量的方式。

程式碼如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type = "text/css"> 
.a{
  width:150px;
  height:50px;
  background:red;
  font-size:12px;  text-align:center;
}
.b{
  width:150px;
  height:100px;
  background:blue;
  font-size:12px;
  text-align:center;
}
</style> 
</head> 
<body> 
<div class="a">螞蟻部落一</div>
<div class="b">螞蟻部落二</div>
</body> 
</html>

上面的程式碼雖然實現了相應的功能，但是程式碼比較榮譽，程式碼精簡如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type = "text/css"> 
.a,.b{
  width:150px;
  font-size:12px;
  text-align:center;
}
.a{
  height:50px;
  background:red;
}
.b{
  height:100px;
  background:blue;
}
</style> 
</head> 
<body> 
<div class="a">螞蟻部落一</div>
<div class="b">螞蟻部落二</div>
</body> 
</html>

上面的程式碼使用選擇器分組方式實現了相同程式碼合併效果。

相關文章