3202年了,如何写出优雅的CSS

语言: CN / TW / HK

3202年了,估计已经没有人手写 CSS 了吧。的确,自从有了框架、UI 库,需要动手写 CSS 的机会变少了。但是,不代表不需要更好、更优的代码了。作为一个老前端(切图佬),看着现在的 CSS 就头大。

那有什么方法能让我们写出更优雅的 CSS 呢?

优雅第一原则:能不写就不写 css!

优先使用默认样式

每个 UI 库都有各自的布局标签/方法。如 Bootstrap 的 row class / col class, element UI 的 el-row、el-col:

```html

Column
Column
Column

``` 这些布局方法都大同小异。学习了栅格化布局系统(Grid System)知识之后,再花上几分钟了解 UI 库的方法,就能大大减少自己手写代码的必要了。

而这样做还有另一个好处,就是在一个 UI 框架内的代码,更利于团队成员以及后续的维护者阅读,他只需要读懂 UI 库文档即可。

熟练使用 html5 标签

好的 html 框架就是前端代码成功的一半。如果 html 标签写得好,除了减少满屏远古时代的 table / 现在的 div。随着 IE 的退出,现在用这些 html5 标签不再有障碍。

w3schoolMDN的教程通读一遍,你就能发现很多原生 html 携带了很多样式、交互,能大量减少你的工作。

如媒体标签、进度条标签、详情摘要标签

```html

HTML 5 This document teaches you everything you have to learn about HTML 5.

```

截屏2023-02-14 上午12.05.35.png

详情与摘要标签

HTML 5 This document teaches you everything you have to learn about HTML 5.

更令人惊喜的是,还有带遮罩背景的对话 Dialog 标签。css3 更有针对弹窗的伪类 :model,可以为当前打开的弹窗设置样式。

```html


这是打开的对话窗口

```

Dialog 标签生成一个居中的弹窗

熟练使用这些标签,能让你轻松获得你想要的样式、交互,你只需要稍作修改,就能完成一个很成熟的组件。

另外掌握这些默认标签,还可以在你老板、客户需要一个 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!祝好!