【第2671期】防御性CSS简介

前言

项目设计组件库，这种有为将来时的组件蛮需要思考下防御性 CSS。今日前端早读课文章由 @飘飘翻译投稿分享。

正文从这开始～～

Back in December 2021, I wrote an article titled Defensive CSS. I used that term because that's really what is it about. I wanted a term that communicates the concept of writing CSS that prevents unexpected layout behaviors, or at least, reduces them.

早在 2021 年 12 月，我写了一篇题为《》的文章。我用这个词是因为这就是它的真正含义。我想要一个术语来传达编写 CSS 的概念：以防止意外的布局行为，或至少减少它们。

It turned out that defensive CSS doesn't only apply to CSS, but UI design as well. As a designer, you need to either work on visual variations of a component with all the possible use-cases or at least communicate them clearly with the development team.

事实证明，防御性 CSS 不仅适用于 CSS，也适用于 UI 设计。作为一个设计师，您需要使用所有可能的用例处理组件的可视化变化，或者至少与开发团队清楚地沟通它们。

In this introduction article, I will shed the light on why it's important to design and write CSS defensively, and how we can take it from there.

在这篇介绍性文章中，我将阐述为什么防御性地设计和编写 CSS 很重要，以及我们如何从那里着手。

Content can break layouts

内容可能会破坏布局

One of the common reasons for having layout issues in CSS is content. Be it short or long, it can break a layout if we haven't thought carefully about it.

在 CSS 中出现布局问题的常见原因之一是内容。不管它是短还是长的，如果我们没有仔细考虑，它都可能会破坏布局。

Consider the following basic example.

请看下面这个基本示例。

We have a component that is expected to be in a sidebar, which is limited space.

我们有一组件预计要放在侧边栏里，这是很有限的空间。

When the title is "Articles", everything looks good. However, if the content manager decided to change that name to a bit longer one, what will happen?

当标题为 "文章" 时，一切看起来都很好。但是，如果内容经理决定把这个名字改成一个更长的名字，将会发生什么？

Depending on the CSS layout used, we can expect the title to wrap into a new line, or to push the link to a new line.

根据所使用的 CSS 布局，我们可以期望标题换行，或将链接推到新行。

None of the above is a bad result. This is excellent. However, my point is that we must account for that upfront and have control over how the title will wrap.

以上都不是一个坏的结果。这是优秀的。我的观点是，我们必须事先考虑到这一点，并对标题的包装方式加以控制。

Also, content change is not only about the text. It can happen to images as well. In the following figure, we have a card with an image

另外，内容的改变不仅仅是关于文本的变化。它也可能发生在图像上。在下图中，我们有一张带有图像的卡片

For such a component, we need to ask a few questions:

对于这样的组件，我们需要问几个问题：

• Is the image coming from the backend always have a consistent aspect ratio?

从后端来的图片是否总是有一个一致的长宽比？

• What will happen to the image when the title is too long? You might think that this isn't related but wait and see.

当标题太长时，图片会发生什么？你可能会认为这者没有关系，但等着瞧吧。

In the above figure, we have an image with a different aspect ratio which is causing the image to stretch horizontally. This isn't good.

在上图中，我们有一个具有不同纵横比的图像，这导致图像在水平方向上伸展。这不是很好。

Also, if we're using flexbox, we might get a different kind of stretching, which is vertical.

另外，如果我们使用的是 flexbox，我们可能会得到一种不同的拉伸，即垂直拉伸。

In flexbox, the default behavior is to stretch contents. Given that the card component is built with flexbox, we might get that kind of issue. The fix is explained in this link.

在 flexbox 中，默认行为是拉伸内容。考虑到卡片组件是用 flexbox 构建的，我们可能会遇到这种问题。这个链接中解释了。

Modern CSS made our life easier

现代 CSS 让我们的生活更轻松

Even though the modern CSS we use today is useful, we need to be careful about how we use it. As you've seen in the previous example, the image stretched vertically to match its sibling's height (the block containing the title and description).

尽管我们现在使用的现代 CSS 很有用，但我们需要谨慎使用它。正如你在前面的例子中所看到的，图片在垂直方拉伸，以配合其同级的高度（包含标题和描述的块）。

Adding display: flex and assuming that it will do wonders isn't enough. By default, this will stretch the flex items vertically which means that they will have an equal height.

添加 display: flex 并假设它能创造奇迹是不够的。默认情况下，这将垂直拉伸伸缩项目，这意味着它们将有一个相等的高度。

When the card has a longer title or description, the image will be stretched. Consider the following figure:

当卡片的标题或描述较长时，图像将被拉伸。请看下图。

The solution is to override the default stretching behavior. In flexbox, we can use the align-self property to do that.

解决方案是覆盖默认的拉伸行为。在 flexbox 中，我们可以使用 align-self 属性来做到这一点。

Notice how the image is not stretching now, that's due to adding align-self: start to it.

注意现在图像没有被拉伸，那是由于加入了 align-self: start。

Doing that up front will prevent unexpected issues or behaviors in the future. For some projects, the future is all about adding real content.

提前做好这一可以防止将来出现意外的问题或行为。对于一些项目来说，未来就是要增加真正的内容。

Next, we'll explore a perfect UI that looks good with the content that came from the designer.

接下来，我们将探讨一个完美的 UI，看起来与来自设计师的内容很好。

A UI with a perfect design

