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！祝好！