CSS
工作组在其官方WIKI总结了这些年CSS
在设计上犯的46条失误。这些错误大体可以概括为5类:
-
属性
key
、value
设计失误 -
布局、对齐上的设计失误
-
颜色相关的失误
-
选择器设计失误
本文会选一些我觉得有意思的失误来讲讲。完整的失误列表见上述官方WIKI。
欢迎围观朋友圈、加入人类高质量前端交流群,带飞
!important语法
!important
语法用来增加样式的权重,毕竟,感叹号通常表达强调 的意思。但在编程语言中,!
通常是取反的意思,比如:
js
const isValid = true;
!isValid // false
初次接触CSS
的工程师很可能会觉得!important
是不important的意思,这与该语法实际想表达的意思完全相反。
所以,工作组认为!important
是个糟糕的语法。
z-index语法
z-index
属性用于设置定位元素及其后代元素或flex
元素的Z轴
层叠顺序,z-index
较大的元素会叠在较小元素的上面。
在编程语言中,index
是索引 的意思,并没有表达出层叠 的意思。所以,工作组认为叫z-order
或干脆叫depth
(深度)会更好。
同时,他们也认为,这个属性应该对所有元素有效(而不是只对定位元素及其后代,以及flex
元素有效)。
单个元素margin的塌陷
margin坍塌 是CSS
中的基础特性,假设有2个上下重叠的块级元素:
-
上面的元素
margin-bottom
为20px -
下面元素
margin-top
为30px
按照直觉来看,他们之间的margin
应该是50px(20px + 30px),但是由于margin坍塌 ,他们之间的margin
为其中较大的值(30px)。
上面是2个块级元素之间的margin坍塌。
对于单个块级元素,也存在margin坍塌 ------ 如果一个元素内部没有内容,或者它的内容被清除(clear
)了,那么这个元素的上下margin
会发生塌陷。
这意味着,即使你为元素的顶部和底部都设置了margin
,但实际上他们会合并成一个(值等于两者中的最大者,而不是它们的总和)。
这种塌陷行为可能会导致一些让人懵逼的布局问题。比如,你试图通过增加一个元素的margin-bottom
来增加它下面的空间,但不起作用,可能就是因为增加的 margin
塌陷掉了。
所以,CSS
工作组认为这不是个好设计。
rgb与rgba
rgba
与hsla
都是设置颜色的属性,相比于rgb
与hsl
,他们还可以设置alpha
值(透明度)。
所以,为啥不直接让rgb
与hsl
能够接收第四个参数(alpha
值)呢?工作组很费解 自己当初咋想的。
border-radius
border-radius
直译为边界半径 ,当初应该取名叫corner-radius
(拐角半径)。
毕竟,这就是设置元素拐角处圆角的半径的啊~~
绝对定位的替换元素
所谓替换元素 ,是指外观和尺寸由外部资源决定的元素,比如:
-
img
-
object
(嵌入的对象,如Flash
动画) -
video
-
iframe
工作组认为,当替换元素被绝对定位时,偏移属性不应该改变元素的位置,而应该改变尺寸。
比如,当对绝对定位的img
设置left: 20px; right: 20px;
,那么他应该被拉伸到从左侧20px到右侧20px 的长度,而不是移动到距离左侧20px
的位置。
这个规则对于响应式布局是非常有用的,因为它允许元素自动调整其大小以适应不同的视口宽度。
总结
上面只是挑了几个我觉得有意思的失误来聊。除此之外,还有很多是使用习惯上的设计失误,个人认为比较主观。比如:
- 子孙选择器应该使用
>>
符号,即:
css
// 当前的子孙选择器
div p {
color: green;
}
// 期望的子孙选择器
div >> p {
color: green;
}
- 兄弟选择器应该用
++
符号,即:
css
// 当前的兄弟选择器
div ~ p {
color: green;
}
// 期望的兄弟选择器
div ++ p {
color: green;
}
不知道上述改动,你能接受么?