如果有人发明时间机器，那应该将这些错误纠正，不然可把前端程序猿们给还惨了。大家一起看看都有哪些CSS规则应该完善。

CSS设计中的错误大整理！ 随笔

SRE实战 互联网时代守护先锋，助力企业售后服务体系运筹帷幄！一键直达领取阿里云限量特价优惠。

(CSS 代码)

 

  • white-space: nowrap 应该 white-space: no-wrap

并且不应添加换行符行为 white-space

vertical-align不应该适用于表格单元格。

相反，CSS3对齐属性应存在于级别1中。

 

  • vertical-align: middle应该text-middle还是x-middle因为它不是真正在中间，这样的名字会更好地描述它做什么。

     

  • 应该计算百分比高度，fill-available而不是在自动情况下未定义。

表布局应该是理智的。

 

  • Box-sizing应该是border-box默认的。

     

  • background-size一个值应该复制它的值，而不是默认第二个值auto。同上translate()。

     

  • background-position和border-spacing（所有2轴属性）应首先采用* vertical *，以匹配4方向属性margin。

类似的4值短序margin应该逆时针方向

（因此内联起始值在块起始值之前）。

 

  • z-index应该调用z-order或者depth应该只对所有元素起作用（就像在flex项目上一样）。

     

  • word-wrap/ overflow-wrap不应该存在。相反，overflow-wrap应该是'white-space'上的关键字，如nowrap（no-wrap）。

     

  • 永远不应允许盒子的顶部和底部边缘自动折叠在一起，因为这是所有边缘折叠邪恶的根源。

    边缘部分崩溃而不是奇怪的规则来处理最小/最大高度？

     

  • 表（与其他非块一样，例如flex容器）应该形成伪堆叠上下文。

     

  • 该currentcolor关键字应该有一个破折号current-color。应该有一个可预测的颜色命名系统，而不是任意的X11名称。

 

  • border-radius本来应该的corner-radius。

     

  • 当设置相反的偏移属性（例如，左+右）时，绝对定位的替换元素应该伸展，而不是开始对齐。

 

  • hyphens应该调用该属性hyphenate。（这是hyphens因为XSL：FO人反对hyphenate。）

     

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

     

  • 后代组合应该是»和间接兄弟组合应该是++，所以选择者的ascii艺术之间有一些逻辑关系

     

  • 在*-blend-mode性能应刚去过的*-blend

 

  • unicode范围的语法应与CSS的其余部分一致，如u0001-u00c8。Unicode范围不应该有自己的标记化或令牌处理的单独的微合成语法。标记化黑客需要使选择器（例如，u + a）处理作为unicode范围标记的事物，或使unicode范围处理其他大范围的标记（数字和维度有和没有科学记数法，标识符，+）都很可怕

 

  • font-family应该要求引用字体名称（就像来自“外部” CSS的所有其他值一样）。处理不带引号的字体名称的规则使解析变得font愚蠢，因为它需要font-size消除歧义的值。

 

  • 对于弹性基础与宽度/高度的关系，Flexbox应该不那么疯狂了。也许：如果宽度/高度是auto，使用flex-basis; 否则，坚持宽度/高度作为不灵活的大小。（这也使得最小/最大宽度/高度行为超出了通用定义。）

     

  • ：empty应该是：void，并且：empty应该选择仅包含空格的项目在规范中修复，等待实现检查Web-compat ...

     

  • table-layout: fixed; width: auto 应该导致具有固定布局列的填充表。

     

  • “文本方向”应该具有upright初始值（给定“写入模式”的最新更改）。

     

  • @import规则要求（a）始终命中网络，除非您指定缓存头，并且（b）为每次导入构造新的CSSStyleSheet对象，即使它们是相同的。它应该有更积极的基于URL的重复数据删除并允许共享样式表对象。

     

  • 选择者有可怕的未来证明。我们应该拆分顶级逗号，只忽略未知/无效段，而不是整个事件。

     

  • :link应该一直有:any-link语义。

     

  • flex速记（和flex-shrink和flex-growlonghands）应该接受fr单元，而不是裸露数字来表示挠曲馏分。

 

  • display应该调用该属性display-type。

 

  • list-style属性应该叫marker-style，并list-item更名为marked-block或东西。

 

  • 'text-overflow'属性应始终适用，而不是依赖于 overflow

     

  • line-height：<percentage>应计算到等效的行高：<number>，以便它有效地继承百分比而不是长度

     

  • ::placeholder应该::placeholder-text而且:placeholder-shown应该是:placeholder

     

  • 'overflow：scroll'应该引入堆叠上下文

     

  • size应该是一个简写，width而height不是具有不同定义的@page属性

     

  • 我们可能应该避免在网格属性中使用ident混合关键字（span），可能使用功能表示法（如span(2)）。

     

  • CSS中基本上不应该允许注释（与HTML相比，基本上只允许它们在内容的位置），因为它使得它们在对象模型中基本上不可表示，这反过来使得直接在对象模型之上进行构建编辑不可能

     

  • Flexbox中的对齐属性应该是写入模式相对的，而不是相对于flex-flow的，因此可以具有合理可理解的名称，如align-inline- *和align-block- *。

扫码关注我们
微信号：SRE实战
拒绝背锅 运筹帷幄