likes
comments
collection
share

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

作者站长头像
站长
· 阅读数 65

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

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

优雅第一原则：能不写就不写 css！

优先使用默认样式

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

<div class="container text-center">
  <div class="row">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

<el-row>
  <el-col :span="12">
    <div class="grid-content bg-purple"></div>
  </el-col>
  <el-col :span="12">
    <div class="grid-content bg-purple-light"></div>
  </el-col>
</el-row>

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

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

熟练使用 html5 标签

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

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

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

<!-- 自带播放功能的媒体标签 -->
<video>
   <source src="movie.mp4" type="video/mp4" />
</video>

<!-- 1行顶3行的进度条 -->
<progress value="22" max="100"></progress> 

<!-- 展开收起的摘要标签 -->
<details>
  <summary>HTML 5</summary>
  This document teaches you everything you have to learn about HTML 5.
</details>
3202年了，如何写出优雅的CSS

详情与摘要标签

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

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

<dialog id="favDialog">
  <form method="dialog">
    <p>这是打开的对话窗口</p>
    <div>
      <button value="cancel">Cancel</button>
      <button id="confirmBtn" value="default">Confirm</button>
    </div>
  </form>
</dialog>
<button id="updateDetails">Update details</button>

<style>
:modal {
  border: 5px solid red;
  background-color: yellow;
  box-shadow: 3px 3px 10px rgba(0 0 0 / 0.5);
}
</style>

<script>
const updateButton = document.getElementById('updateDetails');
const favDialog = document.getElementById('favDialog');

updateButton.addEventListener('click', () => {
  if (typeof favDialog.showModal === "function") {
    favDialog.showModal();
  }
});
</script>
3202年了，如何写出优雅的CSS

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

另外掌握这些默认标签，还可以在你老板、客户需要一个 demo 的时候，效率加倍，快速出活。留下更多的时间摸鱼，何乐而不为呢？

多使用 CSS 伪类

CSS 也会有更多新伪类，让你更好的控制页面的内容。

:is 筛选、合并元素

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 当前元素是否有（子/兄弟元素）

<h1>正标题</h1>
<p>正文内容要离标题远远的</p>

<h1 class="has-h2">正标题</h1>
<h2>副标题要挨近标题</h2>
<p>正文内容要离标题远远的</p>

根据是否有副标题决定正标题的间距

h1.has-h2 {
  margin: 0 0 0.25rem 0;
}

如果是动态内容，还需要使用 js 通过 if/else 语句添加 class。但是如果使用:has，将样式控制交回给了 css, 即使是动态生成的内容，也无需一行 js。

h1:has(+ h2) {
  margin: 0 0 0.25rem 0;
}

目前 CSS 的伪类已经 60 多个了，大家有空可以去 MDN CSS 看看。

当然这些新 CSS 的属性，使用前需要对兼容性做一下了解，详细可以去 can i use 查看

多用继承

css 继承的属性有字体、颜色等。每次写完上一层的 css 后，可以先看看效果，如果不需要写了，可以不用再写代码。

body {
    font-size: 12px;
}
p {
    font-size: 12px; // 字体继承 body，无需再写
}

另外也可以通过设置属性值为 inherit 来显式继承父元素的属性, 减少一些重复的值。例如一个表格，可以通过 inherit 将标题头的边线与表格统一。

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 再增加嵌套语法（已在提案中），估计第三方工具会更少人用。

其他

一个图层仅写一个布局

布局常常要在父节点写，然后再子节点写了，不太可能在同一个父节点写两种布局。但是在上一布局的子节点同时也是下一个布局的父节点，就会让人混乱了。


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

转载自:https://juejin.cn/post/7205181884589539389
评论
请登录