精簡CSS代碼

本文轉載自查看原文 2014-04-24 22:14 3003 CSS/ 精簡

精簡CSS代碼可以幫助減小樣式文件的大小，使代碼清晰，方便維護。

使用簡寫屬性及默認值

.header {
  margin-top: 10px;
  margin-right: 20px;
  margin-bottom: 30px;
  margin-left: 40px;
}

/* 可以使用簡寫屬性 margin */
.header {
  margin: 10px 20px 30px 40px; /* 4個值分別對應方向為 top right bottom left */
}

/* ========== 我是分割線 ========== */

.nav-list {
  font-style: italic;
  font-variant: small-caps;
  font-weight: bold;
  font-size: 14px;
  font-family: Georgia, Serif;
  line-height: 24px;
}

/* 可以使用簡寫屬性 font */
.nav-list {
  font: italic small-caps bold 14px/24px Georgia, Serif;
}

常用簡寫屬性包括 animation、background、border、font、margin、padding、transition...

使用簡寫的 font 屬性時如果不使用 icon 等關鍵字時至少要指定 font-size 和 font-family 屬性，並且 font-size 必須位於 font-family 之前，其他的屬性(如font-weight,font-style,font-variant)如未指定將自動使用默認值，並且必須位於 font-size 之前，line-height 必須位於 font-size 之后，並且和 font-size 用 “/” 分隔

省略了部分簡寫屬性值的時候，缺失的部分就會使用該屬性的默認值，

div {
  font: 14px Serif;
}
/* 相當於 */
div {
  font: normal normal normal 14px/normal Serif; /* 1 */
}

/**
 * 1.此處缺失的 font-style/font-variant/font-weight/line-height 
 * 都會被解析為默認值 normal,該默認值甚至會覆蓋繼承的值
 * 這和下面的分開申明是有區別的
 * 下面代碼的 font-style/font-variant/font-weight/line-height 並沒有申明，
 * 則會繼承自父元素，也就是 inherit
 */
div {
  font-family: Serif;
  font-size: 14px;
}

如果對簡寫屬性使用 !important，會將該簡寫屬性下的所有子屬性全部設置為重要。

可以指定不帶顏色的邊框實現變化效果

a {
  border: 1px solid;  /* 邊框顏色默認和字體顏色一樣 */
  color: red;
}

a:hover {
  color: green;  /* 字體顏色變化了，邊框顏色也會跟着變化 */
}

過渡效果可以精簡到只需要指定一個持續時間就可以了

transition: 0.4s;    /* transition-duration 不指定的話默認為 0s，那就沒有效果了 */
/* 相當於 */
transition: all 0.4s ease 0s;

background-position 的默認值為 0% 0%，

background-position: 0% 0%;

在使用簡寫 background 屬性的時候可以省略，如果只省略其中一個，那么省略掉的那一個會變成 50%/center，

background-position: 0%;

/* 相當於 */
background-position: 0% 50%;

有幾個例外的簡寫屬性省略了的部分並不會使用默認值，而是從已有的值復制（可以這么理解），

比如包括 border-color, border-style, border-width, border-radius, margin, padding...

這些屬性的特點是一個屬性通常有4個值分別對應4個不同的方向，

border-width: 1px; /* => */ border-width: 1px 1px 1px 1px; /* 復制3次 */
margin: 10px 20px; /* => */ margin: 10px 20px 10px 20px; /* 復制1次 */
padding: 10px 20px 30px; /* => */ padding: 10px 20px 30px 20px; /* 復制中間那個放在最后 */

還有就是有些用戶代理（瀏覽器）樣式表已經定義過的樣式，同時在所有現代瀏覽器中都表現一致的話，沒有必要再定義了，

div {
  display: block; /* 根本沒有意義 */
}

結論：有些屬性如果你期望的值與默認值或者用戶代理樣式表指定的值是一致的，那么就可以省去不寫，避免重復。

合理利用繼承

通常情況下，指定了樣式的元素的后代會自動繼承某些樣式屬性，比如 color

.content h1,
.content div,
.content p,
.content ul,
.content li {
  color: #666;
}

/* 這樣更簡單 */
.content {
  color: #666;
}

注意，有些元素會帶有瀏覽器默認樣式，比如 h1 的 font-size，該默認樣式會覆蓋掉繼承值

