Ways to Write Better CSS

助教统整 n 个方法帮助你写出更好的 CSS

#unsorted

方法一：关心选择器权重比例与性能

过度深层的选择会使得 CSS 的权重比例变得很高，导致后续维护变得非常麻烦会需要覆盖掉某些样式，最后因为权重比例太高，就开始用 !important 来覆盖掉原本的样式。

如果一个 class 选择器就可以选择到你想要的元素，那何必要写这么多层增加阅读难度与权重比例呢？在某些案例，过度的选择还会影响到性能，因为浏览器会需要花费更多的时间去解析该选择器。

/* ❌ Nope */
.navbar .nav-item .nav-link {
}

/* ✅ Yes */
.nav-link {
}

明确的选择元素会让人感觉比较安心，较不容易发生命名上的冲突，但在实际开发中，读一长串且具体的选择器，不会比想一个良好的 class 名称来得更快，如果对于命名上的冲突有担忧，推荐可以参考 BEM 命名法。总结把握以下原则最好：

尽可能压低选择器的权重比例
测试除错时可以使用 !important🔗，但用于正式环境是绝对不能被接受的
不要使用 # 选择器🔗，因为相同名称的 ID 是不合规的语法，意味着 ID 选择器只可能使用一次，而且权重比例非常高不利于维护

方法二：避免追求过于花俏的选择方式

原因与方法一相同，尽可能地使用简单、低权级的选择器来达成目的，并不是说酷炫的选择器没有学习的必要，而是在绝大多数时候一个简单的 class 选择器可以满足当下的需求，是最直白且最好维护的选择，玩弄花俏的选择方式的同时，记得解决问题的方式要注重简洁： KISS 原则🔗。

方法三：统一编写方式

/* Utility */
.flex {
  display: flex;
}

越来越多人拥抱编写 Utility 形式的 CSS 的习惯，但如果随心所欲的混用 Utility 样式没有规划，有很大概率会让 CSS 变得很难维护。新手特别容易写 Utility，因为可以像行内样式一样，不用考虑命名，直接用就生效，但这样的习惯会随着项目的规模变大而变得难以维护。

特别是对初学者，我还是提倡良好的命名网页的重要性，如果你对 Utility 真的有兴趣，可以参考看看我的另一个文章：不需要学 Tailwind 也可以用 Tailwind。

/* ❌ 混用 */
.p-1 {
  padding: 1rem;
}

.panel {
  border: 1px solid black;
  background-color: white;
}

/* ✅ 语义化 */
.panel {
  padding: 1rem;
  border: 1px solid black;
  background-color: white;
}

/* ✅ 通用类别 */
.p-1 {
  padding: 1rem;
}

.border {
  border: 1px solid black;
}

.bg-white {
  background-color: white;
}

方法四：不要再写神奇数字了

神奇数字是指在程序中让人无法理解其用途的数字，在早期 CSS 还没有支援变量语法的情况下会改写 Sass🔗 来使用变量，但现今 CSS 变量🔗 已经在各大浏览器中得到广泛的支持，抽离出一些常用的样式变量，并且在需要的时候引用，可以让 CSS 的维护变得更加容易，随着项目的规模愈庞大越应该避免散乱的变量出现在程序中。

可以参考看看以下我写的时间轴范例，就使用了原生 CSS 与 Sass 的变量语法来管理各方面的变量，让 CSS 变得更加容易维护：

方法四：使用恰当的单位

网页设计常用的大小单位不外乎就是：px、rem、em、%、vw、vh 但要正确使用这些单位需要一定的经验以及与网页设计者有充足的沟通。简单来说最常看到以下几种错误：

写定元素的尺寸：当编写响应式网页的时候最好不要写死元素的尺寸或是手动算 % 数，现在都可以使用 max-width、flex、grid 来自由的让版面在小尺寸下也能合理的呈现
都使用 px 不使用 rem：rem 会是大多距离单位的好选择，因为相比于 px ，它尊重用户对浏览器尺寸的设定。但在要求精确细小的尺寸时，px 仍是很好的选择

方法五：舍弃旧时代的网页排版方法

如果没有要维护老网站的需求，那么就不要再用旧时代的方法来编排网站了吧！所谓的老方法像是：table🔗、float🔗、手动计算 % 数…… 改成拥抱 Flexbox🔗 与 Grid🔗，让你的网页变得更加灵活，更方便维护调整。