转载

学习 CSS 的乐趣

关于前端，很多分享都是JS的，很少看见有人来讲一讲自己学习CSS的心得。说实话，做为一个JS，iOS，Python技术栈的童鞋，我是很少能接触到CSS的。后来，因为工作的需要，这也算是一个机会吧，可以把这一个短缺补上，“你，一个前端，难道不懂CSS？”。这是大多数人的“疑问”，是的，我就不懂了。

为此我买了一本CSS魔法兄的《CSS揭秘》，下载了个Github的Atom编辑器，后来才发现这路子迈的有些大，《CSS揭秘》是本好书，大量讲了CSS3.0的实践和经验。入门，还是有一点点门槛，因为很多属性不认识，只好去MDN上查了。前端的童鞋们，一定要保存起来MDN，大量的知识点可以在这里查到（ https://developer.mozilla.org/zh-CN/ ）。

最开始我没学布局，而是从数值开始，也就是单位：px em rem，为什么我只去了解这三个属性呢，因为目前来看，实际上应用最多的可能还是px和rem。px我想大家都有了解，做为一个虚拟长度单位，实际和设备的物理单位有关，换句话说，你写了多少，那就是多少。而em，我所理解的是跟父元素有关系的相对单位，如果你的父元素设置了font-size: 20px，而本身元素设置了font-size: 0.5em的话，最终换算的结果，那就是10px。当然rem的特点那就是指定了根元素的换算规则，这样所有换算结果只会有一个参照物。

在理解了这些单位数值之后，我才开始去看合模型。我们知道网页实际上就是一个排版系统，肯定存在着外边距，内边距，宽度，高度，边框等。

https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Box_model

这些属性可以很好的描述一个区域的位置关系，想象看，当每个区域都用这样的描述来阐明位置关系之后，元素与元素之前，岂不是可以很自然的排列组合出来。

（插一个题外话：iOS用了另外一种方式来描述布局，以前在固定320时代，大家直接使用固定的view.frame来描述位置。后来随着设备的屏幕尺寸多样性，一直过度到了约束布局，也就是用一组描述来定义两个元素之间的关系。好比同时存在A，B两个元素，如果想描述A和B之间的间距，你得描述A在B的左侧10，B在A的右侧10，这样看起来CSS的布局能力比这要强大很多。）

在有了合模型之后还不够，我们还得学习一下布局方式，CSS提供了浮动式布局，位置/定位式布局，Flexbox布局，Grids网格布局（注明：来自MDN）。

因为我主要做移动端，所以比较重点的学习了Flex布局，最开始的时候对于名称，我是有些困惑的，这个布局方式，有人叫Flex，又有人叫Flexbox，后来去网上搜索了一下，这两个东西的区别，且看知乎： https://www.zhihu.com/question/22991944 。

当然我用的是display:flex，就且称之为flex布局吧。先上flex的MDN资料： https://developer.mozilla.org/en-US/docs/Web/CSS/flex ，再上flex在浏览器中的兼容性列表：

学习 CSS 的乐趣

这是个好事情，移动端可以放心的使用，在了解了浮动和定位型的布局方式之后，且放一边，专心去看了flex的资料，学习它的布局方式。它定义了好几个属性来描述方向，排列位置，对其方式等，实际常用的也就是那么几个，用久了也就理解了。（很细节的东西就不说了，大家自己去MDN上学习吧）

为了还原一个设计稿，它应该还有很多其他的元素在，比如颜色，字体大小，背景，适配，圆角等，最开始我们的“艺术家”非要和我较劲这0.5px的适配问题，后来我查了资料，专门讲适配border 1px像素的问题，用缩放scale这个属性解决了这个问题。看起来还是经验不足的问题，很多解决方法确实不是很清楚。

CSS3还提供了强大的动画能力，学动画一开始最好先不要看属性。PS：当然，更高级的动画我也想不出来解决思路。动画，一般情况下，是逐帧的，有进入，也有离开，这么一个过程。就好比，你用N张图，来播放一个人跑步的动作，那实际上每一帧上的图片，都是人在“跑”这个状态下的每一个动作，然后连续播放，也就形成了动画。

虽然CSS给大家提供了一些，比如缩放，旋转，移动之类的属性，如果只是写写，形态上是很生硬的。我们想流畅的播出来缩放，那么就要把缩放的过程，分解为帧，逐步播放，这就是动画的道理。CSS3的好处就是，只需要来写描述，比如指定duration，指定timing，然后内核帮我们来处理动画，不需要你用更底层的方式来处理动画帧，这简单了很多。

这小几个月里，应该是我的职业生涯里，写CSS做页面最多的时候。当然，后续也会有页面的业务需求，我并不排斥，因为我认识到接触一个对我来说全新的领域，是有趣味的，CSS的魅力，我想不是在页面上。而是，在了解这些之后，可以做一些更有趣的事情，比如用CSS来做一些前置动画的研究思路Demo，我只说思路，很多东西，有了思路用其他任何语言都可以实现。既然CSS在于排版，而现在的移动端动态技术，比如Weex就支持Flex布局，以及一些其他的CSS属性，那么是不是可以迁移更多的CSS属性到Weex上呢？

想象一下，如果我对CSS属性都不了解，那还搞个鬼。

从很多公开的资料来看， CSS的发展有很多工程上的解决方案，比如Less，又比如 All in JavaScript。当然CSS肯定还是CSS本身，而这些解决方案，只是在整个技术体系里的工程化的一方面。有协作，肯定就需要维护，而维护一般，从阅读，抽象上来解决问题。阅读，是代码的可读性强，大家从命名上可以直观的感受到。而抽象，则是从代码的复用来考虑。比如我们写一个color:#fff，这个白色在很多地方都有用到，那么是不是可以将它写成一个常量，这样在很多地方直接引用这个常量，就好了嘛，修改的时候，也只需要改一个地方，这可能就是在工程上那些解决方案的魅力所在吧。All in JavaScript 要追溯可能和 Web Component有关系，（历史，我们就不谈了）发扬光大还是依赖React框架的流行。

沉下心来，人生虽然很长，时间会很快过去。

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

学习 CSS 的乐趣