3202年了，如何寫出優雅的CSS
3202年了，估計已經沒有人手寫 CSS 了吧。的確，自從有了框架、UI 庫，需要動手寫 CSS 的機會變少了。但是，不代表不需要更好、更優的程式碼了。作為一個老前端（切圖佬），看著現在的 CSS 就頭大。
那有什麼方法能讓我們寫出更優雅的 CSS 呢？
優雅第一原則：能不寫就不寫 css！
優先使用預設樣式
每個 UI 庫都有各自的佈局標籤/方法。如 Bootstrap 的 row class / col class， element UI 的 el-row、el-col：
```html
而這樣做還有另一個好處，就是在一個 UI 框架內的程式碼，更利於團隊成員以及後續的維護者閱讀，他只需要讀懂 UI 庫文件即可。
熟練使用 html5 標籤
好的 html 框架就是前端程式碼成功的一半。如果 html 標籤寫得好，除了減少滿屏遠古時代的 table / 現在的 div。隨著 IE 的退出，現在用這些 html5 標籤不再有障礙。
把 w3school 、MDN的教程通讀一遍，你就能發現很多原生 html 攜帶了很多樣式、互動，能大量減少你的工作。
如媒體標籤、進度條標籤、詳情摘要標籤
```html
HTML 5
This document teaches you everything you have to learn about HTML 5.```
詳情與摘要標籤
HTML 5
This document teaches you everything you have to learn about HTML 5.更令人驚喜的是，還有帶遮罩背景的對話 Dialog 標籤。css3 更有針對彈窗的偽類 :model，可以為當前開啟的彈窗設定樣式。
```html
```
熟練使用這些標籤，能讓你輕鬆獲得你想要的樣式、互動，你只需要稍作修改，就能完成一個很成熟的元件。
另外掌握這些預設標籤，還可以在你老闆、客戶需要一個 demo 的時候，效率加倍，快速出活。留下更多的時間摸魚，何樂而不為呢？
多使用 CSS 偽類
CSS 也會有更多新偽類，讓你更好的控制頁面的內容。
:is 篩選、合併元素
```css ol ol ul, ol ul ul, ul ol ul, ul ul ul { list-style-type: square; }
/ :is 簡化 / :is(ol, ul) :is(ol, ul) ul { list-style-type: square; } ```
:which 不提升優先順序的情況下，實現:is
/* 優先順序為 2 */
:is(header, main, footer) p:hover {
color: red;
cursor: pointer;
}
/* 優先順序為 2*/
:where(header, main, footer) p:hover {
color: red;
cursor: pointer;
}
:has 當前元素是否有（子/兄弟元素）
```html
正標題
正文內容要離標題遠遠的
正標題
副標題要挨近標題
正文內容要離標題遠遠的
根據是否有副標題決定正標題的間距css
h1.has-h2 {
margin: 0 0 0.25rem 0;
}
如果是動態內容，還需要使用 js 通過 if/else 語句新增 class。但是如果使用:has，將樣式控制交回給了 css, 即使是動態生成的內容，也無需一行 js。css
h1:has(+ h2) {
margin: 0 0 0.25rem 0;
}
```
目前 CSS 的偽類已經 60 多個了，大家有空可以去 MDN CSS 看看。
當然這些新 CSS 的屬性，使用前需要對相容性做一下了解，詳細可以去 can i use 檢視
多用繼承
css 繼承的屬性有字型、顏色等。每次寫完上一層的 css 後，可以先看看效果，如果不需要寫了，可以不用再寫程式碼。
css
body {
font-size: 12px;
}
p {
font-size: 12px; // 字型繼承 body，無需再寫
}
另外也可以通過設定屬性值為 inherit 來顯式繼承父元素的屬性, 減少一些重複的值。例如一個表格，可以通過 inherit 將標題頭的邊線與表格統一。
css
table {
border: 1px solid #ccc;
}
table th {
border-bottom: inherit;
}
使用 CSS 變數
我們的樣式並不總是從父元素繼承過來，還應該可以更靈活的使用。這個時候就可以使用變數來實現了。
``` --color-red: #cc332e
body { background: var(--color-red); } .box { background: #fff; } .box .title { color: var(--color-red); } ``` 另外，在 UI 框架中，也有大量的 CSS 變數。如果你想保持你的內容跟隨主題一致，也可以使用這些框架自帶的變數。
題外話：
CSS 對變數的支援，讓 Stylus、Sass、Less 的吸引力已經減弱了不少，未來如果 CSS 再增加巢狀語法（已在提案中），估計第三方工具會更少人用。
其他
一個圖層僅寫一個佈局
佈局常常要在父節點寫，然後再子節點寫了，不太可能在同一個父節點寫兩種佈局。但是在上一佈局的子節點同時也是下一個佈局的父節點，就會讓人混亂了。
```css
.parent { display: flex; } / 錯誤示範 / .child { flex: 1 1 auto; position: absolute; } .child .subChild { position: relative; }
/ 正確示範 / .child { flex: 1 1 auto; position: absolute; } .child .subChild { position: relative; } ```
另外，position fixed static relative absolutely
按一定的順序地寫 css
按一定的順序書寫 CSS，更有利於查詢程式碼，也不容易出錯。比如，在較多樣式的類中，多次重複寫了某個屬性。
至於什麼順序，沒有定論。我們可以參考盒子模型，從外到內設定排列：
- background
- box-sizing
- 佈局
- margin
- border
- padding
- width/height
- font/text
還有個別大公司會使用 style lint 來規範此順序。
一開始可能你會不喜歡這樣寫。但是當你養成習慣之後，就會發現這樣越來越順手了。
總結
記住，優雅第一要義：“能不寫就不寫 CSS”
- 優先使用預設樣式
- 熟練使用 html5 標籤
- 多使用 CSS 偽類，is、has、which
- 多用繼承
- 使用 CSS 變數
另外按一定的規則書寫 CSS，也能更優雅
- 一個圖層僅寫一個佈局
- 按一定的順序地寫 css
3202年，希望大家都能寫出更好看更優雅的 CSS！祝好！