CSS禅意 - 捌莱闲人

标题取自《css禅意花园》一书，还记得当年读此书时的情景，真的是内容和书名一样的优秀，就以此标题作为自己在该文的一种追求吧，尽管我的水平和见解都和Dave Shea相去甚远。该文算是对前两年写页面工作的总结吧，现在比较少关注css了，可能观点有狭隘的地方，同时文中也有一定的思考和理解，也许并不一定特别适合初学者阅读，本人时间有限，也没办法针对具体的知识点做深入的讲解或提供代码示例，所以在阅读过程中如果有不理解的地方，欢迎提问并互相学习交流。

　　当UI设计师给了你一张psd图，在对它进行切图，实现成静态页面并在浏览器上完美展现，这个过程需要用到html和css。本文就从这个过程入手，讲讲相关知识点。

开发前期准备

1. 提取图片
　　UI设计师往往只提供给前端人员一张完整的psd图，甚至对于无用的图层也不清除，这个时候前端就需要自己进行ps，提取所需的图片，并保存到项目图片库中。从我个人体会而言，我是建议前端自己ps的，理由是：
　　- web页面需要根据业务和技术需求选取不同的图片文件格式，而多数设计师并无法完全理解
　　目前主流的图片文件格式依然是jpg、gif、png，这三者的区别应用和这么做的目的可以查看拙文三种图像文件格式的选择
　　- web页面需要考虑性能因素，对一些图片进行sprites贴图处理
　　页面图片的请求数越多，加载就越慢，一些不规则和具有特定业务场景使用的图片可以通过利用sprites技术来减少图片请求数，进而提升性能。sprites图片的制作可以使用一些软件或在线生成，在线生成工具CSS Sprites Generator
　　- 字体图标的选择
　　应用字体图标的好处是能够通过css简单地控制图片的大小、颜色，如果是矢量图标，还可以避免跨平台页面制作导致的图片失真问题。缺点是市面上浏览器对字体图标文件的格式支持不统一，得生成不同格式的文件来进行兼容性处理。推荐一下由阿里巴巴UX部门推出的矢量图标管理网站Iconfont.cn，该网站有丰富的矢量图标可以收藏，并可以在平台上建立项目，实现项目图标应用协作管理。具体应用可以参见该站点的文档帮助。
　　- img or background?
　　 · 从业务角度来说，业务类型的图片适用img标签，而装饰类型的图片适用background定位
　　 · 从seo角度看，需要提升搜索关键字效果的应该使用img标签，反之可得
2. 兼容浏览器版本的决策
　　不同的产品有不同的目标客户群，不同的目标客户群决定项目开发需要注重的浏览器版本兼容。兼容性问题是因为浏览器内核不一致导致，而根本原因是因为在早期，没有统一的标准和规范让浏览器厂商来遵循。在编写代码开始前，应该向产品经理确认该项目需要兼容的最低浏览器版本，这里更多的是指IE浏览器。浏览器版本决定我们可以选择哪些css选择器，应用哪几种布局方式，规避哪些常见的兼容性问题等等。
3. 响应式开发
　　由于智能手机的普及以及网络越来越发达，目前移动端的开发愈发的重要。是针对不同的平台分别定制不同的代码，还是一套代码适应多种平台（即常说的响应式开发）？也是需要团队考虑的方向。响应式开发在设计层面来说，需要考虑UI展示的不同，终端设备交互的差异，在技术层面来说，就是媒体查询+液态图片+流式布局的综合应用。

HTML

　　Html的设计初衷是让用户能在浏览器上更好的地浏览文字，所以会有h1~h6标签用来区别不同标题级别、ul和ol来定义列表种类、p用来表示段落。不同的标签会有不同的默认样式，后者会让页面在浏览器上展示出层次感，便于阅读。

　　Html的标签各有所用，所以开发者在编写html代码的时候，也应该从这一方面入手，让标签做正确的事情，个人认为这也就是语义化提出的初衷。一个html页面，可以从下面几个方面实现语义化：
　　- 让标签做它该做的事情
　　- 尽可能少的代码嵌套
　　一部分开发者写的代码结构嵌套很深，有的时候并不是没有认识到弊端，而是不得已而为之。原因就是对css应用得不够熟练。比如一行文字前面加个小图标这样的场景，实现方式有很多种：
　　· 给文字设置padding-left，用背景图定位的方式
　　· 给文字标签添加:before伪元素选择器，存放图标，定位之
　　· 增加一个空标签来设置图片样式
　　显然，最后一种方式是种反模式，不建议使用。
　　- 去除冗余的标签属性
　　在保证前面两个原则的情况下，通常我们只需要对一个业务模块的最外层标签定义一个钩子（id或者class等等），然后结合css强大的选择器，就可以避免需要给每个标签添加识别属性，进而书写css的尴尬
　　- 添加有意义的属性
　　有时候给一些特定标签添加属性能够让页面更加友好，并有利于seo。比如给img标签添加alt属性、给a标签添加title属性等。
　　- 校验
　　查看一个网页结构是否合理，一个好的办法就是把样式表去除，然后在浏览器上查看，理论而言可读性好的页面，结构就是合理的

