前端为什么这么麻烦之CSS

本文章适合如下人员：
.前端吐槽人员
.对前端好奇的人员
.对前端不感冒，但是工作需要和前端组队

很多人对于CSS的印象可能是简单的小玩意，随便看一遍W3School就算入门了。但是我要郑重声明，这么多年来CSS作为一个前端招聘要求中出现概率100%，前端三大基础的地位毫不动摇，它绝不是向新手想象中那么简单。

会给人这种错觉大概是因为CSS的语法设计的极为简洁易懂（多少小白是因为先使用了CSS觉得简单才决定投入前端行业的？）但是简洁不代表简单。再则CSS的使用极为灵活，一个页面的实现效果没有固定答案，不同写法都能写出视觉效果看起来一样的页面。如果是个移动端的纯静态页面，直接放个图片上去都可以代替。

既然这样，为什么我们还要写高质量的CSS?

因为“资源”，浏览器的资源是有限的，JS代表的页面逻辑和业务逻辑把控起来远不如CSS可控。CSS在完成页面布局的同时还肩负着节省浏览器资源，提高页面加载速度的作用。可以简单粗暴的认为，同样的效果如果CSS和JavaScript都能实现，那么CSS要比JavaScript节省很多资源；同样的图形如果CSS和图片都能实现，那么CSS比图片也要节省资源。流行一时的“雪碧图”就是这么来的。
CSS3出来之后，因为新特性便于调整元素形状，网上出现了各种开脑洞的教程教导怎么用CSS3画各种图形图标的，icon啊，菱形格背景图啊，国外牛人甚至用无数个div画出狮子，人物画像，星云图等等，配合上动画效果简直炸裂。可以说在CSS画页面的过程中，想象力有多大页面效果就可以有多炫酷。
一个高度可以上升到想象力和创意的技术，是“简单”两个字就足以概括的吗？

---

CSS的麻烦还在于调试，为什么调试比写还麻烦？

因为浏览器没有办法以编程方式确定你写的CSS属性是否会影响显示效果。验证的唯一方法是直接检查页面的外观。

举个例子：假如需要做一个网站，适配设备包括PC,笔记本，pad以及手机。一般例行的解决方案有两种：

方案一：前后台各来两套，一套适配电脑，pad，一套适配手机。缺点是：前后台和UI工作量都×2，优点是：每套之间各不干扰。

方案二：后台写一套，前端也写一套，自适应各种设备。优点是：只维护一套就行了,缺点是：前端编写、调试、维护都需要小心，通常改一个地方会影响全体。

假如恰好要采用方案二，那么你调试代码可能是如下画风：
小心的修改一个样式属性，然后打开电脑，pad，各种手机等需要兼容的设备，挨个查看效果，如果幸运，你会发现样式都如预期一般生效了；但是大部分时候，运气都休假去了，于是你会发现某个设备的样式似乎跟其它设备不一样，于是继续以上步骤……

对了，不要忘记，各个设备还有不同的浏览器种类以及版本……所以上面说的步骤还要修正一下：电脑，你可能需要打开IE最新版本，查看效果，然后再切换一下浏览器版本查看IE8,9,10,11,再打开chrome，重复步骤，然后是firefox，继续重复，直到查看完所有要求的浏览器和版本；手机的浏览器好一点，但是手机型号多点，绝大部分手机型号只能靠各种办法模拟，少部分才是真机模拟（公司经费有限，不会集齐所有手机）。如果这个过程中，任何一个地方的样式不对，请继续修改一下，然后重复以上步骤，如果修改了一个地方，发现N个设备都完美，只有某个不对，请继续重复以上步骤……直到，你能同时在所有设备和各版本的浏览器中实现预期效果。

所以现在你们能明白，为什么一个项目中，前端们会喋喋不休的追问需要兼容哪些设备哪些浏览器和浏览器的版本，甚至恨不得让产品把这些要求写下来并且加上备注打死不改需求……了吗？因为这些要求直接关系到前端在这个项目中的工作量，身心健康和发量。

哦，你们问我对CSS的看法？如果非要形容，我觉得差不多是这样：课堂上学的是1+1，考试考得是高数，每道题还要求写2种以上解法，最后来道附加题，自由发挥但要有创意，简单大气上档次 ……