在圖解CSS系列的《CSS自定義屬性》一文中，對CSS的自定義屬性做過深入的闡述。愛掏網 - it200.com如果你閱讀過這篇文章，應該對CSS自定義屬性有所了解，也能體會到該特性的強大之處。愛掏網 - it200.com今天，CSS自定義屬性可以用于Web開發中的很多地方，能讓開發者變得更為便捷靈活，比如最近流行的Dark Mode開發。愛掏網 - it200.com而今天我們就來和大家聊聊CSS自定義屬性在組件開發中的運用。愛掏網 - it200.com
對于Web開發者而言，組件開發已經有很多種模式，從傳統的HTML和CSS模式到現代JavaScript框架（比如React，Vue）。愛掏網 - it200.com不管是哪一種方式，都離不開CSS，而且只是CSS的使用方式不同而以。愛掏網 - it200.com
如果你還在使用傳統的組件開發模式，可能你更趨向于將CSS放在一個獨立的.css文件中，并且將文件和組件放在一起：
而使用JavaScript框架開發時，可能會將CSS和模板都放在同一個.js（或.vue）文件中：
特別是使用React框架開發時，很多開發都都熱衷于CSS-in-JS的模式。愛掏網 - it200.com
不管是哪種方式，都有其利弊，這里不會和大家深聊他們之間的差異，主要和大家一起探討CSS自定義屬性如何使我們的工作流得到進一步的改善。愛掏網 - it200.com并且探討自定義屬性在React和Vue框架構建組件時怎么使用。愛掏網 - it200.com
很多Web開發者都這么認為：
事實上，在使用框架開發組件時，使用CSS自定義屬性有兩個主要原因：
- 人體工程學很好
- 它開啟了新的可能性，可以使用CSS自定義屬性做一些JavaScript做不到的事情
既然如此，那我們就開始吧。愛掏網 - it200.com
這里我們只是快速回顧CSS自定義屬性的基礎知識。愛掏網 - it200.com在使用CSS自定義屬性時，一般會在:root中先聲明CSS自定義屬性：
:root {
--color-text: black;
--color-background: lightgray;
--color-primary: rebeccapurple;
--gutter: 16px;
}
然后在需要使用的地方，通過var()函數來調用已聲明的自定義屬性，通過var()函數調用的自定義屬性會作為別的CSS屬性的值，比如：
.element {
color: var(--color-text);
margin-bottom: var(--gutter);
}
.primary {
color: var(--color-primary);
}
它們看上去就像屬性，事實上也是如此。愛掏網 - it200.com通過--前綴聲明的被稱為屬性，即CSS自定義屬性；被var()函數調用的自定義屬性（即--前綴聲明的自定義屬性）又被稱為是CSS的變量。愛掏網 - it200.com也可以說：
在CSS中，CSS自定義屬性可以像其他CSS屬性一樣，可以運用于任何HTML元素上。愛掏網 - it200.com也同樣遵從CSS的使用規則。愛掏網 - it200.com
我想你對CSS自定義屬性有一個基本的認識了，即使沒有也不必著急，接下來我將一步一步帶大家進入CSS自定義的事件。愛掏網 - it200.com
下面我將拿一個常見的組件為例，向大家介紹CSS自定義屬性在組件構建中的使用。愛掏網 - it200.com比如我們要構建下面這樣的一個卡片組件：
這個Demo并不復雜，上面示例也是我們傳統的一種做法，一看代碼便知道怎么回事。愛掏網 - it200.com接下來，我將會使用CSS自定義屬性來改造上面的卡片，為了節約時間，只將顏色部分換成CSS自定義屬性描述。愛掏網 - it200.com
正如上圖所示，簡單的分析卡片上各個元素使用到的顏色，大約有九個地方，共用了七種顏色，這樣一來，我們顯式的在:root中聲明七個有關于顏色的自定義屬性：
:root {
--primary-color: #ffffff; /* 主色 */
--body-bg-color: #f1f1f1; /* body背景顏色 */
--card-bg-color: var(--primary-color); /* card背景顏色 */
--card-box-shadow-color: #405070; /* card盒子陰影顏色 */
--btn-bg-color: #28c3f5; /* button背景顏色 */
--btn-color: var(--primary-color); /* button文本顏色 */
--paragraph-color: gray; /* 段落文本顏色 */
--card-object-bg-color: #eaeff8; /* card頂部背景顏色 */
--avatar-bg-color: var(--primary-color); /* 頭像背景顏色 */
--title-color: #101c34; /* 標題2文本顏色 */
}
注意，自定義屬性的名稱可以根據自己的喜好來定義，但建議使用具有語義化的名稱。愛掏網 - it200.com
這樣一來，我們上面的案例可以換成自定義屬性，并且在運用到顏色的屬性換成var()函數，引用已聲明的自定義屬性：
body {
background-color: var(--body-bg-color);
}
.card {
background: var(--card-bg-color);
box-shadow: 0px 1px 10px 1px var(--card-box-shadow-color);
}
.card__object {
background-color: var(--card-object-bg-color);
}
.card__avatar {
background-color: var(--avatar-bg-color);
}
.card__body {
background: var(--card-bg-color);
}
.card__body h4 {
color: var(--title-color);
}
.card__body p {
color: var(--paragraph-color);
}
.card__body .btn {
background: var(--btn-bg-color);
color: var(--btn-color);
}
.card__body .btn:hover {
color: var(--btn-bg-color);
}
你可能已經發現了，上面我們有的自定義屬性嵌套了另一個自定義屬性。愛掏網 - it200.com在CSS自定義屬性中，是不推薦這么用的。愛掏網 - it200.com正如上例所示，在用到#ffffff顏色的地方，統一使用一個自定義屬性，比如--primary-color。愛掏網 - it200.com
就上面而言，你或許還沒有發現CSS自定義的優勢。愛掏網 - it200.com下面這個示例，可以向你展示它的優勢。愛掏網 - it200.com我們在上例的基礎上，復制另一個卡片出來，但我們期望的主題色不一樣：
就上面的示例而言，我們沒有做太多的調整，只是將卡片放在不同的兩個容器中：
...
...
在.dark卡片上，只是調整重新定義一份自定義屬性的值：
.dark {
--color: #fff;
--primary-color: #1a1515;
--body-bg-color: #1a1818;
--card-box-shadow-color: #6a716e;
--btn-bg