常用可繼承屬性包括 color, font, text-align, text-indent...

也可以強制指定一個不能繼承的屬性實現繼承效果，

div {
  padding: inherit; /* 它自己繼承了，但是它的后代依然是不能繼承的 */
}

相對的，也可以強制指定一個應該繼承的屬性不繼承，

div {
  font-size: initial; /* 恢復為默認值 */
}

由於兼容的問題，這兩個值並不是很常用。

結論：如果一個值可以通過繼承得到，那就省去。

群組選擇器

h1 {color: blue;}
h2 {color: blue;}
h3 {color: blue;}
h4 {color: blue;}
h5 {color: blue;}
h6 {color: blue;}

/* 這樣更簡單 */
h1, h2, h3, h4, h5, h6 {color: blue;}

將具有很多相同樣式的選擇器群組在一起，可以有效地精簡代碼。比如這里定義了兩個不相關的東西，

.badge {
  background-color: orange;
  border-raidus: 5px;
  color: #fff;
  font-size: 13px;
}

中間還有很多其它樣式

.label {
  background-color: orange;
  border-raidus: 5px;
  color: #fff;
  font-size: 12px;
}

對比發現兩者有很多相同的樣式，把相同的樣式群組后，

.badge,
.label {
  background-color: orange;
  border-raidus: 5px;
  color: #fff;
}

中間還有很多其它樣式

.badge {
  /* 只看這里的話看不出來該類還有其它樣式 */
  font-size: 13px;
}

中間還有很多其它樣式

.label {
  /* 只看這里的話看不出來該類還有其它樣式 */
  font-size: 12px;
}

這樣造成同一個組件的樣式散落在各處，維護會變得困難，使用 CSS 預處理器可以有效解決這個問題，比如 Sass 的 %占位符語法，幾乎就是為群組選擇器量身打造的，

%label {
  background-color: orange;
  border-raidus: 5px;
  color: #fff;
}

中間還有很多其它樣式

.badge {
  /* 在這里可以清晰地看出來該類還有其它樣式 */
  @extend %label;
  font-size: 13px;
}

中間還有很多其它樣式

.label {
  /* 在這里也可以清晰地看出來該類還有其它樣式 */
  @extend %label;
  font-size: 12px;
}

群組選擇器的時候需要注意不要將有瀏覽器兼容性的選擇器群組在一起，會造成不能識別而忽略整個規則集，以下代碼就不能群組在一起，

input::-webkit-input-placeholder {
  color: #999;
}

input::-moz-placeholder {
  color: #999;
  opacity: 1;
}

input:-ms-input-placeholder {
  color: #999;
}

十六進制RGB顏色值

如果每兩位都相等，則可以簡寫

color: #ff3300;

/* 可以簡化為，其代表的顏色是一樣的 */
color: #f30;

使用較短的具體數值代替較長的關鍵字

h2 {
  font-weight: 700;
}

p {
  font-weight: 400;
}

/* 相當於 */
h2 {
  font-weight: bold;
}

p {
  font-weight: normal;
}

數字 400 等價於 normal，而 700 等價於 bold。

簡化背景圖片路徑

背景圖片路徑可能會是這樣，

background-image: url("../../images/bg.gif");

背景圖片和CSS文件分這么開起什么作用呢？兩者本來就是密切相關的，所以應該把背景圖片文件夾和CSS文件放在同一目錄下，那路徑就會變成這樣

background-image: url("images/bg.gif");

簡單多了，甚至圖片文件夾根本沒必要命名為復數形式，如果路徑中沒有空格或者一些特殊符號，引號也可以去掉，

background-image: url(img/bg.gif);

再進一步，用一個字母來命名圖片文件夾，

background-image: url(i/bg.gif);

雖然文件夾的名字已經沒有什么語義了，但是，通常在這個目錄下常用的也就兩個文件夾而已，一個圖片文件夾，一個字體文件夾，還有可能會有一個放置其它文件的文件夾，對於背景圖片相對較多的情況來說這種方式可以減少相當可觀的代碼字節量。

可以在 Sass 中把路徑保存為一個變量以方便任意切換，

