“喂,哪个谁,就是你,说你呢,前端修个页面,样式乱了”
“我不会呀,要不你先排查一下”
“怎么前端不会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或者扫描下列二维码,也欢迎您将它分享给自己的朋友。