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是用于进步款式优先级的声明。它能够覆盖其他款式规矩，保证特定款式被运用。作者主张运用其他方法来进步款式的优先级，或许运用更明确和明晰的命名规矩，由于对工程师来说，这会被了解为“不重要”。