大话CSS语法和规范中的设计缺陷

Incomplete List of Mistakes in the Design of CSS

原文链接：wiki.csswg.org/ideas/mista...

原文作者：wiki.csswg.org/wiki

P.S. 原文作者并没有审校过本译文，且译者在翻译本内容时夹带有个人对原文的理解，并尝试对其进行解读。可能理解或解读有误，麻烦请在评论区指出！

编者按： 本文总结了作者对CSS规范和语法的一些建议，旨在通过更加合理和直观的设计降低开发者的学习、使用成本，提高样式代码的可读性和可维护性。

具体建议涉及属性命名、值计算、默认值、布局算法、选择器语义等多个方面。

这些建议如果能在CSS标准中得到采纳，将大大简化样式代码的编写和维护工作。当然其中一些改进可能因现有网站大量依赖旧语法而难以实施，但总体来说这些改进建议值得标准组织考虑，也有助于CSS开发者反思现有语法和规范的不足。

如果我们拥有哆啦A梦的时光机，那么这些错误应该能够被纠正。:P

• white-space: nowrap 应该为 white-space: no-wrap（译者注：white-space 属性用于控制文本中空白字符的处理方式，例如空格和换行符。）

  • 并且将换行行为与 white-space 属性相关联并不合适

• animation-iteration-count 这个属性的命名应该更加简洁一些，只需使用 animation-count 这个名称就足够了，就像 column-count 属性一样。（译者注：animation-iteration-count 属性用于指定动画的播放次数）

• vertical-align 这个属性不应该应用于表格单元格，因为它与表格布局的其他方面不太一致。建议将 CSS3 中的对齐属性作为替代，这些属性应该在 CSS 的第一个级别（Level 1）中存在。（译者注：vertical-align 属性用于控制元素的垂直对齐方式。）

• vertical-align: middle 应该是 text-middle 或 x-middle，因为它并不真正处于中间位置，这样的名称更能描述它的作用。

• 在 CSS 中，可以使用百分比来指定元素的高度。然而，在自动布局的情况下，百分比高度通常会被视为未定义，即无法确定具体的高度。作者认为，应该将百分比高度相对于 fill-available 进行计算。（译者注：fill-available 可用于指定可用空间的大小，它会自动填充剩余的空间。）

• 表格布局应该更加合理。

• 默认情况下，box-sizing 属性的值应该是 border-box。

• 当 background-size 属性仅被提供一个值时，应该将该值复制一次，用作宽度和高度，而不是将第二个值默认为 auto。同样，对于 translate() 函数，也应该遵循相同的规则。（译者注：background-size 用于指定背景图片的大小，可以使用一个或两个值来设置宽度和高度。）

• 在 CSS 中，background-position用于指定背景图片在元素内的位置，而 border-spacing 用于指定表格边框之间的间距。这些属性应该首先指定垂直方向的值，然后再指定水平方向的值，以与 margin 等四方向属性的顺序相匹配。

• 在 CSS 中，background-repeat 用于指定背景图片的重复方式，默认情况下是水平和垂直都重复。在90年代这是一个合理的默认值，因为当时的网站设计常常需要背景图片的平铺效果。然而，随着前端页面的演变，更多的情况下我们希望背景图片不要重复，只显示一次。因此，将 background-repeat 默认为 no-repeat 可能更好，可以减少开发者在使用时的额外工作量。

• 在 CSS 中，margin 属性用于设置元素的外边距，可以使用四个值的简写形式来指定上、右、下、左四个方向的外边距。作者认为，这些四值简写属性的排列顺序应该按照逆时针方向，即 inline-start 的值应该在 block-end 和 inline-end 值之前。这样做可以提高代码的一致性，与其他方向属性（如 padding 和 border）的顺序相匹配，使开发者更容易理解和记忆这些属性的使用方式。

• 在 CSS 中，z-index 用于控制元素在垂直方向上的堆叠顺序。z-index 应该被更名为 z-order 或 depth，这样能够更准确地描述其功能。此外，作者还希望 z-index 在所有元素上都能使用，就像在 flex 项目上一样。在 flex 项目的布局中，元素的堆叠顺序由其在 flex 容器中的位置决定，而不受 z-index 影响。

