在这里，大多数单行代码只是 CSS 规则的一个声明。

在某些情况下，选择器不仅仅是一个简单的元素；只需要添加额外的声明，就能获得更好的体验，这样它们不再是一行代码，而像神笔马良的一笔一般。

其中一些单行代码更多是个性化的选项，并不适用于所有网站（比如并非每个人都使用表格或表单）。

下面我就简要介绍每一种代码、它们的用途（并附示例图片）以及我喜欢使用它们的原因。

请您注意，示例图片可能建立在之前的示例之上。

限制显示的内容宽度

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

添加这一行代码将缩小内容大小以占据屏幕的 90％，将其宽度限制在 320 到 1000 像素之间（我们可以随意更新最小值和最大值）。

这一改变将自动让您的内容看起来更加舒适和美观。它不再是一大段文本，而是看起来更加结构化和有条理的内容。

如果您还添加了margin: auto;标签 ，这样 body内容将在页面上居中。

只需要两行代码，让内容看起来好多了。

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

增加文本大小

body {  font-size: 1.25rem;}

让我们面对现实吧：浏览器默认的 16px 字体大小太小了。虽然这可能是基于我年纪变大了而产生的个人观点 😅

一个快速解决方案是增加正文中的字体大小。使用em计量单位，这让浏览器使用级联，网页上的所有文本都会自动增加。

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

增加行间距

body {  line-height: 1.5;}

提高可读性和打破令人讨厌文本墙的另一种方法是增加段落和内容之间的行间距。

我们可以使用属性轻松做到这一点，那就是：line-height。

行与行之间的空间打破了文本墙的密集感，更加舒服

这个选择器将大大增加我们页面的垂直尺寸，文字将更具可读性，对所有用户来说更友好。

限制图像大小

img {  max-width: 100%;}

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

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

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

限制内容内的文本宽度

p {  max-width: 65ch;}

避免可怕的文字墙和空间长河的另一种策略是，即使与正文的最大宽度结合使用，也请使用这种样式。

它可能看起来不必要，有时甚至很奇怪，因为段落会比其他元素更窄。但我喜欢这种有对比和更短的线条。

过去，60ch 或 65ch 的值对我来说就很有效，您可以使用其他值并调整最大宽度，以满足需求。还可以继续探索它在网页上的外观。

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

以更平衡的方式换行标题

h1, h2, h3, h4, h5, h6 {  text-wrap: balance;}

标题是网页结构的重要组成部分，但由于标题较大且内容较短，它们可能在页面上看起来很奇怪。尤其是当它们占用多行时。

一个有用的解决方案是使用 text-wrap 来平衡标题。

balance 似乎是 text-wrap 最受欢迎的值，但它并不是唯一的值。我们还可以使用pretty，如果需要，它会将多余的单词移到最后一行，而不是平衡所有内容。

但是，pretty 属性尚未获得广泛支持。

使用 balance 提高可见性和可读性

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

body {  accent-color: #080; /* use your favorite color */}

从一个小变化来说不会产生重大影响，但使页面看起来更好。以前，我们无法使用 CSS 来设置原生表单控件，只能使用浏览器的原生方式显示，但现在的事情已经发生了变化。

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

正是这些小细节让页面变得完整

易于阅读的“斑马”表格行

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

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

上面的一行代码可以轻松实现该样式。

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

表格单元格和标题的间距

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

最后一个将让表格更易于访问和阅读，更改是通过在表格单元格和标题中添加填充来留出空间。

默认情况下，大多数浏览器不会做任何填充，不同单元格的文本会相互接触，让人难以区分一个单元格的开始和另一个单元格的结束。

我们可以改变 padding 值来调整到喜欢的大小。但是不要调整过大，以免造成不必要的滚动或过多的空白。

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

减少动画和动作

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

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

通过在 prefers-reduced-motion 媒体查询中设置这些声明，我们将尊重用户减少运动的选择。这种方法有些激进，因为它会删除所有运动，这可能不一定是用户的意图 —— 是“减少运动”而不是“无运动”。

如果合适，我们仍然可以根据具体情况保留运动。

要要没有动画的效果？没问题！

现在出发

欢迎您通过评论这篇文章来表达赞赏！这只需要一分钟，但对你的职业生涯来说肯定是值得的。

作者：万能的大雄