编写更好的 CSS 代码 (Part V)

1009次阅读  |  发布于2年以前

在早期的 Web 开发中，页面的布局和定位通常要用表格和各种 hack 技术来实现。与那时相比，CSS 已经得到了长足的发展。如今，开发人员可以很轻松地编写出适用于所有主流浏览器的 CSS 代码，在实现复杂布局时也不会像以前那样绞尽脑汁。这不仅使响应式布局变得更容易，还可以通过删除冗余的代码来发布体积更小的样式。在本文中，我们将使用现代技术来降低代码的复杂程度，通过一些较新的技术来编写出更好的 CSS 代码。

使用 gap 简化布局

在 CSS grid 出现之前，能够在 Web 页面上实现动态布局的唯一可行方案就是 Flexbox。但是它在使用过程中，存在一个较大的限制：缺少对间隙的支持。尽管一些设计工具支持间隙的概念，但是 CSS 却不支持间隙，在绝大多数样式中都要用外边距来分隔 flex 子元素。因此，我们经常不得不对最后一个 flex 子元素做一些特殊处理：

.flex-item:not(:last-of-type) {
  margin-right: 8px;
  margin-bottom: 8px;
}

如果要 flex 布局中的最后一行元素取消底部的外边距，这个功能看似简单，真正实现起来还是挺困难的。除非我们在布局上使用负外边距来抵消这些子元素的外边距。因此，我们不得不写更多的 CSS 来实现这个任务。

现在，有另外一种解决方案了，那就是在 flex 布局中支持使用间隙，也就是 gap 属性。如果不考虑一些老版本浏览器的兼容问题，我们可以写出更简单一些的 CSS，如下所示：

.flex-layout {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

除此之外，我们也可以使用 grid 实现布局，它不仅支持 gap，而且支持自动适配网格容器中每列的尺寸。

.grid-layout {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(some-min, 1fr));
  gap: 8px;
}

无论使用上面提到的哪种方式，都不必再担心布局的边缘间距，浏览器会自动为我们处理好，只有相邻的子元素之间存在对应的间隙。如果布局不需要换行，那么它的外边缘就不会有任何不必要的间距。此外，由于 flex 和 grid 布局会适配 RTL（右对齐），这使得它们非常适合创建 RTL 安全布局，因为我们不必担心文本的方向性。

使用 aspect-ratio 设置宽高比

假如，你想做一个 3 x 3 的正方形九宫格：

在 CSS 还没有 aspect-ratio 属性之前，我们通常是使用内边距百分比技巧来实现响应式的正方形：

.square {
  height: 0;
  padding-bottom: 100%;
}

或者，使用自定义属性来保持元素的宽度和高度同步。这种方法的主要缺点是，由于要设置显式尺寸，因此无法使用响应式尺寸：

.square {
  --size: 2rem;
  width: var(--size);
  height: var(--size);
}

但现在，所有主流浏览器都支持 aspect-ratio，可以用它更直观地表达元素的宽度和高度之间的关系：

.square {
  aspect-ratio: 1;
}

也许,你决定给正方形一个明确的宽度，让它的高度匹配：

.square {
  aspect-ratio: 1;
  width: 2rem;
}

或者，使用 grid 布局，并通过网格的格式上下文来设置其宽度：

.square-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}
.square {
  aspect-ratio: 1;
}

不管是哪种方式，都能实现一个正方形，并能够自动地缩放。

关于 aspect-ratio，我最喜欢的将它和其他一些属性组合起来使用，比如下面这个圆形：

.circle {
  aspect-ratio: 1;
  border-radius: 50%;
}

还有很多使用 aspect-ratio 的场景值得去探索。一个例子是，根据需要调整嵌入媒体的大小，比如 YouTube 视频；另一个例子是，增强用户体验，当我们使用 HTML 属性来设置图片的宽高，使用 aspect-ratio 可以防止布局发生变化。

如果说每分钟前端都会诞生很多新框架和类库，那么 CSS 的变化可能要按年来计算。每年 CSS 会出现一些新特性，包括 leading-trim, container queries, relative colors 等一系列让人兴奋的功能。只要对 CSS 知识掌握得越多，就能写出更好的代码。本文是整个系列的最后一篇：

Copyright© 2013-2020

All Rights Reserved 京ICP备2023019179号-8