CSS禅意_html/css_WEB-ITnose-html tutorial-php.cn

# CSS禅意
---

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

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

## 开发前期准备

1. 提取图片
UI设计师往往只提供给前端人员一张完整的psd图，甚至对于无用的图层也不清除，这个时候前端就需要自己进行ps，提取所需的图片，并保存到项目图片库中。从我个人体会而言，我是建议前端自己ps的，理由是：
- web页面需要根据业务和技术需求选取不同的图片文件格式，而多数设计师并无法完全理解
目前主流的图片文件格式依然是jpg、gif、png，这三者的区别应用和这么做的目的可以查看拙文[三种图像文件格式的选择](http://www.cnblogs.com/balaixianren/archive/2011/08/09/2123321.html)
- web页面需要考虑性能因素，对一些图片进行sprites贴图处理
页面图片的请求数越多，加载就越慢，一些不规则和具有特定业务场景使用的图片可以通过利用sprites技术来减少图片请求数，进而提升性能。sprites图片的制作可以使用一些软件或在线生成，在线生成工具[CSS Sprites Generator](http://csssprites.com/)
- 字体图标的选择
应用字体图标的好处是能够通过css简单地控制图片的大小、颜色，如果是矢量图标，还可以避免跨平台页面制作导致的图片失真问题。缺点是市面上浏览器对字体图标文件的格式支持不统一，得生成不同格式的文件来进行兼容性处理。推荐一下由阿里巴巴UX部门推出的矢量图标管理网站[Iconfont.cn](http://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](http://sass-lang.com/)来写css体验还是不错的，用得好的话会有做css架构的感觉，这是因为它的功能决定的。比如它支持变量定义，嵌套，导入样式表，函数定义并可传参，样式组合重用以及简单地计算功能。如果用得不好，它的功能就发挥不出来，比如定义了变量，只引用了一次，其他地方还是像写css那样，另外像mixins和extend也要多考虑去定义使用，而嵌套，应该考虑合理的区间。