$bg-path: "../images" !default;
...
background-image: url(#{bg-path}/bg.gif);

去掉 0 值的單位

margin: 0px;

/* 為0的值帶不帶單位都是0 */
margin: 0;

Firefox暫時不支持去掉為0的時間值的單位，也就是說

transition: color 0.5s linear 0; /* 當前 Firefox(28.0) 會忽略這條屬性 */

與其這樣，不如干脆就不指定這類值，通常情況下默認的值就是 0秒

transition: color 0.5s linear; /* 完事 */

去掉浮點數兩端的0

div {
  background-color: rgba(0,0,0,0.3);
  opacity: 0.9
}

對於不透明度，去掉小數點前面的0也可以很好的理解，因為它不會大於1

div {
  background-color: rgba(0,0,0,.3);
  opacity: .9;
}

不過對於其它可能大於1的浮點值來說，也許會讓其他人以為你是忘記了小數點前面的數，

transition: all .5s;

去掉ID選擇器前面的限定符

ID本來就是唯一的，在前面加上元素限定和祖先元素通常情況下都是沒有意義的，

.container div#box { }

/* 精簡后 */
#box { }

下面的內容多多少少有點喜新厭舊的意思了

去掉老舊瀏覽器兼容代碼

body {
  text-align: center;
}

.container {
  margin: 0 auto;
  text-align: left;
  width: 960px;
}

/* 上面的代碼是為了實現怪異模式下的 IE 以及 IE5.x 的塊元素居中效果 */
.container {
  margin: 0 auto;
  width: 960px;
}

請始終使用標准模式，如今IE6/7/8 都要面臨淘汰了。

去掉多余的瀏覽器前綴

還在你的CSS代碼中寫一大堆瀏覽器廠商前綴嗎？那你就out了！

.header {
  -webkit-border-radius: 5px;
     -moz-border-radius: 5px; /* 1 */
      -ms-border-radius: 5px; /* 2 */
       -o-border-radius: 5px; /* 3 */
          border-radius: 5px;
}

/**
 * 1.新版本的 Firefox 已經不再支持 -moz-border-radius 屬性，
 *   同時，從 Firefox 4.0 就開始支持標准的 border-radius 寫法了。
 * 2.IE 9+ 支持標准的 border-radius 寫法，IE 8 及更低版本什么寫法都不支持。
 * 3.Opera 10.50+ 支持標准的 border-radius 寫法
 * 換芯后的 Opera 同時還支持 -webkit-border-radius 寫法
 */
.header {
  -webkit-border-radius: 5px;
          border-radius: 5px;
}
/* 更進一步 */
.header {
  border-radius: 5px; /* 4 */
}

/**
 * 4.另外 Android 2.1+, iOS 4.0+, Safari 5+ 均支持標准 border-radius 寫法
 */

可以使用 Sass 定義一個 Mixin 來完成這件事情，

@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
          border-radius: $radius;
}

.header {
  @include border-radius(5px);
}

用 Less 同樣，

.border-radius(@radius) {
  -webkit-border-radius: @radius;
          border-radius: @radius;
}

.header {
  .border-radius(5px);
}

將常用的 CSS3 屬性全部封裝成 Mixin，既可以減少代碼量，也可以很好地控制哪些瀏覽器前綴應該去掉，而哪些應該保留，當某個前綴不再需要的時候可以很輕松地刪掉，更多資料請參考 http://css3please.com/，在這里你可以更清楚地看到某個屬性需要哪些瀏覽器廠商前綴，也可以參考使用以下項目，都有很成熟的 Mixins 供使用，

Sass 相關

Less 相關

Perkins

還有，就是壓縮代碼了！關於代碼壓縮的內容，就不在這里說了！

參考資料：

http://www.w3school.com.cn/css/index.asp
http://caniuse.com/
http://css3please.com/
Smashing CSS: Professional Techniques for Modern Layout, by Eric A. Meyer
Pro CSS for High Traffic Websites, by Antony Kennedy & Inayaili de león

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 Web前端開發最佳實踐（9）：CSS代碼太太亂，重復代碼太多？你需要精簡CSS代碼 CSS精簡工具——除去多余的css樣式精簡的網站reset 和 css通用樣式庫談前端代碼的精簡、混淆、壓縮和編譯 WCF 使用動態代理精簡代碼架構 (WCF動態調用) 當模板方法遇到了委托函數，你的代碼又可以精簡了 Java規范代碼風格(阿里開發規范精簡) CSS代碼縮寫 css基礎示例代碼 CSS常用代碼大全