縮寫 css 語法不但可以減少 css 檔案的大小，讓讀取速度加快，同時也更方便閱讀。會想寫這篇文章是因為以前有跟朋友介紹過 CSS 整形與優化工具，怕大家優化後也不清楚到底有什麼更動？或者是怕 css 出問題而不敢優化，所以在這邊我整理了幾個基本的 css 縮寫給大家，希望以後大家在寫 css 時能更瞭解他的原理。

CSS 語法縮寫 – 顏色

使用 16 進制的色碼，假設這6個數字裡頭每2個數字相同，就可以進行縮寫。舉例如下：

• #000000 → #000
• #880000 → #800
• #aabbcc → #abc

參考上述情況可以了解，一定要是相鄰的文字一樣才能縮寫唷！

CSS 語法縮寫 – 區塊邊界

這邊我們最常應用的就是 margin 以及 padding 兩個屬性。根據自定邊界位置的不同，由簡入繁總共有四種寫法：

• margin: 1px; (所有邊界都是 1px)
• margin: 3px 4px; (上&下邊界是 3px，左&右邊界是 4px)
• margin: 3px 1px 4px; (上邊界是 3px，左&右邊界是 1px，下邊界是 4px)
• margin: 3px 4px 1px 2px; (上邊界 3px，右邊界 4px，下邊界 1px，左邊界 2px)

透過這個原理我們可以發現到，「上下」為一組，「左右」為一組。所以如果邊界剛好是同樣的單位可以將他們合併起來，但要特別注意的是，如果你的上&下邊界相同，左&右不相同，還是請乖乖寫四次吧！至於這四次的位置擺放要如何快速記憶呢？請大家把它想成一個順時針的循環，剛好就是上右下左。

CSS 語法縮寫 – 0

正統的 css 語法裡頭，所有的單位都不能省略，因為 css 不只一個單位，有px、pt、em、%…等等。但是 0 這個數字非常的奇妙，只有 0 後面可以不用加任何單位，因為寫不寫都沒影響。

只是有時候因為習慣問題，有的人還是會順手在 0 後面加單位，如果次數一多，也會佔幾 kb，既然我們目的就是要縮減 css 語法，所以還是建議大家不加單位。

CSS 語法縮寫 – 同屬性

只要是同個屬性都可以加他們的語法合併在一起，像是 border (邊框)、 background (背景)、 list (項目)

border 的合併

合併後為： border: 1px solid #000;

background 的合併

合併後為： background: #fff url("images/muki.gif") no-repeat fixed top left;

因為 background 的屬性很多，所以我強烈推薦要將他們做合併，否則你要設定多個背景會拖得很長。而合併後有的屬性也可以省略不打，省略的屬性會採系統默認值。

background 默認值如下：

• image: none
• repeat: repeat
• attachment: scroll
• position: 0% 0%
• color: transparent

list 的合併

合併後：list-style: square inside url("images/muki.gif");

這邊列舉三個同屬性的合併，假設下次你碰到有類似的同屬性狀況，就可以嘗試將他們做合併喔^^

小結

以上都是基本的 css 縮寫，我想大家最常用到的也是這幾個語法，所以應該是夠大家使用了!!

其實把握一個重點，就是「同屬性的幾乎都可以進行縮寫」，多加嘗試就會找到更多的縮寫樂趣唷~

更多 CSS 相關文章

如何讓使用 CDN 的 Tailwind CSS 也能在 VS Code 啟用 Tailwind CSS Intellisense 套件

2023-12-06

如何讓使用 CDN 的 Tailwind CSS 也能在 VS Code 啟用 Tailwind CSS Intellisense 套件

HTML/CSS

vw 進化了！更好用的 CSS 自適應字體大小

2023-10-13

vw 進化了！更好用的 CSS 自適應字體大小

HTML/CSS

CSS 表單樣式分享：Material UI 的 Label 標籤浮動縮放

2023-09-13

CSS 表單樣式分享：Material UI 的 Label 標籤浮動縮放

HTML/CSS

透過 img object-fit 屬性取代 CSS 的 background 語法，輕鬆實現圖片背景的效果

2023-06-26

透過 img object-fit 屬性取代 CSS 的 background 語法，輕鬆實現圖片背景的效果

HTML/CSS

用 CSS 製作垂直滾動的跑馬燈

2023-04-13

用 CSS 製作垂直滾動的跑馬燈

HTML/CSS

整合 TailwindCSS 與 Element Plus 的 CSS class 變數

2022-11-22

整合 TailwindCSS 與 Element Plus 的 CSS class 變數

HTML/CSS