雅致第一原则:才不写下不会写 css!

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>

详细信息与引言标识

更令人惊喜的是，也有带蒙版环境的对谈 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>

熟练掌握这种标识，能让你可以得到自己想要的款式、互动，你只要稍加改动，就可以完成一个很完善的部件。

此外把握这种默认设置标识，也可以在你老板、用户需要一个 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 .sub-child {
    position: relative;
}

/* 恰当示范性 */
.child {
    flex: 1 1 auto;
}
.child .sub-child {
    position: absolute;
}
.child .sub-child-inner {
    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！祝好！