一个具有完美设计的用户界面

Let's take a look at the following design that looks perfect in terms of imagery and text content.

让我们来看看下面的设计，它在图像和文字内容方面看起来很完美。

At the first glance, there are no issues here. But the moment we start to inject different content lengths, we'll start facing UI problems or the design might not look that good.

乍一看，这里没有任何问题。但是当我们开始注入不同长度的内容时，我们就会开始面临 UI 问题，或者设计可能看起来不那么好。

Consider the following broken design.

考虑下面这个破碎的设计。

Here are a few issues to highlight:

这里有几个问题需要强调：

1- The hero section has a fixed height, thus not expanding to fit the larger description text.

banner 部分有一个固定的高度，因此不能扩展以适应更大的描述文本。

2- Hero content is colliding with the section title below it.

banner 内容与它下面的章节标题相冲突。

3- Card title text doesn't handle long content well.

卡片标题文本不能很好地处理长内容。

3-1 It's too close to the action (Add to cart). See the muffins card.

它离交互（添加到购物车）太近。参见松饼卡。

3-2 Text that is wrapped into a new line is too condensed in the white box.

换行的文本在白框中太浓缩了。

4- Button has a fixed width, thus making it impossible for the user to read the label.

按钮有固定的宽度，因此用户不可能读取标签。

5- The image is stretched due to adding an image with a different aspect ratio than the card.

由于添加了一个与卡片长宽比不同的图像，图像会被拉伸。

We can fix that by testing each component and ensuring that we account for the edge cases, but why waste that time after we build the UI? Defensive CSS is about writing CSS that is future-proof and will help prevent, or at least reduce such issues.

我们可以通过测试每个组件来解决这个问题，并确保我们考虑到了边缘情况，但为什么要在我们建立了用户界面之后再浪费这个时间呢？防御性 CSS 是指编写面向未来的 CSS，并有助于防止或至少减少此类问题。

A closer look at a component

仔细观察一个组件

To explain why designing and coding defensively is useful, I will take the card component as an example.

为了解释为什么防御性的设计和编码是有用的，我将以卡片组件为例。

At the first glance, the card looks easy. However, there are some little things to be taken into consideration.

乍一看，这张卡看起来很容易。然而，有一些小事需要考虑。

Here are some of them:

下面是其中的一些：

• Make sure the image always has object-cover, to avoid it being distorted in case of adding an image with a different aspect ratio.

确保图像总是有对象的覆盖，以避免在添加不同长宽比的图像时被扭曲。

• Have space at the end of the title to avoid it being too close to either the "Add to cart" or the "Sold out!" elements.

在标题的末尾留出空间，以避免它离 "添加到购物车" 或 "售罄！" 元素太近。

• Using aspect-ratio to have a consistent image size.

使用宽高比来获得一致的图像大小。

Thinking ahead leads to adding the above CSS. And that's only on the scale of one component. It's easy to forget that and assume that text won't be long, or images won't change.

提前思考导致添加上述 CSS。而这仅仅是在一个组件的规模上。我们很容易忘记这一点，以为文字不会变长，或者图像不会改变。

What is defensive CSS?

什么是防御性 CSS？

a set of CSS practices that designers and developers can use to write CSS that is future-proof, resulting in fewer bugs in user interfaces.

一套 CSS 实践，设计人员和开发人员可以用它来编写面向未来的 CSS，从而减少用户界面上的错误。

Defensive CSS as a strategy

防御性 CSS 作为一种策略

When we start thinking of defensive CSS as a strategy, it will help us to reveal hidden secrets that let us design and build layouts with as fewer issues as possible.

当我们开始把防御性 CSS 当作一种策略时来考虑时，它将帮助我们揭示隐藏的秘密，让我们在设计和构建布局时问题尽可能少。

I like to think of it as something useful to designers, developers, and QA engineers.

我认为它对设计师、开发人员和 QA 工程师很有用。

Designers

设计师

It's about designing UIs with unknown content in mind.

这是关于在设计 UI 时考虑到未知的内容。

Developers

开发人员

Think of it as an advanced CSS reset.

把它看作是一个高级的 CSS 重置。

QA Engineers

QA 工程师

As a quality assurance engineer, you can have a list of common CSS issues that are related to content.

作为一名质量保证工程师，你可以有一个与内容有关的常见 CSS 问题清单。

Now that you have a good idea about the nature of this little project, I invite you to take a closer look at the defensive tips.

现在你对这个小项目的性质有了一定的了解，我邀请你仔细看看防御性技巧。

What to expect from Defensive CSS

从防御性 CSS 可以期待什么

Currently, this project has over 24 defensive tips. For the future, here is what I'm planning to do:

目前，这个项目有超过 24 个防御性提示。对于未来，我打算这样做:

• Defensive CSS Checklist & Reset.

防御性 CSS 检查表和重置。

• Articles that target designers and how we can use modern design tools to help build better defensive user interfaces.

以设计师为目标的文章，以及我们如何使用现代设计工具来帮助建立更好的防御性用户界面。

• How to test and break designs. Sometimes it's okay to be a troublemaker.

如何测试和打破设计。有时做一个麻烦制造者也是可以的。

• Video content.

视频内容。

关于本文
译者：@飘飘
作者：@shadeed9
原文：https://defensivecss.dev/articles/intro-defensive-css/

关于【防御性】相关推荐。欢迎读者自荐投稿，前端早读课等你