让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;
}

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

相关推荐
gqkmiss9 分钟前
Chrome 浏览器 131 版本开发者工具(DevTools)更新内容
前端·chrome·浏览器·chrome devtools
Summer不秃14 分钟前
Flutter之使用mqtt进行连接和信息传输的使用案例
前端·flutter
旭日猎鹰18 分钟前
Flutter踩坑记录(二)-- GestureDetector+Expanded点击无效果
前端·javascript·flutter
Viktor_Ye25 分钟前
高效集成易快报与金蝶应付单的方案
java·前端·数据库
hummhumm27 分钟前
第 25 章 - Golang 项目结构
java·开发语言·前端·后端·python·elasticsearch·golang
乐闻x1 小时前
Vue.js 性能优化指南:掌握 keep-alive 的使用技巧
前端·vue.js·性能优化
一条晒干的咸魚1 小时前
【Web前端】创建我的第一个 Web 表单
服务器·前端·javascript·json·对象·表单
Amd7941 小时前
Nuxt.js 应用中的 webpack:compiled 事件钩子
前端·webpack·开发·编译·nuxt.js·事件·钩子
生椰拿铁You1 小时前
09 —— Webpack搭建开发环境
前端·webpack·node.js
狸克先生2 小时前
如何用AI写小说(二):Gradio 超简单的网页前端交互
前端·人工智能·chatgpt·交互