让CSS官方后悔的一些决定

CSS工作组在其官方WIKI总结了这些年CSS在设计上犯的46条失误。这些错误大体可以概括为5类:

  1. 属性keyvalue设计失误

  2. 布局、对齐上的设计失误

  3. 颜色相关的失误

  4. 选择器设计失误

本文会选一些我觉得有意思的失误来讲讲。完整的失误列表见上述官方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

rgbahsla都是设置颜色的属性,相比于rgbhsl,他们还可以设置alpha值(透明度)。

所以,为啥不直接让rgbhsl能够接收第四个参数(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;
}

不知道上述改动,你能接受么?

相关推荐
懒大王爱吃狼43 分钟前
Python教程:python枚举类定义和使用
开发语言·前端·javascript·python·python基础·python编程·python书籍
逐·風5 小时前
unity关于自定义渲染、内存管理、性能调优、复杂物理模拟、并行计算以及插件开发
前端·unity·c#
Devil枫5 小时前
Vue 3 单元测试与E2E测试
前端·vue.js·单元测试
尚梦6 小时前
uni-app 封装刘海状态栏(适用小程序, h5, 头条小程序)
前端·小程序·uni-app
GIS程序媛—椰子6 小时前
【Vue 全家桶】6、vue-router 路由(更新中)
前端·vue.js
前端青山7 小时前
Node.js-增强 API 安全性和性能优化
开发语言·前端·javascript·性能优化·前端框架·node.js
毕业设计制作和分享7 小时前
ssm《数据库系统原理》课程平台的设计与实现+vue
前端·数据库·vue.js·oracle·mybatis
清灵xmf9 小时前
在 Vue 中实现与优化轮询技术
前端·javascript·vue·轮询
大佩梨9 小时前
VUE+Vite之环境文件配置及使用环境变量
前端
GDAL9 小时前
npm入门教程1:npm简介
前端·npm·node.js