先说两句闲话，为什么叫再谈呢？因为以前有谈过，请看这里初谈css博客搬过家，请忽略发表时间~

   时间差不多是一年前，那个时候还没有换工作，公司就我一个前端，负责一个项目的所有前端相关，当然，说是这样说，我是没有能力去顾及那么多的，自己懂的或者意识到的东西本身就有限，只是通过一整个项目的折腾，总会意识到一些问题，甚至有时候代码写得自己都忍无可忍，有痛就有领悟，自然就能总结出一些东西，就有了那篇初谈。当时写完之后蛮有成就感的，现在看来还是有很多不足，因为是初谈，为照顾一些初学者，包含了多一些基础的东西，一年过去了，前段时间在团队内部也做了一次css的分享，借此机会再谈谈吧，虽然依旧可能有很多不足~

选择器

   这是css的永恒话题，也是核心话题。但这里如果罗列出来就没意思了，不如大家去看文档~

   元素、类、id、子选择器、后代选择器、兄弟选择器、属性选择器、伪类选择器、伪元素选择器、群组选择器

   在这一堆选择器中，该如何选择呢？老生常谈的东西咱就不多说了，说说在项目中的有益做法。

   首先要明确的是，为什么要用？它是css和html之间沟通的桥梁。既然跟html有关，那么就可以谈谈html，又和什么有关呢？和我们要做的页面有关，好的，那就到了视觉稿。我用一个词来形容看视觉稿的感觉——“庖丁解牛”。什么意思呢？

   它可能包含以下部分：顶部、头部、导航、侧边栏、banner区、列表、底部，以及其他大的区块。

   至少到这里我们能看到什么呢？我们的css能大致划分多少大块，能把“宽度、居中、浮动、文本位置、字体类型、颜色”等剥离出来。

   那么可以再细看，继续找共性，比如“圆角、边框、背景、阴影”等等。

   下面找不同，被我们剥离出来的东西，在哪些区块是有特殊性的？

   这样做的好处是什么？——模块化，增强复用性。我们不需要每个地方用一套独立的样式，共同的规则书写很多遍。可以把共同的部分写成一个公共类，特殊的规则再另外定义，此所谓“基类 扩展类 实例类”。

   好的，根据页面结构，我们已经成功的把它们拆解了，下面要做好什么呢？——解耦。

   为什么要这么做，首先html的标签是有限的，而且我们要尽量语义化，那么一个页面里面用到相同标签的地方可能就很多，比如h1~h6、ul、p、span等等，如果我们直接用元素选择器来定义规则：

   1、如果我们觉得那个元素可能不合适呢，要换掉，css也要改了

   2、如果要加入一个新的内容，用的是同一种标签却是不同的样式呢？这个时候要重新定义一条规则，或者被迫使用其他的选择器，也许能够暂时达到目的，但灵活性是很差的，万一又有变化，就不起作用了，这就是为什么常常提到可维护性。

   另外，不使用元素选择器也会增加代码的可读性，我们为划分好的不同模块采用不同的命名，增强可读性的前提下，也很好的避免了冲突。

   好，接着说，很多人会谈到嵌套的问题，一般说法是最好不要多于三层或者四层，意义在于哪里呢？这得从css的解析方式说起，它是从最右端往左进行解析的，层过多自然会耗掉更多解析时间，这也同样跟上面说的那个吻合，不仅仅是因为解耦才不使用元素选择器，如果使用元素选择器，特别是在最右一层的话，它会遍历完整个页面中的同类元素，再往上寻找，这显然造成了本来可以避免的问题。

   还有哪些css2.1的选择器可以发挥妙用呢？

   比如：兄弟选择器“+/~”、伪类选择器’:selector’、伪元素选择器’::selector’、群组选择器”.a.b.c”

   相比css2.1，css3新加入的东西的确是让人兴奋的，特别是一些属性选择器和一些伪类、伪元素选择器，能够让我们更加灵活的去控制页面样式，减少给html打的补丁，甚至是限制用户行为，比如selection、resize等。

   Css4选择器？是的，它会在css3的基础之上继续加强，具体不细谈。给出两个链接大家可以去看看。

   css4-selectors

   selectors-4

   以上结合页面的规划，谈了一下，用什么选择器和怎么用，代码怎么组织的问题。