CSS

　　随着web的发展，简单的html已经不能满足人们的审美需求，于是css应势而出，css的机制就是通过link或style方式，告知浏览器，浏览器解析css规则，并和相对应的标签元素进行绑定，找到相对应的标签就靠seletor。

1. 选择器
　　Selector一直在增加，查找功能越来越强大，为的就是适应越来越丰富的web应用开发，相信随着时间的推移，还会有更多的选择器出现。从基础选择器到伪类和属性选择器，合理地进行选择才能写出优雅的代码，这是基本功，得多写多练。
2. 继承和层叠
　　Css的另一机制。继承实现了样式的共用，常见的如color、font属性，最终目的是保证开发的合理性，想想如果需要为每个标签都写一遍字体定义是一件多么可怕的事情。我认为层叠的机制是依赖于继承的，如果没有继承，也就不需要层叠存在了。css通过选择器的优先级来告知浏览器怎么样应用样式，确定优先级有一个计分原则specificity，除了计分原则，还有很多特殊性需要知道，比如important、多个相同选择器的声明、样式表的种类以及它们的优先级关系等等。层叠的本质是为了解决样式复用问题，一个可复用的样式（可以理解为基础样式）的选择器如果越多，那么层叠覆盖的选择器就越复杂，所以在写css的时候，减少选择器嵌套是个不错的准则，特别是在出现了像sass和less这样的预编译工具，很容易就写出了多层选择器，影响了浏览器的解析速度。
3. Reset样式
　　正如前面html说的，html有许多标签默认就有样式，比如a、p、ul等，不同的浏览器在赋予这些标签样式的时候，并不统一，这就会造成初始化页面展示不一致，还有情况如列表标签ul、ol，默认样式太过单一，往往满足不了业务需求，所以这就需要在一开始的时候就对默认样式进行重置。不是所有的样式都需要重置，一个站点，往往只需要对一些常用的标签且有默认样式的进行重置，像bootstrap那样大而全的UI库，因为得兼顾许多应用的场景，所以会列出许多需要重置的标签，但是一般的站点确实是不需要的，精简是css应该追求的一个方向。
4. Box Model
　　Css布局依赖于两个方面，元素和定位。不管是行内元素或块元素，在页面上的展示都是一个个矩形框，因此就有了框模型的概念。框模型是css的基础，在应用过程中，得注意行内元素的垂直margin无法生效，而同一个bfc内的块级元素的margin会发生折叠现象，框的内容宽度在没有width的情况下的取值原理。如果可以的话，了解IE低版本混杂模式下盒子的展示方式，以及box-sizing的用法就可以了
5. BFC的原理
　　对css的布局有比较深入研究的朋友们或许能理解，BFC就是css各种布局属性综合应用的大杂烩。它提出的目的就是在于总结一套规则，告诉大家当碰到使用相关属性的情况下，元素会有怎样的表现，以及元素和兄弟元素或父元素，或兄弟元素的子元素乃至层级之间优先级关系等等。这些相关属性可以从清除浮动的方式中去获取：
　　- overflow属性除了visible的取值
　　- display属性line-block, table-caption等
　　- float属性非none值
　　- position属性absolute和fixed值
　　当元素有了上面属性之一，就会形成一个独立的容器。
6. CSS和CSS3
　　Css3提供了许多可供实际场景应用的属性，但是我始终觉得它更像是武侠里说的只是武功应用的法门，如果要让武学有个质的飞越，还是得把css一些很基础的东西学扎实，比如我前面5点所写的，但是不限于。
7. SASS
　　用sass来写css体验还是不错的，用得好的话会有做css架构的感觉，这是因为它的功能决定的。比如它支持变量定义，嵌套，导入样式表，函数定义并可传参，样式组合重用以及简单地计算功能。如果用得不好，它的功能就发挥不出来，比如定义了变量，只引用了一次，其他地方还是像写css那样，另外像mixins和extend也要多考虑去定义使用，而嵌套，应该考虑合理的区间。

结语

　　洋洋洒洒写了这么多字，花了不少时间，脑细胞死了不少。文中虽然没有举例说明，但是每一段文字的下笔我都是先在脑海中先想象了应用场景，靠着自己的语言阐述出来。希望这篇文章能给在前端界面开发有过一定经验的朋友带来一些思想上的交流，不足之处还望指教。