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也要多考虑去定义使用，而嵌套，应该考虑合理的区间。

结语

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