文章摘要
这篇文章总结了CSS设计中的一些缺陷和改进建议,包括属性命名不合理(如white-space: nowrap应改为no-wrap)、默认值设置不当(如box-sizing应默认为border-box)、语法逻辑不一致(如百分比高度计算规则)等问题,并提出了更合理的替代方案。
文章总结
CSS设计缺陷不完全清单 [CSS工作组维基]
以下是CSS规范设计中值得商榷的部分(假设有时光机可以修正的话:P):
核心语法问题:
- 属性命名欠妥:
* white-space: nowrap应命名为no-wrap
* animation-iteration-count简化为animation-count(保持与column-count一致)
* vertical-align: middle应改为text-middle或x-middle以准确描述其行为
* z-index更适合命名为z-order或depth
布局系统缺陷:
- 盒模型:
* 默认应采用border-box盒模型
* 百分比高度在auto情况下应基于fill-available计算
- 表格布局需要更合理的实现
- 绝对定位元素在设置对立偏移属性时应自动拉伸
属性设计问题:
- 背景相关:
* background-size单值时应自动复制而非默认auto
* background-repeat默认值应考虑改为no-repeat
- 文本处理:
* word-wrap/overflow-wrap应作为white-space的关键字
* hyphens属性本应命名为hyphenate
- 颜色系统:
* 应采用可预测的命名系统(如CNS)而非X11颜色名
* currentColor应保留连字符为current-color
语法规范问题:
- 选择器:
* 后代组合器应用»,间接兄弟组合器用++
* 应增强选择器的未来兼容性设计
- 函数参数:
* rgb()/hsl()应通过可选第四参数支持透明度
* translate()单值时应自动复制
其他值得注意的问题:
- 边距折叠机制是"万恶之源",单个盒模型的上下边距不应自动折叠
- @import规则应支持更积极的URL去重
- 注释系统设计导致难以构建基于对象模型的编辑器
- !important声明方式容易产生歧义
(注:已过滤部分技术细节和已修复项,保留核心设计争议点)
评论总结
以下是评论内容的总结:
设计决策缺乏用户研究
- edent批评许多计算设计选择仅基于个人观点,缺乏广泛社区咨询
"So many weird design choices...without considering other viewpoints"
"a tiny cabal engaging in groupthink often produces unhelpful results"
- edent批评许多计算设计选择仅基于个人观点,缺乏广泛社区咨询
CSS具体问题争议
- nfw2反对标题样式统一性:
"h1, h2, h3 should not have different styles...leads to broken accessibility" - groby_b批评!important设计:
"'one' is often a mistake"(指单一优先级设计) - Devasta建议简化样式属性语法:
"You should be able to write "
- nfw2反对标题样式统一性:
历史遗留问题反思
- anonymars嘲讽表格布局的反复:
"web's smug collective declaration that tables were dead" - felipc批评标准制定缓慢:
"slowness in the early 2010s to provide badly needed new functionality"
- anonymars嘲讽表格布局的反复:
改进建议
- silverwind提议严格模式:
"opt-in 'strict mode' for CSS that fixes all these issues" - eviks建议版本控制:
"deal with...CSS versioning/features where you can opt into..."
- silverwind提议严格模式:
开发者困惑点
- 3eb7988a1663吐槽flexbox术语:
"align vs justify...Could not have used something like main-axis?" - nrhrjrjrjtntbt寻求边距折叠解释:
"Didnt know it was a thing until now but ive seen it happen"
- 3eb7988a1663吐槽flexbox术语:
技术细节争议
- Izkata反驳绝对定位元素行为:
"They do with left+right, and have done this for a very long time" - TZubiri质疑单位设计:
"units for pixels and centimeters, despite not being able to reliably control"
- Izkata反驳绝对定位元素行为:
关键矛盾集中在:设计决策过程透明度(8条)、具体语法问题(6条)、历史包袱处理(4条)。开发者普遍期待更直观的API设计和更灵活的标准演进机制。