F2E 前端工程文件

Appearance

CSS Performance - 縮寫表示法 ​

在 CSS 中，某些屬性可以使用縮寫形式來簡化程式碼，大多數的縮寫屬性通常是多個相關屬性的組合。好處如下：

  1. 簡化程式碼: 使用縮寫形式可以減少程式碼的冗長，讓樣式表更簡潔易讀。
  2. 提升可讀性: 讓程式碼更直觀，開發者能快速理解屬性值的含義。
  3. 減少錯誤: 可以避免因多餘的單位導致的語法錯誤。
  4. 減少檔案大小: 能減少 CSS 檔案的字元數量，對於大型專案或需要優化載入速度的情況尤為重要。

margin 邊界、外距 ​

縮寫形式可同時設定元素的外距。

css
margin: 10px /* 全部 */
margin: 10px 20px /* 上下、左右 */
margin: 10px 20px 30px /* 上、左右、下 */
margin: 10px 20px 30px 40px; /* 上、右、下、左 */

小提醒

若對於 margin 屬性不熟悉，可以回顧 元素尺寸 這篇文章。

padding 內距 ​

與 margin 類似，用於設定元素的內距。

css
padding: 10px /* 全部 */
padding: 10px 20px /* 上下、左右 */
padding: 10px 20px 30px /* 上、左右、下 */
padding: 10px 20px 30px 40px; /* 上、右、下、左 */

小提醒

若對於 padding 屬性不熟悉，可以回顧 元素尺寸 這篇文章。

background 背景 ​

縮寫形式可設定背景顏色、圖片、位置、重複方式等。以下程式碼包含屬性為：色彩、影像、重複、位置、尺寸。

css
background: #fff url("image.jpg") no-repeat center/cover;

小提醒

若對於 background 屬性不熟悉，可以回顧 視覺 這篇文章。

list-style 清單 ​

縮寫形式可設定列表樣式，包括類型、位置和影像。

css
list-style: square inside url('icon.png');

小提醒

若對於 list-style 屬性不熟悉，可以回顧 清單 這篇文章。

font 文字 ​

縮寫形式可設定文字相關屬性，包括文字、行距、字型等。以下程式碼包含屬性為：斜體、粗體、尺寸/行距、字型。

css
font: italic bold 16px/1.5 "Arial", sans-serif;

小提醒

若對於 font 屬性不熟悉，可以回顧 文字與字體 這篇文章。

border 邊框 ​

縮寫形式可同時設定邊框的樣式、粗細和色彩。

css
border: solid 2px #000; /* 樣式、粗細、色彩 */

小提醒

若對於 border 屬性不熟悉，可以回顧 視覺 這篇文章。

border-radius 圓角 ​

縮寫形式可設定元素的圓角。

css
border-radius: 10px; /* 全部 */
border-radius: 10px 0; /* 左上右下、右上左下 */
border-radius: 10px 0 20px; /* 左上、右上左下、右下 */
border-radius: 10px 20px 30px 40px; /* 左上、右上、右下、左下 */

小提醒

若對於 border-radius 屬性不熟悉，可以回顧 視覺 這篇文章。

transition 轉場 ​

transition 是 CSS3 引入的屬性，能讓元素在屬性值改變時，產生自動且平滑的動畫過渡效果。這種效果常用於滑鼠滑入 :hover、按下不放 :active、焦點 :focus 等互動狀態，讓網頁更具現代感與動態性。

css
transition: all .3s ease-in 1s; /* 屬性 執行時間 速度曲線 延遲時間 */
transition: width 0.5s ease, background 0.5s; /* 對多個屬性設定不同的動畫時間與曲線 */

注意

  • 並非所有 CSS 屬性都能使用 transition，例如 display 屬性就無法進行轉場。
  • 若未指定轉場屬性，預設為 all，但建議明確指定以提升效能。

小提醒

若對於 transition 不熟悉，可以回顧 轉場 這篇文章。

animation 動畫 ​

可以使用 animation 屬性一次設定所有動畫屬性。

css
animation: slideIn 2s ease-in-out 1s infinite alternate forward running; /* 名稱、持續時間、緩動函數、延遲、重複次數、方向、填充模式、播放狀態 */

color 色彩、顏色 ​

色彩可以使用縮寫形式來簡化程式碼。

css
/* 完整形式 */
color: #ffcc00;

/* 縮寫形式 */
color: #fc0;

注意

縮寫形式僅適用於六位數字碼中每兩位數字相同的情況，例如：

  • #ffffff → #fff
  • #000000 → #000
  • #aabb0c (無法縮寫)

小提醒

若對於 色彩表示法 不熟悉，可以回顧 色彩表示法 這篇文章。

unit 單位 ​

當值為 0 時，省略單位可以避免不必要的文字。

css
padding: 0;
margin: 0;

若行距無設定單位，預設為 em。

css
line-height: 1.5;

總結

CSS 縮寫雖然能簡化程式碼，但在使用時需要注意其限制，並根據需求選擇適合的表示方式。潛在的缺點如下：

  • 可讀性降低: 縮寫形式可能會讓初學者或不熟悉 CSS 的開發者難以理解。
  • 靈活性受限: 使用縮寫形式時，無法單獨設定某些屬性。
  • 容易出現意外效果: 縮寫形式可能導致意外的樣式覆蓋。
  • 維護困難: 在大型專案中，縮寫形式可能讓樣式的意圖不夠明確，導致後續維護時需要額外的時間來處理。

Copyright © 2025-Present