CSS 单行代码可以改进（几乎）每个项目

2025-05-24

CSS 单行代码可以改进（几乎）每个项目

大多数单行代码都是 CSS 规则中的一个声明。在某些情况下，选择器不仅仅是一个简单的元素；在其他情况下，我会添加额外的声明作为建议，以获得更好的体验，从而使它们不仅仅是一行代码——对于这些情况，我提前致歉。

其中一些小技巧更多是个人选择，并不适用于所有网站（并非每个人都使用表格或表单）。我将简要介绍每一种技巧，它们的功能（附示例图片），以及我喜欢使用它们的原因。请注意，示例图片可能基于之前的示例构建。

以下是单行代码的作用的总结：

  • 限制视口内的内容宽度
  • 增加正文文本大小
  • 增加文本行之间的行距
  • 限制图像的宽度
  • 限制内容中的文本宽度
  • 以更平衡的方式包装标题
  • 表单控件颜色与页面样式相匹配
  • 易于遵循的表格行
  • 表格单元格和标题的间距
  • 减少动画和动作

限制视口中的内容宽度



body {
  max-width: clamp(320px, 90%, 1000px);
  /* additional recommendation */
  margin: auto;
}
Enter fullscreen mode Exit fullscreen mode

添加此一行代码将减少内容大小以占据视口的 90％，将其宽度限制在 320 到 1000 像素之间（请随意更新最小值和最大值）。

这项更改会自动让您的内容看起来更加美观。它不再是巨大的文本块，而是看起来更加结构化和有序。如果您同时添加margin: auto;，body内容将在页面居中显示。两行代码就能让内容看起来更加美观。

并排对比变化。左侧（修改前）：一大段文字。右侧（修改后）：文字两侧有内边距。文字仍然很大，但空格更多了。

对齐且包含的文本比长篇大论的文本看起来更好

增加文本大小



body {
  font-size: 1.25rem;
}
Enter fullscreen mode Exit fullscreen mode

面对现实吧：浏览器默认的 16px 字体太小了。不过这可能是我年纪大了才有的个人看法 😅

一个快速的解决方案是增加正文中的字体大小。由于em浏览器的级联和单位设置，网页上的所有文本都会自动增大。

并排比较。左图（之前）：包含文本的列。右图（之后）：包含较大尺寸文本的列。

较大的文本使内容更易于阅读。

增加行间距



body {
  line-height: 1.5;
}
Enter fullscreen mode Exit fullscreen mode

另一个提高可读性、打破冗长冗长的文本的方法是增加段落和正文之间的行距。我们可以使用line-height属性轻松实现这一点。

并排比较。左图（之前）：包含文本的列。右图（之后）：包含文本的列（间距更大）。

行与行之间的空格打破了文本的墙壁和白色的河流。

这个选择（与前两个选择一起）将大大增加我们页面的垂直尺寸，但我向你保证，文本对于所有用户来说都将更具可读性和更友好。

限制图像大小



img {
  max-width: 100%;
}
Enter fullscreen mode Exit fullscreen mode

图像的大小应与它们所占据的空间大致相同，但有时，我们最终会得到很长的图片，这会导致内容移动并产生水平滚动。

避免这种情况的一种方法是将最大宽度设置为 100%。虽然这不是一个万无一失的解决方案（边距和填充可能会影响宽度），但在大多数情况下都能奏效。 

并排比较。左图（调整前）：图片溢出内容尺寸，导致出现滚动条。右图（调整后）：图片已调整至内容尺寸。

防止水平滚动，使图像与文本更好地融合

限制内容中的文本宽度



p {
  max-width: 65ch;
}
Enter fullscreen mode Exit fullscreen mode

避免可怕的文字墙和空间“河流”的另一个策略是，即使正文宽度达到最大，也要应用这种样式。虽然它可能看起来不必要，有时甚至很奇怪，因为段落会比其他元素更窄。但我喜欢这种对比和更短的行距。

以前我用 60ch 或 65ch 的值就成功了，但你可以使用其他值并调整最大宽度以满足你的需求。试玩一下，看看它在你的网页上看起来会是什么样子。

并排比较。左图（修改前）：文本占据整个宽度。右图（修改后）：文本占据大部分宽度。