• word-wrap/overflow-wrap 属性用于控制文本是否换行以及如何处理换行。作者认为这两个属性应该被简化，不应该作为单独的属性存在。相反，overflow-wrap 应该成为 white-space 属性的一个关键字，以便提供更一致和更直观的语法。类似于 nowrap（no-wrap）关键字，overflow-wrap 关键字可以用于指定文本不换行或按照某种规则进行换行。

• 在 CSS 中，相邻的元素的边距有时会合并在一起，以减少垂直间距。边距合并可能会导致布局不准确、间距不一致等问题，给开发者带来困扰。作者认为，应该禁止单个框的上边距和下边距自动合并，以避免边距合并问题的发生。

• 在 CSS 中，相邻元素之间的边距会合并在一起，以减少垂直间距。而处理最小/最大高度时，CSS 中存在一些复杂的规则和属性，如 min-height 和 max-height。原文作者认为，可以使用部分边距合并来替代这些复杂的规则。这种方法是指只有一部分边距会合并，而不是全部合并。

• 作者认为表格应该像其他非块级元素（如 flex 容器）一样形成伪元素的层叠上下文。这意味着表格内部的元素在层叠时会受到表格本身的影响，而不会与其他元素的层叠产生冲突。这样可以更好地控制表格内部元素的层叠顺序和显示效果，避免不必要的布局问题和冲突。

• currentColor应该保留破折号，即current-color，以保持与其他多词关键字名称的一致性。

• 在CSS中，颜色可以使用预定义的关键字名称或使用十六进制或RGB值来表示。然而，作者认为基于标准 X11 RGB 值的 140 种颜色的扩展颜色表是任意选择的，缺乏一致性和可预测性。作者建议采用一个可预测的颜色命名系统，如CNS，来命名颜色。

• border-radius 应该是 corner-radius。

• 通常情况下，当设置相对偏移属性的相反属性（例如left+right）时，替换元素会对齐到起始位置。然而，作者认为替换元素应该在相反偏移属性被设置时进行拉伸，以填充可用空间。

• hyphens属性应该被称为hyphenate。之所以称为hyphens，是因为XSL:FO反对使用hyphenate这个名称。

• rgba()和hsla()不应该存在，而是应该在rgb()和hsl()中添加一个可选的第四个参数（并且alpha值应该使用与R、G和B或S和L相同的格式）。

• 在CSS中，后代选择器用于选择某个元素的后代元素，而兄弟选择器用于选择与某个元素有相同父元素的后续兄弟元素。然而，作者认为应该使用>>作为后代选择器的符号，以表示父子关系，而使用++作为兄弟选择器的符号，以表示兄弟关系。

• *-blend-mode属性应该被简化为*-blend

• Unicode 命名范围的语法应与 CSS 的其他部分保持一致，如 u0001-u00c8。

• 作者认为Unicode 命名范围不应该有自己独立的标记处理方式，因为这导致了在处理选择器或Unicode 命名范围时需要进行复杂的标记处理。作者认为这种标记处理的妥协方法是糟糕的，因为它增加了代码的复杂性，并可能导致错误和混淆。

• 在CSS中，font-family用于指定字体的名称或字体族名。然而，作者认为font-family应该要求字体名称使用引号括起来，以提高代码的一致性和可读性。当前的规则处理未引用的字体名称可能会导致解析字体时的歧义，需要额外的字体大小值来消除这种歧义。作者认为这种规则处理方式是愚蠢的，因为它增加了解析字体的复杂性，并可能导致错误和产生混淆。

• Flexbox在flex-basis和width/height的处理上应该更加简洁。也许可以这样处理：如果width/height为auto，则使用flex-basis；否则，将width/height作为不可变尺寸。这样处理可以使min/max width/height的行为符合通用定义。

• 当设置了table-layout为fixed，并且width为auto时，表格应该填充其可用空间，并且列应该采用固定布局。

• 考虑到对于writing-mode的最新更改，text-orientation属性的初始值应该设置为upright。

• @import规则存在一些问题。首先，它总是需要访问网络，即使导入的样式表已经被缓存。除非你显式地指定缓存头部，否则每次使用@import规则都会导致网络请求。其次，对于每个导入的样式表，@import规则都会创建一个新的CSSStyleSheet对象，即使这些样式表是相同的。这可能导致重复的样式表对象被创建，浪费了内存和性能。因此，作者认为@import规则应该改进，具体做法是更积极地基于URL进行去重，避免重复的网络请求，并允许共享样式表对象，以节省资源并提高性能。这样可以减少网络请求次数，加快页面加载速度，并优化内存使用。

