“喂，哪个谁，就是你，说你呢，前端修个页面，样式乱了”

“我不会呀，要不你先排查一下”

“怎么前端不会CSS？”

“前端一定要会CSS么？”

此处省略一万字......，我记得尤大的微信签名是：不会搞艺术的程序员不是好设计师”，可见高手一般也是要有“美感”的，做为程序员，我们也要向设计师之路前进，最快捷的方式是？“学好CSS，走遍天下，都不怕”。在“终端”普及的年代（也就是网路上常说的“大前端”），前端的要经历的复杂知识点，让好多人望洋兴叹。深度，深度，广度，广度，一样儿都不可落下，所以这年头还是学点CSS吧，说不定还真用的上，这也是一门竞争力嘛。下月如果去杭州出差，要赶紧找大漠喝喝酒压压惊，再聊聊CSS的人生经验。

最近因为一道问题差点引发了一次血案，工作这么多年，我终于写到了职业生涯里最多的CSS代码，也出现了修复一个问题从而引发另外两个问题的尴尬局面，想来这排版为什么这么难呢。这个小问题是关于移动端上1px像素的问题，在网路上也找了比较多的答案，虽然在大部分机型上都可以，却引发了另一个问题，“锤子手机上线没了”，锤子，还真搞了个锤子。

代码很简单，用了after伪类，在每个容器元素最后描述一个线：

&:after
  content "";
  display block;
  position absolute //处理分割线不通栏
  left 10px
  bottom 1px
  height 1px
  width calc(100% - 10px)
  background #d9d9d9
  clear both;
  transform scaleY(0.5)            
  -webkit-transform-origin: 0 top            
  -webkit-transform scaleY(.5)

一般最后一个容器元素就不要线了：

&:last-child            
    &:after
       content "";
       display block;
       height 0px;

其实，这段代码看起来并没有问题，在别的地方也能很好的工作，但是在我写的那个容器元素里，其他设备都可以，就锤子手机无法出现那一条线，比较蛋疼的是查了一个上午也无法定位原因。但是，我知道应该是我某处CSS写的不对，引发的这个问题。那么怎么办呢？分析问题呗，看起来，应该是容器元素的高度问题，难道是内边距在安卓上受到了影响，修改了之后，发现还真是。虽然，我还是不明白，为什么会这样。

说起这个又关于能力论的问题了，广度和深度，就是一把矛盾，在有限的时间里做正确的事情才最重要。在技术生涯的头几年，深度还是非常重要的，过于追求广度，是一件很痛苦的事情。在上升期，你应该要好好研究一下自己的方向。在不需要造轮子的小厂，CSS会要求你应该更熟练的掌握，因为页面都需要你来做。在需要造轮子的大厂，CSS也更会要求你应该熟练，因为你不是前端而是终端工程师，你面向终端进行开发跨平台的应用。这就是，目前自己职业生涯里很尴尬的地方。

走偏了一些，因为大量的时间去研究了Hybrid，Weex这样的动态化技术，深度是你需要具备至少两门语言，JavaScript和任意其一Native，自然在有限的时间里忽略了CSS，导致在业务产出上慢了很多。回过头来再看，现在的CSS技术已经比之前多了大量需要学习特性，移动端上的兼容性问题，不比PC少，可能还更难解决。安卓的碎片化，让我痛苦了好一阵，但是没办法，硬着头皮也要上，尽快落地，拿到结果，是我厂的结果导向要求之一。

所以少年，你如果还是在跟用户界面打交道，还是老老实实的学习好CSS吧。咱们前端界其实也有一个不好的鄙视链，Vue和React互相鄙视，Vue和React同时鄙视jQuery，写Node.js的鄙视写Web JavaScript的，写JavaScript的同时鄙视只写CSS的。我看啊，也别谁鄙视谁了，它们都应该是一个整体，虽然很多公司为了协作顺畅，独立出来了一个UED部门，专门制作页面，提供给写JavaScript的来组装页面，这是公司之道，而个人应该要重视全面发展与均衡体系。以前读书时，偏科就是很吃亏的。

没什么过不去的，努力一些，学点CSS吧。

你身边如果有朋友对混合领域（跨技术栈）或全栈，编程感悟感兴趣，可以转发给他们看哦，^_^先谢过啦。

更多精彩内容可关注我的个人微信公众号：搜索fed-talk或者扫描下列二维码，也欢迎您将它分享给自己的朋友。