将较大的文本块分成较小的块以提高可读性

以更平衡的方式包装标题



h1, h2, h3, h4, h5, h6 {
  text-wrap: balance;
}
Enter fullscreen mode Exit fullscreen mode

标题是网站结构的重要组成部分，但由于其尺寸较大且内容较短，看起来可能会很奇怪，尤其是在占用多行内容的情况下。一个有效的解决方案是使用 来平衡标题text-wrap。

虽然 balance 似乎是 text-wrap 最常用的值，但它并非唯一。我们也可以使用pretty，它会根据需要将多余的单词移到最后一行，而不是平衡所有内容。可惜的是，pretty 尚未获得广泛支持。

并排比较。左图（修改前）：一个标题占两行，第二个标题只有一个字。右图（修改后）：标题占两行，宽度相似。

平衡包装可以提高可见性和可读性

表单控件颜色与页面样式相匹配



body {
  accent-color: #080; /* use your favorite color */
}
Enter fullscreen mode Exit fullscreen mode

另一个小改动虽然影响不大，但确实让界面看起来更好了。直到最近，我们还无法使用 CSS 来设置原生表单控件的样式，只能使用浏览器显示。但现在情况已经改变了。

开发整个组件可能很麻烦，但使用这一行代码就可以直接设置与网站其余部分和设计系统更相似的颜色。

并排比较。左图（修改前）：表单控件默认为蓝色。右图（修改后）：表单控件颜色与标题和链接颜色一致（绿色）。

正是这些小细节（和颜色）让页面变得完整

易于遵循的表格行



:is(tbody, table) > tr:nth-child(odd) {
  background: #0001; /* or #fff1 for dark themes */
}
Enter fullscreen mode Exit fullscreen mode

我们必须使用表格来显示数据，而不是布局。但表格默认很丑，我们不希望数据看起来丑陋。特别地，有助于组织数据并使其更具可读性的一个方法是使用深色/浅色行交替的斑马线表格。

上面显示的一行代码可以轻松实现该样式。它可以简化为 only ，tr而不考虑tbody或table父级，但这也会影响表格标题，而这或许是我们不希望看到的。这只是个人喜好问题。

并排比较。左图（修改前）：所有表格行均为白色。右图（修改后）：甚至表格行也略微变暗。

更容易水平跟踪数据（按行）

表格单元格和标题的间距



td, th {
  padding: 0.5em; /* or 0.5em 1em... or any value different from 0 */
}
Enter fullscreen mode Exit fullscreen mode

最后一个改进是，通过在表格单元格和标题中添加内边距 (padding) 来稍微增加内容的间距，使表格更易于访问和阅读。默认情况下，大多数浏览器都没有内边距，不同单元格的文本会相互重叠，让人难以区分一个单元格的起始位置和另一个单元格的结束位置。

我们可以更改填充值以将其调整到我们喜欢的大小。但是，请避免过度调整，以免造成不必要的滚动或过多的空白。

并排比较。左图（调整前）：表格单元格的文本内容连在一起。右图（调整后）：表格单元格的内容与其他单元格内容清晰分离。

更容易水平和垂直跟踪数据

减少动画和动作



@media (prefers-reduced-motion) {
  *, *::before, *::after {
    animation-duration: 0s !important;
    /* additional recommendation */
    transition: none !important;
    scroll-behavior: auto !important;
  }
}
Enter fullscreen mode Exit fullscreen mode

好的，好的。这段代码远不止一行代码。它有一个单行版本（通过将动画持续时间设置为零秒来删除动画），但网页上的其他内容会使元素移动。

通过在 prefers-reduced-motion 媒体查询中设置这些声明，我们将尊重用户减少运动的选择。这种方法有些激进，因为它会移除所有运动，而这可能并非用户的本意——这是“减少运动”，而不是“无运动”。如果适用，我们仍然可以根据具体情况保留运动。

并排比较。左图（之前）：图片在网页上移动。右图（之后）：图片静止。

没有动画？没问题！

文章来源：https://dev.to/alvaromontoro/css-one-liners-to-improve-almost-every-project-18m
Devto 翻译
PREV
使用 HTML 和 CSS 开发交互式简历
NEXT
使用 HTML 和 CSS 创建标签云