《web前端开发修炼之道》读书笔记-CSS篇之"小荷才露尖尖角"-CSDN博客

高质量的CSS篇

怪异模式和DTD

不知道大家在使用IE8/9/10时使用开发人员工具看没看到这么几个选项:

其中的Quirks就是怪异模式，所谓怪异模式，就是为了兼容比较老的能够正常浏览而产生的一种模式，它的很多解析方式是不符合标准的，以至于现在几大门户网站对待这种怪异模式也是没有办法。不过大家大可不必去操心这种模式，因为那么老的浏览器用户也应该没有了吧？（比如IE4、5等），但是大家在编写前台代码的时候也一定要注意防止浏览器将你的代码以怪异模式的方式来解析！这里我们就有必要提到DTD了，DTD全程为Document Type Definition，中文名称就是文档类型定义，通过定义正确的DTD，就可以保证浏览器的解析方式。一下就是HTML中几种常见的DTD文档（具体大家可以参考园子里另外一个同学的文章<!DOCTYPE> 标签的深度剖析以及使用选择）

用于HTML 4.01的严格型
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" " http://www.w3.org/TR/html4/strict.dtd">

用于HTML 4.01的过渡型
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " http://www.w3.org/TR/html4/loose.dtd">
 
用于XHTML 1.0的严格类型
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

用于XHTML 1.0的过渡型
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

但现在随着HTML的发展，我个人更推荐最新最简洁的用法：

<!doctype html>

发现很多大型网站也开始使用这个DTD了，而且，至少在MVC3里面自动生成的代码也是这个DTD，前段时间偶然发现网易邮箱都用上HTML5语义标签了。

CSS分层

作者推荐了他个人更喜欢的一种CSS组织方式：base.css+common.css+page.css,将网站内的样式，按照职能分成以上三大类，这三者并不是并列的，而是层叠结构：

common

base

1.base层提供了CSS reset 功能和粒度最小的原子类，这一层与具体的UI无关。base层其实并不用我们自己去造轮子，大家可以看看雅虎YUI的css reset 和css base，地址：http://yuilibrary.com/yui/css/。个人觉得直接搬过来就行。

2.common层这一层位于中间，提供组件级的CSS类。现在编程，大部分我们都考虑面向对象的思想来开发，其实，有很大一部分，就是想要提高代码的重用性，CSS中当然也补例外，common这一层，我们就应该想到如何尽可能多的去复用代码。common层是网站界别的，不同的网站有不同的common层，同一个网站只有一个common层。这里附上网易首页的一个截图，相信大家很快就会明白common这一层的大概意思。

3.page层位于顶层，提供页面级别的样式，每个页面都可能有自己单独的page层CSS。page层可以内置在相应的页面中，但是这样没有彻底将样式从HTML文件中分离开来，所以作者建议是将网站内所有的page层统一放在一个page.css文件中，通过页面注释，分块书写，便于维护，如下所示：

/*首页*/
.test{}
.test1{}

/*关于我们*/
.test2{}
.test3{}

/*联系我们*/
.test4{}
.test5{}

CSS命名空间

嘿嘿，一般在后台语言中才有命名空间这回事的，怎么在CSS中也会存在呢？试想，如果多个人在合作开发前端，那么如果在某个页面工程师A使用了.test这个命名，工程师B也恰好用了相同的名称，那么如果同一个页面同时使用了这两个CSS，那冲突就来了。

所以，为了规范好前端开发，首先，作者推荐了一种结合驼峰命名与划线命名结合而来的方法：

.timeList-lastItem  很明显，".timeList-lastItem"是".timeList"的".lastItem"

那么既然划线就可以决定从属关系，我们就可以将这种方式推广到这个网站，在base层和common层因为使用于全局，就不加前缀，而像page层，就可以在其前面加上前缀，如下所示：

<div class="box">
<div class="box-hd"></div>
<div class="box-bd"></div>
<div class="box-ft"></div>
</div>

以上就是这期的笔记了，敬请期待下次的《web前端开发修炼之道》读书笔记-CSS篇之"含苞怒放"

转载于:https://www.cnblogs.com/cuitsl/archive/2012/11/09/2761417.html