• 作者认为选择器在处理未知或无效的部分时存在问题。当前的处理方式是，当选择器中存在未知或无效的部分时，整个选择器都会被忽略，这可能导致样式无法正确应用。

  作者建议的改进是，在顶层逗号处拆分选择器，并且只忽略未知或无效的部分，而保留其他有效的部分。这样可以提高选择器的兼容性，使得即使在选择器中存在未知或无效的部分，仍然可以正确应用其他有效的样式。

  通过这种改进，可以增强选择器的未来兼容性，使得在新的CSS规范中引入新的选择器语法时，仍然能够正确处理已有的选择器，并且不会因为部分无效而导致整个选择器被忽略。

• 一开始就应该将 :link 伪类选择器的语义定义为 :any-link，即选择任何链接，无论其是否已被访问。这样可以更加一致和直观地表示选择器的含义，而不需要区分链接是否已被访问。

• 作者认为在设置flex属性时，应该允许使用fr单位来表示flex的比例，以提供更灵活和直观的布局控制。这样可以更方便地调整元素的大小，并确保元素在弹性容器中的比例关系得到正确表达。

• display属性应该被称为display-type。这是因为display属性实际上是用来确定元素的布局类型，而不仅仅是控制元素的显示方式。通过将其改为display-type，可以更准确地描述该属性的作用和目的。

• 列表样式属性应该被称为marker-style。这是因为list-style属性实际上用于设置列表项的标记符号样式，而不仅仅是列表的样式。通过将其改为marker-style，可以更准确地描述该属性的作用和目的。

  此外，作者还建议将list-item重命名为marked-block或其他名称。这是因为list-item用于定义列表项的样式，但其名称可能不够直观。

• text-overflow属性应该在任何情况下都生效，而不应该依赖于overflow属性的设置。无论overflow属性的值是什么，文本溢出时都应该能够根据text-overflow属性的设置进行处理。

• 当使用百分比值作为line-height的值时，应该将其计算为等效的数值形式。这样可以确保line-height属性在继承时以百分比的形式进行计算，而不是作为长度进行计算。

• 应该将 ::placeholder 更改为 ::placeholder-text，以更准确地描述该伪元素的作用，避免与其他可能与 "placeholder" 相关的概念混淆。

• 当使用 overflow: scroll 属性时，应该引入一个新的层叠上下文。这样可以确保具有 overflow: scroll 属性的元素在层叠顺序上独立于其父元素和其他兄弟元素。这样可以避免在滚动元素时出现意外的遮挡或显示问题。

• size应该是width和height的简写形式，而不是用于定义打印页面尺寸的@page 属性。这样可以使代码更简洁和直观，更符合其他CSS属性的命名约定。

• 在CSS的网格布局中，使用关键字（例如span）和标识符（例如数字）来定义网格项的大小和位置。关键字通常用于指定网格项跨越的网格轨道数量，而标识符用于指定具体的网格轨道索引。

  作者的观点是，混合使用关键字和标识符可能会导致语义混乱和代码的可读性下降。为了解决这个问题，可以考虑使用函数表示法，例如span(2)，来明确指定网格项跨越的网格轨道数量。

  通过使用函数表示法，可以更清晰地表达网格项的大小和位置，避免混淆和歧义。

• CSS中不应该允许在几乎所有地方都可以使用注释（HTML基本上只允许在内容所在的位置使用注释），因为这使得注释在对象模型中基本上无法表示，从而使得直接在对象模型上构建编辑功能成为不可能。

• 在Flexbox中，对齐属性应该与书写模式（writing-mode）相关，而不是与 flex-flow 相关，因此可以使用比较容易理解的名称，如 align-inline-* 和 align-block-*。

• 在CSS中，shape-outside属性用于定义元素的外部形状，以便文本和其他内容可以环绕该形状进行布局。然而，作者认为shape-outside这个名称可能会导致误解，因为人们可能会错误地认为该属性不仅定义外部形状，还会剪裁内容。

  作者建议在命名时使用wrap-前缀，以更明确地表示该属性的作用是将内容包裹在指定的形状中。这样可以避免误解，并使属性的作用更加清晰和直观。

• 在CSS中，!important是用于提高样式优先级的声明。它可以覆盖其他样式规则，确保特定样式被应用。作者建议使用其他方法来提高样式的优先级，或者使用更明确和清晰的命名规则，因为对工程师来说，这会被理解为"不重要"。