如何编写容易理解的CSS样式
自 CSS 本身诞生以来，CSS 样式就一直是件重要的事。这是一种很好的练习和学习方式，也是一个有趣的编码挑战。但它有一个大问题：CSS 样式本质上是不可访问的。
在这篇文章中，我们不会看到如何创建 CSS 绘图和插图（有很多这样的文章）。相反，我们将专注于一些技巧和最佳实践，让大家都可以更容易地理解 CSS 样式。
应用这些技术后，您的 CSS 样式将对屏幕前阅读的用户、具有特定颜色需求和偏好的人、患有前庭障碍或眩晕的人更友好……而且所有这些都不会影响您目前的样式或限制您的创造力。这是一个双赢。
有关本文中提示的工作示例，请查看此 CSS 插图。事不宜迟，让我们看看建议：
- [将 CSS 样式识别为图像](#将 CSS 样式识别为图像)
- 添加替代文本
- 追求完美像素或可扩展设计
- [使用 HTML 语义元素](#使用 HTML 语义元素)
- 注意动画
- 考虑读者的颜色选择
- 设置纵横比
将 CSS 样式识别为图像
主要需要做的事情之一是将 CSS 样式识别为图像。我们可以通过更改容器并添加imgARIA 角色来做到这一点：
<div role="img">
<!-- HTML of the image -->
</div>
通过添加此 ARIA 角色，辅助技术将在到达 CSS 样式容器时将其宣布为图像。
作者注：从现在起，我们的 CSS 样式将被识别为图像，因此术语“CSS 样式”、“绘图”、“插图”或“图像”可以互换使用。
添加替代文本
现在屏幕前的阅读者将 CSS 样式声明为图像，重要的是还需要提供一些描述或替代文本，就像常规图像对alt属性所做的那样。
我们可以通过向图像添加aria-label属性并在那里提供替代文本来实现这一点：
<div aria-label="The alternative text goes here">
<!-- HTML of the image -->
</div>
这样看起来好多了，但有时候 CSS 加载不正确的时候，可能不足以满足我们的要求。这就是我们更喜欢使用aria-labelledby属性的原因：
<div aria-labelledby="alt-image">
<div>The alternative text goes here</div>
<!-- HTML of the image -->
</div>
此解决方案将标签作为文本，将使用可访问的技术隐藏该标签，这样做的可能性有很多；一个简单的可以在A11Y 项目的网站上找到：
#alt-image {
clip: rect(0 0 0 0);
clip-path: inset(50%);
height: 1px;
overflow: hidden;
position: absolute;
white-space: nowrap;
width: 1px;
}
这样，如果 CSS 未成功加载，则将显示替代文本。类似于<img />标签，如果图像加载失败，替代文本将显示在页面上。
追求完美布局或响应式设计
在我们开始任何编码之前就需要考虑的事情：我们想要完美尺寸的绘图吗？还是我们想要一些可以很好扩展的响应式（以有时无法完美显示为代价）绘图？这会对我们如何创建 CSS 样式产生影响。
如果我们想要获得完美尺寸的效果，我们应该使用绝对单位，如px、cm、pt等。这样，我们的图像将具有固定大小并且不会自适应（尽管它会比光栅图像更好地缩放矢量绘图），我们应该能够使用任何 CSS 属性和值。
另一方面，如果我们要实现可扩展性，我们可以使用相对单位，如%，vmin，em等等。。
追求可扩展性需要一些额外的考虑：
- 结果将具有可扩展性和响应性……或者至少具有响应能力。
- 应该谨慎对待一些不适用于所有相对单位的 CSS 属性（例如
box-shadow或border） - 应该避免一些不采用相对单位的 CSS 值（例如，目前
clip-path可以是相对的，polygon()但不是相对的path()）
这两种方法都没有错。对于样式绘图，我们很可能会选择可扩展性和响应性；而对于图标或背景等更实用的东西，像素完美的结果可能更方便。
使用 HTML 语义元素
HTML5 提供了许多语义元素。我们绘图不需要对<div>的每个部分都使用，尤其是容器。那么什么情况下需要使用呢？
作者注：我知道我对语义元素的选择可能存在争议。我会尽量让他们保持中立/客观。
有的元素非常适合这种情况：<article>和<figure>/<figcaption>，虽然后者似乎是显而易见的选择，但我们很快就会看到前者具有额外的语义优势。
一方面，我们有<figure>. 带有可选标题 ( <figcaption>)的自包含内容，可用作替代文本：
<figure aria-labelledby="alt-image">
<figcaption>
Here goes the alternative text
</figcaption>
<!-- HTML of the image -->
</figure>
这个选择似乎非常适合我们想要做的事情，但我们还需要考虑<article>：一个完整的、自包含的、独立的组合，旨在分发或重用。正是我们的需要的CSS样式！
<article>
<!-- HTML of the image -->
</article>
选择哪个语义 HTML 元素？这取决于作者以及如何将 CSS 样式呈现给用户。
有些人已经提到不允许在 <article>内包含一个<article>，但这是不正确的。一篇文章可以包含另一篇文章。当有嵌套文章时，内文章必须与外文章相关。
使用 <article>还可以更自然地使用其他语义 HTML 元素，例如插图标题/替代文本、
