前端工程师讨厌写 CSS 是什么心态?

CSS虽然前期学习门槛比较低，但后期学习难度陡增。

甚至擅长C++或者Java之类的程序员在学习CSS时往往都会很不适，其背后的原因是，典型的计算机开发语言看重逻辑思维和抽象能力，但是CSS本身却并无逻辑可言，它看重的是特性间的相互联系和具象能力，而这往往是偏理性的程序员所不擅长的。

国内知名的前端博客“鑫空间-鑫生活”的博主

@张鑫旭

老师在十余年的工作积累中，逐渐形成了一套对于CSS的完整认知体系：在CSS的世界中，CSS并不是一个机械枯燥的语言，它的所有属性都是有血有肉、有着不同个性和身世的个体。不同的个体可以碰撞出不同的火花，激荡出异彩纷呈的故事。

在他编写的“CSS三部曲”的第一本书《CSS世界》的开篇，他脑洞大开地将CSS世界比作一部动漫：

首先，动漫名可以叫作《建筑神域》，讲述一群建筑魔法师为国家存亡惊心动魄战斗的故事。
然后，出现了“Chrome王国”的几位建筑魔法师日常训练的画面。只见名为width的魔法师手持名叫选择器的法器，准确指向称为<div>的最普通的块状建筑魔法石，口中念道：“层叠天星，幻化有形，50%，变！”只听见一声清脆的“啪”，<div>魔法石宽度变成了原来的一半。
然而，width却锁眉摇头，口中喃喃念道：“1毫秒，还不够快，还要再练，不然在和‘IE王国’的战斗中很难占得先机！”。

此时，width突然发现前面1米之处有一块<span>之石，具有class="test"的特殊标记，便立即拿出“法器”选择器，念道：“类名之石，test为名，为我选择，出！”
话音刚落，<span>之石蓝色荧光一闪，明眼人都能看出来，width魔法师和<span>魔法石现在处于契约状态。
width继续念道：“层叠天星，幻化有形，50%，变！”
但<span>魔法石却没有任何变化，此时width一拍自己的脑门，似乎明白了什么，转过头对旁边的display魔法师大声叫道：“小D，这边这边，过来帮个忙……来呀，快点……”
只见display迅速结束自己的练习，屁颠屁颠跑过来：“咋啦？”
width说：“此为内联之石，我无法驾驭，你帮我重塑一下。”
display回道：“小问题！正好，魔法师技能委员会刚通过了我的一个新法术，我给你秀一秀？”
“哟，不错啊，快让我瞅瞅！”
“好嘞！”只见display拿出自己的“法器”，念道：“类名之石，test为名，为我选择，出！”紧接着，“层叠天星，幻化有形，flex，变！”
只听见一声清脆的“啪”，在width和display的合作之下，<span>魔法石宽度也变化了。

“哟，很酷嘛！”width对display竖着大拇指称赞道。
只见display腼腆一笑，小手在面前轻轻一挥：“就算你这么夸我，人家也不会开心的啦……”

从上面的故事中不难看出：

在CSS世界中，HTML是魔法石，选择器就是法器，CSS属性就是魔法师，CSS各种属性值就是魔法师的魔法技能，浏览器则是他们所在的“王国”，“王国”会不断更新法律法规（版本升级），决定是否允许使用新的魔法石（HTML5新标签新属性），是否允许新的魔法师入“国籍”（CSS3新属性），或者允许魔法师使用某些新技能（CSS新的属性值），以及是否舍弃某些旧的魔法技能（如display:run-in）。
操作系统是各个魔法石所在的世界，不同的操作系统代表不同的平行世界，所以CSS世界有这么几个比较大的平行世界，即Windows世界、OS X世界以及移动端的iOS世界和Android世界。
不同世界的浏览器王国的命运还不一样，例如，在OS X世界中，IE王国是不存在的，而Safari王国却异常强大，但在Windows世界中，Safari王国却异常落寞。

以上这一切就构成了完整的CSS世界的“世界观”。

作为讨厌写CSS的前端工程师，尽管看着这样的魔法世界会感到很神奇，但无奈自己就像是个“麻瓜”一样无法融入这庞大的魔法世界，从而感到异常的愤怒。

但是，既然CSS是个“魔法世界”，那么就要用“魔法”来打败“魔法”！

就像张鑫旭老师这样讲CSS世界体系的教学方法，可以培养大家从宏观层面认识与理解CSS的习惯，并且也方便大家更加深刻地记忆这些看似枯燥的代码。

• 2017年12月，《CSS世界》和广大读者见面，以“流”为线索，从结构、内容到美化装饰等方面，深入地讲解前端开发人员需要了解和掌握的CSS知识点，构建除了CSS的世界；

• 2019年10月，《CSS选择器世界》，以CSS选择器的基本概念、优先级、命名、最佳实践以及各伪类选择器的概述和适用场景为技术主线，为CSS开发人员介绍了有竞争力的知识和技能；

• 今年8月，“CSS三部曲”最后一本——《CSS新世界》出版，充分考虑前端开发者的需求，去粗取精，注重细节，以CSS新特性的历史背景为线索，讲解了CSS 3及其之后版本的上百个新特性。

张鑫旭老师在从事IT行业的十多年时间里，参与过大量的Web前端开发项目，也正是凭着这些经历所带来的深刻思考和独特洞见，他创作了蕴含大量从实际项目开发角度出发的“CSS三部曲”。

在谈到所创作的这三部曲时，他建议先阅读《CSS世界》，这是整个CSS世界的基础，《CSS新世界》是在《CSS世界》基础上构建的高楼，而《CSS选择器世界》是整栋大楼的钢筋骨架，所以，建议《CSS选择器世界》在《CSS新世界》之前阅读，或者同时阅读。

探索一条看似和其他编程语言不同的曲径之路是艰辛的。张鑫旭老师坦言，他也曾有过彷徨，有过犹豫，甚至考虑过其他更对自己有价值的领域，但他还是决定坚守本心，记录下了探索之路上的每个角落，他“相信技术的价值，技术强悍事业必然有成”，他这样讲述这段经历：“技术比人情可靠，你所学习的技术知识、积累的细节和经验，日后百分之百可以带来令你欣喜的价值，而且这个价值连绵不绝，越筑越高。因为技术不像人，技术不会欺骗你。”