CSS工作组总结的CSS设计错误
CSS设计中的错误不完整列表
机翻的,稍微的做了整理。文后有原文和链接。
如果有人发明了时光机,那就应该纠正 : P
white-space: nowrap应该是white-space: no-wrap
且换行行为不应添加到空白
动画迭代计数应该是animation-count (像 column-count 一样)
vertical-align 不应应用于表格单元格。相反,CSS3对齐属性应该存在于Level 1中。
vertical-align: middle应该是text-middle或x-middle因为它实际上并不在中间,这样的名称可以更好地描述它的功能。
应根据百分比高度计算 fill-available而不是在自动情况下为undefined。
table布局应合理。
box-sizing的默认值应为border-box。
background-size只有一个值时,第二个值应该与该值重复,而不是将第二个值默认为auto,与之有同样问题的还有translate().
background-position和border-spacing(所有2轴属性)的值应首先是“垂直”方向值,以匹配4方向属性,如margin.
这并不是一个错误,因为这对于90年代来说是合理的,但如果background-repeat默认值为no-repeat,会更有帮助。
四值速记(比如margin)的值应该逆时针方向(以便inline-start值位于block-end和inline-end值之前,而不是它们之后)。
z-index应被命名为z-order或depth,并能应用于所有元素(就像处理flex项目一样)。
word-wrap/overflow-wrap不应存在。相反,overflow-wrap应该是white-space上的关键字,如nowrap (no-wrap).
单个box的margin属性,其top,bottom值不应该被允许自动折叠在一起,因为这是所有margin-collapsing罪恶的根源.
Partial collapsing of margins instead of weird rules to handle min/max-heights?
Tables (like other non-blocks, e.g. flex containers) should form pseudo-stacking contexts.
currentColor该保留破折号:current-color,同样,所有其他颜色多词关键字名称也应如此。
There should have been a predictable color naming system (like CNS) instead of the arbitrary X11 names which were eventually adopted.
border-radius 应该是 corner-radius.
Absolutely-positioned replaced elements should stretch when opposite offset properties (e.g. left+right) are set, instead of being start-aligned.
hyphens应为hyphenate
rgba()和hsla()不应存在,rgb()和hsl()应该得到一个可选的第四个参数(alpha值应该使用与R、G和B或S和L相同的格式)。
后代选择器符号应该是»,间接兄弟选择器符号应该是++
*-blend-mode属性应该是*-blend
unicode范围的语法应该与CSS的其他部分保持一致,比如u0001-u00c8。
Unicode ranges should not have had a separate microsyntax with their own tokenization or token handling. The tokenization hacks required either to make selectors (e.g., u+a) handle things that are unicode-range tokens, or make unicode-range handle the other huge range of tokens (numbers and dimensions with and without scientific notation, identifiers, +) are both horrible.
font-family应该要求将字体名称加上引号
:空应该是:void(无效)、和:空应选择仅包含空白的项目固定在规范,正在等待实现检查Web-Flexbox should have been less crazy about flex-basis vs width/height. Perhaps: if width/height is auto, use flex-basis; otherwise, stick with width/height as an inflexible size. (This also makes min/max width/height behavior fall out of the generic definition.)
table-layout: fixed; width: auto should result in a fill-available table with fixed-layout columns.
text-orientation应该有upright作为初始值(考虑到“写入模式”的最新更改)。
The @import rule is required to (a) always hit the network unless you specify cache headers, and (b) construct fresh CSSStyleSheet objects for every import, even if they're identical. It should have had more aggressive URL-based deduping and allowed sharing of stylesheet objects.
选择器具有可怕的未来保护功能。我们应该在顶级逗号上进行拆分,只忽略未知/无效的部分,而不是整个部分。
:link应该有:any-link语义。
flex缩写(flex-shrink和flex-grow)应接受fr单位而不是空数来表示flex分数。
display应为display-type.
list-style应为marker-style,list-item应改名为 marked-block或其它什么。
text-overflow属性应始终适用,而不依赖于overflow属性
line-height: <percentage>应计算为等效值line-height: <number>,以便它有效地以百分比而不是长度继承
::placeholder应该是::placeholder-text。 :placeholder-shown 应该是 :placeholder-shown
overflow: scroll应该引入层叠上下文
width,height应该可以缩写到size属性
我们可能应该避免混合关键字(span)在栅格属性,可能通过使用函数表示法(如span(2)).
在CSS中,注释基本上不应该被允许无处不在(与HTML相比,HTML基本上只允许它们出现在内容所在的地方),因为它使它们在对象模型中基本上不可代表,这反过来又使直接在对象模型之上进行构建编辑变得不可能
Flexbox中的对齐属性应该是相对于写入模式的,而不是相对于flex-flow的,因此可以有合理的可理解名称,如align-inline-* and align-block-*.
shape-outside在某种程度上应该有wrap-
!important不应该这样-这对工程师来说“不重要”。我们应该选择另一种方式来写这个。
原文见:
white-space: nowrap
should bewhite-space: no-wrap
- and line wrapping behavior should not have been added to
white-space
animation-iteration-count
should just have beenanimation-count
(likecolumn-count
!)vertical-align
should not apply to table cells. Instead the CSS3 alignment properties should exist in Level 1.vertical-align: middle
should betext-middle
orx-middle
because it's not really in the middle, and such a name would better describes what it does.- Percentage heights should be calculated against
fill-available
rather than being undefined in auto situations. - Table layout should be sane.
- Box-sizing should be
border-box
by default. background-size
with one value should duplicate its value, not default the second one toauto
. Dittotranslate()
.background-position
andborder-spacing
(all 2-axis properties) should take *vertical* first, to match with the 4-direction properties likemargin
.- Not quite a mistake, because it was a reasonable default for the 90s, but it would be more helpful since then if `background-repeat` defaulted to `no-repeat`.
- The 4-value shorthands like
margin
should go counter-clockwise (so that the inline-start value is before the block-end and inline-end values instead of after them). z-index
should be calledz-order
ordepth
and should Just Work on all elements (like it does on flex items).word-wrap
/overflow-wrap
should not exist. Instead,overflow-wrap
should be a keyword on 'white-space', likenowrap
(no-wrap
).- The top and bottom margins of a single box should never have been allowed to collapse together automatically as this is the root of all margin-collapsing evil.
- Partial collapsing of margins instead of weird rules to handle min/max-heights?
- Tables (like other non-blocks, e.g. flex containers) should form pseudo-stacking contexts.
- The
currentColor
keyword should have retained the dash,current-color
, as originally specified. Likewise all other color multi-word keyword names. - There should have been a predictable color naming system (like CNS) instead of the arbitrary X11 names which were eventually adopted.
border-radius
should have beencorner-radius
.- Absolutely-positioned replaced elements should stretch when opposite offset properties (e.g. left+right) are set, instead of being start-aligned.
- The
hyphens
property should be calledhyphenate
. (It's calledhyphens
because the XSL:FO people objected tohyphenate
.) rgba()
andhsla()
should not exist,rgb()
andhsl()
should have gotten an optional fourth parameter instead (and the alpha value should have used the same format as R, G, and B or S and L).- Descendant combinator should have been
»
and indirect sibling combinator should have been++
, so there's some logical relationships among the selectors' ascii art - The
*-blend-mode
properties should've just been*-blend
- The syntax of unicode ranges should have consistent with the rest of CSS, like
u0001-u00c8
. - Unicode ranges should not have had a separate microsyntax with their own tokenization or token handling. The tokenization hacks required either to make selectors (e.g., u+a) handle things that are unicode-range tokens, or make unicode-range handle the other huge range of tokens (numbers and dimensions with and without scientific notation, identifiers, +) are both horrible.
font-family
should have required the font name to be quoted (like all other values that come from “outside” CSS). The rules for handling unquoted font names make parsingfont
stupid, as it requires afont-size
value for disambiguation.- Flexbox should have been less crazy about
flex-basis
vswidth
/height
. Perhaps: ifwidth
/height
isauto
, useflex-basis
; otherwise, stick withwidth
/height
as an inflexible size. (This also makes min/max width/height behavior fall out of the generic definition.) :empty
should have been:void
, and:empty
should select items that contain only white space FIXED in the spec, waiting for implementations to check for Web-compat…table-layout: fixed; width: auto
should result in a fill-available table with fixed-layout columns.text-orientation
should have hadupright
as the initial value (given the latest changes to 'writing-mode').- The
@import
rule is required to (a) always hit the network unless you specify cache headers, and (b) construct fresh CSSStyleSheet objects for every import, even if they're identical. It should have had more aggressive URL-based deduping and allowed sharing of stylesheet objects. - Selectors have terrible future-proofing. We should have split on top-level commas, and only ignored unknown/invalid segments, not the entire thing.
:link
should have had the:any-link
semantics all along.- The
flex
shorthand (andflex-shrink
andflex-grow
longhands) should acceptfr
units instead of bare numbers to represent flex fractions. - The
display
property should be calleddisplay-type
. - The
list-style
properties should be calledmarker-style
, andlist-item
renamed tomarked-block
or something. - The
text-overflow
property should always apply, not be dependent onoverflow
line-height: <percentage>
should compute to the equivalentline-height: <number>
, so that it effectively inherits as a percentage not a length::placeholder
should be::placeholder-text
and:placeholder-shown
should be:placeholder
overflow: scroll
should introduce a stacking contextsize
should have been a shorthand forwidth
andheight
instead of an@page
property with a different definition- We probably should have avoided mixing keywords (
span
) with idents in the grid properties, possibly by using functional notation (likespan(2)
). - Comments shouldn't have been allowed basically everywhere in CSS (compare to HTML, which basically only allows them where content goes), because it makes them basically unrepresentable in the object model, which in turn makes building editing directly on top of the object model impossible
- The alignment properties in Flexbox should have been writing-mode relative, not flex-flow relative, and thus could have reasonably understandable names like
align-inline-*
andalign-block-*
. shape-outside
should have hadwrap-
in the name somehow, as people assume the shape should also clip the content as inclip-path
.- It shouldn't be
!important
— that reads to engineers as “not important”. We should have picked another way to write this.
CSS工作组本文Wiki链接:
https://wiki.csswg.org/ideas/mistakes
参与讨论