再简单谈谈工具、框架和一些需要注意的点：

   1、用工具可以做什么

   简而言之，提高工作效率

   包括预处理工具less、sass、stylus，编程的方式来写css，有变量、嵌套、函数、条件、算术、词法作用域等等

   Less: https://github.com/less/ http://www.lesscss.net/

   Sass: http://sass-lang.com/ https://github.com/sass/sass

   http://www.w3cplus.com/sassguide/

   Stylus: https://github.com/stylus/stylus http://www.zhangxinxu.com/jq/stylus/

   更多工具:

   http://www.oschina.net/news/22745/8-css-preprocessors-speed

   后处理工具Autoprefixer、Css Grace

   用处

   不改变css原生写法

   IE hack处理兼容

   添加css3前缀

   检查错误

   (哪些误用？例如：float: left/right 或者 position: absolute 后还写上 display: block;更多请戳http://www.zhihu.com/question/20979831)

   CSS Grace https://github.com/cssdream/cssgrace

   Autoprefixer https://github.com/postcss/autoprefixer

   另外还有代码格式化、代码压缩工具等等，都是能够帮助我们写出更优雅的代码。

   谈到工具了，要说的一点是，我们做技术的要敢于、乐于尝试，现在还有很多人习惯于写css，而不去用这些工具，不觉得它们有什么好处，反而觉得学习起来麻烦，还有些朋友，接触一下，知道有变量，可嵌套，其他的觉得太复杂没做深入了解，就直接选择放弃了，前端技术和工具层出不穷，如果是这样一个状态的话，无论是对自己技术的提升，工作方式的优化等等，都是不利的。其实没有想象那么复杂，好处却是大大的。

   2、框架的使用

   或许每个人都能脱口而出的一个是bootstrap。当然，还有其他的框架，我并不是给它打广告。

   为什么要用呢？首先还是节省了时间，不再做重复劳动，然后，它是做过了各种的测试，集大家的力量，在项目中经过考验的，对很多设备和浏览器都适用，并且有它的一套UI设计在里面，这样就可以为我们省去了很多的劳动。

   3、需要注意的点

   a、文件个数和大小，有一个文件就会向服务器发送一个请求，显然，不宜过多，一般以不超过四个为宜，所以，有时候我们在开发过程中可能用到多个文件，发布的时候会进行合并和压缩，就是这个道理。

   b、文件是否有加载的必要？这种情况常见于需要兼容低版本IE，很多人是直接写css hack在文件里面，如果项目比较大，需要用到的代码文件比较多，那显然没有必要为其他浏览器以及高版本浏览器去加载兼容代码。一般倾向于写条件判断语句来选择性加载。

   不过可能会遇到问题，比如IE10不识别，这篇文章里给出了解决方案，大家可以参考一下http://www.stepday.com/topic/?690

Css的出轨

   大家都知道，随着css3的肆虐，很多效果我们不需要用ps来做了，比如border-radius、box-shadow、opacity、filter、text-fill-color、text-stroke、box-reflect等，这让我们只使用代码就能写出很多好看的效果，也增加了灵活性。

   样式性标签淡出历史舞台，如：居中、加粗。

   动效标签css替代，如闪烁、跑马灯。

   联姻js动起来transform、transition、animation

   既然css能做的事情越来越多，越来越灵活，那么不得不说的一个话题就是“纯css”实现，很多年了，高频中枪的有：

   二级导航、tab切换、手风琴、轮播图等。

   那么纯css有什么好处？首先你不会js的话，那肯定是有好处的，这个不说，然后就是，它可能更容易控制，代码文件会更小。当然，凡事皆需根据实际情况权衡，大家自己思考。

“无所不能”的未来

   为什么说它无所不能，先来看看布局：

   适应多终端

   媒体查询Media query、流式Flow、伸缩盒Flexbox、计算布局calc、网格布局Grid、多栏布局Multi columns等等；

   另外，因为一些属性的出现，页面中的元素打破了总是方方正正的形象。几个戴表：transform、border-radius、multiple backgrounds、shapes、appearance、@font-face等等

   形状可以是任意的。字体可以是多样的。 很多东西都不再拘泥于单调的形式，这给我们带来了无限可能，就看你的思维是否被局限住！~

   听说还有pointer-events;will-change;

   还有变量，好吧，说high了。不管它们最终有无，最终能做些什么事情，css都还在向前推进着，或者新的选择器，或者新的属性、属性值。我们能做的，就只有期待！~

   这次就先谈到这里吧，人的认识、思想和方法论都会随着时间的推移，经历的增多发生一些微妙的变化。相信我还会再谈的，那下次见？

建议继续学习：

1. 各浏览器的默认CSS    (阅读：3697)
2. CSS的未来：明智的布局工具终于到来    (阅读：3135)
3. CSS 忍者：安全的 CSS hacks 秘籍    (阅读：2817)
4. 使用CSS框架的优点和缺点    (阅读：2634)
5. 12个很少被人知道的CSS事实    (阅读：2614)
6. 移动网站开发――CSS    (阅读：2218)
7. Github 的 CSS 风格指南    (阅读：1974)
8. CSS 设计理念    (阅读：1905)
9. 前端编码规范（4）—— CSS 和 Sass (SCSS) 规范    (阅读：1715)
10. 初谈怎样更好的去规划CSS    (阅读：889)