最近学习完了《html5与css3权威指南》，特别是css3部分，体验到了css3的超级强大。特别是一个比较常用的内容：选择器。

css3中，提供了新型的，可以使用通配符的选择方法。例如：[id=^sec]{ }，表示将此样式，应用在所有id以sec开头的html元素，比如id为section、sec3等的元素都会受到这些规则的影响。这样，我们就可以通过元素命名，来区别不同功能区域，并且使用通配符选择器来统一样式。而这一点，和class的功能类似。class与id的区别就在于，id一个网页中，只能有一个，而class可以有多个，这样可以让多个元素使用相同的样式。

因此，作者在书中说，不推荐使用class，class最终会消失。然而在另一本前端著作《编写高质量代码Web前端开发修炼之道》中，却推荐使用原子类的方法，来提高css样式的重用程度。之前，本人也写过一篇关于创建和使用原子类的文章，并且在现在的设计中应用原子类，感觉非常方便灵活性非常强大。在这里，潜行者m不禁思考，class究竟可取不可取？是鸡肉还是鸡肋？

class和id的区别

html中class和id属性，是用来标记元素、区别元素，这样就可以用css来精确控制样式，也可以使用javascript来控制元素。但class和id是有明显区别的，在网页中，id属性的值只能有一个，但是class的值是可以重复的。比如，我定义一个div的id为a，那么网页中不能再出现一个html元素的id为a；但是我定义一个div的class属性为b，我可以再其他的元素中，定义class属性为b。这样，就可以实现代码的重用，比如两个div都是红色背景，只需写出一个class（.r{background-color:#ff0000;})，然后在两个div中都指定class属性为 r 即可，而要使用id控制，则需要在两个div中，都写上background-color:#ff0000;。同时，id和class的优先级也是不同的，id的优先级要高于class，如果对同一个元素，分别用id和class指定同一属性不同的值，浏览器会优先解析id的值。

鸡肉说：

class可以极大的提高代码的重用，特别是使用原子类，既方便维护，又方便应用。而使用id，必须指定id然后指定大量重复的样式。css3中，虽然升级的强大的选择规则，但是仍然比较混乱，不利于维护。同时，存在即合理，w3c制定出class和id是有他们的道理的，负责不同的工作，class仍然会不断的被使用。

鸡肋说：

css3中，强大的id选择规则，已经可以对相近元素指定相同的样式，达到重用的目的。它已经完全可以取代class的作用，而且对于javascript来说，只能使用id来控制，说不定以后class就会消失了。

亲，你怎么看？你觉得是鸡肋还是鸡肉？

在《编写高质量代码 Web前端开发修炼之道》一书中，作者总结经验，认为网页设计中，css应当分为三层，分别为base层、common层、page层。其中base层为样式最底层，里面包含css reset代码和原子类，基本不需要维护。common层是中层的样式，设置一个网站频道等的样式。page层，则是具体页面的样式。如果把网页设计比作盖房子，base层就是地基，common层就是你这个房子的墙壁、结构，page层就是你房子的内饰等。

之前，潜行者m已经写过一篇关于css reset的文章，而今天，潜行者m就来介绍一下原子类。

原子类是可以高度重用的css样式。例如width:10px;或者是float:left;这类样式，很多的元素都要用到这类样式，但是在每个元素的css样式中，都添加这条语句，无疑会增加代码数量，使其不够简洁，而且当css样式很多的时候，维护起来就会非常麻烦。于是就有了css通用原子类。

如何编写？

在css文件中，编写简单简洁的类，每个类实现一个具体的小功能，并且命名一个非常简单直观的名字，例如：

.w{width:auto;}

.w10{width:10px;}

.fl{float:left;}

.fr{float:right;}

…………

在上面，只写了几个样式，作为例子，实际的原子类文件中，会包含各种原子类。

如何使用？

编写完成之后，我们应该如何在元素中，使用原子类？这就要用到元素的class属性了。在一个页面元素中，class属性值可以重复，并且可以指定多个样式。例如，我想要让这个div元素，宽度为10px，并且向左浮动，那么我就可以这样写：

<div class=”w10 fl”></div>

这样写之后，就说明这个div元素，同时具有.w10 .fl两个类的css样式。而如果我想要另一个div元素，宽度10px，并且向右浮动，我们就可以这样写：

<div class=”w10 fr”></div>

而不必为每个div分别制定width:10px;，这样就可以节约代码，高度重用代码了。同时，简短形象的名字，也可以让人非常容易理解样式的意思，例如一个div的class属性是w100 h100 fl，我们就可以知道，这个div宽100px，高100px，向左浮动，日后修改等都是非常方便的。

推荐使用 潜行者m 的 CSS creater 在线生成包含 常用原子类的 CSS 文件。地址：http://lab.qianxingzhem.com/app/csscreater/

最近受到Sami大叔的激励，努力花了一天的功夫，又把博客模板改版了一下，升级了一下，几乎把所有的css代码又重新写了一遍。我发现，实践真的是最好的老师之一，通过实践，可以让你的技术层次更深一步增加。这一次的升级，让我得到了非常多的经验，例如本文要说的。

浏览器都是不同的，解析用的内核也是不同的（这里的浏览器不算360、搜狗等借用其他浏览器内核的浏览器）。这样就出现了不兼容的问题。例如，一行css代码，在这个浏览器可能会正常解析，而在那一个浏览器，却无法解析或者进行了加粗等等。这样就出现了一个很头疼的问题，一个页面，可能在火狐浏览器中显示很好很正常，但是到了IE浏览器下面，却错位，严重影响版面。

面对这个兼容的问题，大多数人都选择了进行修补，但是通过这次，我发现了，这种不兼容的原因，大部分还是因为你编写的css代码上。下面请看潜行者m在升级模板的时候，发现的两个案例：

1，显示文章摘要的框，在火狐浏览器等都是正常的，而在IE浏览器中，却莫名的增高了。重写css代码的时候，发现，在定义文章摘要框的时候，由于演示边框效果，临时定义了高160px。在整个定义整个文章框的时候，又强制定义了高度，由于类的优先性，这样就把文章摘要框的过高部分截掉了。所以就忽视了当时临时定义的高度属性。在火狐等浏览器中，都正常解释。但是在IE早期的版本，可能无法处理这种叠加效果，所以就全部显示出来了。导致每一个文章框的高度都很高。问题的解决方法，删掉对于文章摘要框的高度定义即可。

2，当我设计完这套模板的时候，在其他浏览器中均显示正常，但是在IE5.5和IE6中的“文章模块”显示中，边栏却错位。在“页面模块”显示中，却没有错位。由于“页面模块”是由“文章模块”衍生出来的，肯定是“文章模块”中某个地方的原因，导致边栏错位。经过仔细的对比观察发现，在文章下面的“文章信息”这一个块中，由于添加了两个虚线，导致整体宽度是642px，而文章内容是640px。正是由于多出了这2px的宽度，把边栏挤下去了。修改方法，设置“文档信息”的宽度为638px。

通过这两个例子，不得不让我思考，网页错位等原因，究竟是什么造成的？很显然，是由不完善的css代码造成的，是人为造成的。浏览器确实针对某些css样式的解释不同，显示的效果不同。但是绝大多数浏览器对于基础的css样式解释是没有问题的，比如：width:900px;绝对没有一个浏览器会把这条语句中的900px的宽度，显示成1000px的宽度。所以说，对于常用的常见的css样式规则，浏览器全部都完美支持，只是有部分比较生僻的标签样式或者某些高级的样式应用技巧，对于某些比较旧的浏览器来说，显示不出来应有的效果，仅此而已。所以，如果你的网页中，出现了不应该出现的显示效果，请仔细检查你的css代码，看看是不是有一些低级的错误。

对于一个人编写的css样式表来说，这种错误会很容易避免，因为css代码比较少，一个人去写，风格也能统一。但是对于一个比较大型的网站，对于一个需要团队共同维护的css样式表来说，麻烦就来了。每个人的编写风格都不同，而且代码很多，出现错误不易检查。所以，本人总结出了几条针对不兼容问题的应对方法：

1，尽量使用最低级，最简单的样式。因为这种基础样式在所有浏览器中的显示效果都是一样的。

2，统一编写风格，细化样式控制，尽量避免在一个区块叠加多个样式，意思就是说，对于一个div或者区域，就用一个样式去控制，不要再添加多个样式，让这个div继承其他样式。这样，哪一个区域出现问题，可以迅速的查找原因，而且不会出现其他继承样式优先级等导致的意外情况。

先来简单的介绍一些 css reset

从字面意思中，我们可以看出，css reset的功能就是把网页标签样式使用 css 重置。学过 html 的朋友都知道，html 标签是有它默认的样式的，例如：<h*>标签表示标题，通常会对文字进行加粗，并且会让文字变大；<p>是段落标签，表示一个段落，通常会与其他文字空开一段距离。

那我们为什么要把网页的标签样式进行重置呢？原因很简单，内核不同的浏览器，它对于网页标签的解析是不同的。举个不恰当的例子，某浏览器对于<h1>标签，可能会对文字进行加粗，并且调整文字大小为24px，之后在屏幕中输出。但是另一个浏览器，可能不会这样解析，它可能不会对文字进行加粗，文字大小也可能是20px。这样，同一个网页，在不同浏览器的浏览下，就会发生较大的区别，可能在某浏览器中是正常的，在另一个浏览器中，就错位了不正常了。潜行者m之前写过比较一篇关于几个主流浏览器的区别，有兴趣的可以看一下 firefox、chrome、opera和IE 7的区别 。

但是，所有的主流浏览器，对于css的支持都是不错的，所以我们可以使用css reset来解决上面的问题。我们使用css来控制页面标签的样式，比如把<h*>标题的加粗、扩大、边距等样式清除，让它和普通文字一样；把<ul>等列表标签的前面标志、空格等清除。这样，把所有的标签样式清除了，当我们需要某一种样式的时候，只需要在css文件中，对其进行控制即可。这样的好处就是，能够尽量的消除各个浏览器对于页面标签样式的解析，尽量使网页在各个浏览器中显示效果一样。

那么css reset如何编写

目前在网络上，已经有很多关于css reset的框架，例如雅虎的 YUI 等，我们可以下载下来看看他们是怎么写的，是怎么处理的。同时也可以直接在网页中引用。但是对于小的页面，潜行者m并不推荐这种做法，那些大的框架，适合大型网站使用，里面几乎对所有的html标签进行了css reset，而我们制作的小页面，并不需要太多的标签，如果使用那么多无用的css reset代码，会导致页面体积变大。所以我推荐的做法是，根据自己页面用到的标签，去寻找相应的css reset代码。下面，是我从《编写高质量代码—web前端开发修炼之道》一书中，提取出来的一段css reset代码，大家可以根据自己的需要，选择引用：

/CSS reset/
html{color:#000;background:#fff;}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,
form,fieldset,legend,input,button,textarea,p,blockquote,
th,td{margin:0;padding:0;}table{border-collapse:collapse;
border-spacing:0;}fieldset,img{border:0;}address,caption,
cite,code,dfn,em,strong,th,var,optgroup{font-style:inherit;
font-weight:inherit;}del,ins{text-decoration:none;}
li{list-style:none;}caption,th{text-align:left;}h1,h2,
h3,h4,h5,h6{font-size:100%;font-weight:normal;}q:before,
q:after{content:’’;}abbr,acronym{border:0;font-variant:normal;}
sup{vertical-align:baseline;}sub{vertical-align:baseline;}
legend{color:#000;}input,button,textarea,select,optgroup,
option{font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;}
input,button,textarea,select{*font-size:100%;}input,button,select,
textarea{outline:none;}a {outline: 0;}

上面就是一段还不错的css reset代码，在文章的后面，我补充了一些css reset资源。

关于*{margin:0;padding:0}

{margin:0;padding:0}这就是一段非常简洁的css reset代码，有一些人仅仅使用这一句代码，表示将所有标签的内边距和外边距清除，达到css reset的效果。但是潜行者m不推荐使用。原因很简单，这一行代码不能算作是css reset代码，它仅仅清除了标签的内边距和外边距而已，而我们要的css reset效果，是要把ol和ul的列表样式、th的加粗、h标签的变大加粗等样式都清除，全部重置。之后，根据自己的设计需要来进行css的控制。而这句{margin:0;padding:0}，没有把所有的样式清除。

PS：补充一个资源 10款浏览器CSS Reset的方法