CSS开发者的恐怖故事：!important的诅咒

第一章：初遇!important

昨天review代码时，发现同事写了这样的CSS：

.btn { color: white !important; background: blue !important; }

我的表情瞬间从变成了

第二章：!important的连锁反应

第二天，项目出现了奇怪的现象：

• 所有按钮都变成了蓝色，包括删除按钮（应该是红色的）
• 模态框的关闭按钮文字变成了白色，但背景也是白色的
• 整个团队开始疯狂添加更多的!important来覆盖之前的!important

警告：这会导致CSS特异性核战争！

第三章：!important的终极形态

一周后，我们的CSS变成了这样：

html body div#main.container-fluid section.row div.col-md-8 ul.list-group li.list-group-item.active a.btn.btn-danger { color: white !important; background: red !important !important; }

是的，你没看错，有人甚至写了!important !important...

第四章：救赎之路

最后我们不得不：

1. 召开紧急会议讨论!important的使用规范
2. 给那位同事买了《CSS权威指南》作为"礼物"
3. 在项目里安装了stylelint禁止!important
4. 集体参加了CSS特异性治疗小组

终极教训

记住孩子们：!important就像辣椒酱 - 少量提味，过量毁菜。

——来自一个曾经被!important伤害过的前端开发者