扯一扯前端css的整体架构设计：（2）base基础类的那些事儿_html/css_WEB-ITnose

　　周一下午在实验室写了第一篇博文，有几个人捧场，那咱就得接着下去啊。然后我觉得现在写的内容更多的偏向于谈一下我对于前端css架构的理解和前端经验的一个小总结，所以就把标题里原来的【项目总结】给删掉了。但是这不是说以后文章就不提我手里这个半死不活的类电商网站了，还得接着提，要不然拿什么自黑呢~~

　　[回顾一下上一篇]

　　上一篇里我主要针对于我最近写的一个项目的前端结构，开始介绍了一些前端结构的一些知识或者说是经验吧。

　　为什么前端css也有架构，为什么要考虑css的架构，怎么实现css的简单架构，这些问题在第一篇文章里都有提到，想了解的自行翻上一篇文章吧。

　　上回说到整个项目快完工的时候，觉得自己的前端css代码确实存在复用不高、命名不规范等毛病，然后四月末看了一本书，醍醐灌顶，发现自己一直采取的架构方式不是很好。我之前的项目包括这个电商网站的前端大部分都是我自己来完成，后端部分他们自己搞，我只要管好我这前端，按时给他们up页面，然后数据绑定一下就ok，有时候顶多帮忙写点分布视图或者是界面里的强类型什么的。因为几乎都是我自己手写的代码，所以在前端上比较随意，采用自己比较习惯的方式来写。在Css布局上，我倾向于把功能划分法和区域划分法混用，说浅显点就是，我的css代码里既有把header、footer的抽象类，也有button、font的抽象类，然后具体到每个界面都有一个定制的css文件等着它。

　　这种招法有它的好处，就是开发快，不需要考虑太多，直接分析一下界面，把重复出现的模块提取出来，然后规定一种写法就可以。但是这种方法只适用于页面比较少、css文件比较少的小型网站，如果碰到这次的大型网站，比如说购物网站、论坛等等，这一种方法的缺点就暴露出来了：css文件过多、css文件易冲突、模块复用度不高等等。

　　所以，当看到大牛总结的前端架构方法之后，感觉整个人都不好了。

　　[开始这篇博客前总结一下]

　　之前我说到另外的一种前端css架构方式：按照职能方式进行划分。即将所有css文件根据其在项目前端布局中的作用分类，可以分为：

CSS前端结构----按照职能划分

类名	在前端布局中的主要作用	其他说明
base(基础类)	主要负责重置浏览器默认样式和提供原子级别的样式服务，主要以font、margin、height、width等为主； 作用范围是本网站内的所有界面	base.css文件一般不需维护， 但要保证其可靠性
common(普通类)	在base类的基础上，将整个网站的模块进行抽象化，实现代码高度复用；会在网站内经常出现	common中模块根据实际使用 可能有差异，可配合原子类进行使用
page(页面类)	利用base中的原子类服务针对特定界面提供css ui，提供页面级别服务，作用范围最小	尽量避免团队开发page.css中样式 冲突的问题

　　可以把各层功能范围理解成：　金字塔。

　　所以，就像上面的表格中说到的，同时我在上一篇博客里面也有提到:

　　　　对于一个团队或者一个开发者来讲，它有自己固定的、常用的base.css。因为base层很显然的特点就是高度重用，这一点我们从base在前端布局中的作用上也能看出来，　　接下来拆解base的两种功能，咱接着唠。

---------------------------我是一条分割线----------------------------------怎么这么长啊-----------------------------------

　　[1.重置浏览器默认样式]

　　为什么要重置？答：因为默认的丑啊。

　　最简单的重置浏览器默认样式的方法相信很多同志们都用过：

　　　　*{margin：0px;padding:0px;}

　　重置了浏览器为所有页面默认添加的2px的边距和填充值，因为大家都不喜欢把自己的页面像是镶在浏览器里，然后还是个白边儿...

　　这是一种最简单的浏览器默认样式重置的代码，大部分人也确实都在使用。但是最近看到个Blog里面在谈*选择符，很多f2e认为*选择符的涵盖范围过大，它默认选择的是所有标签，所以它会在浏览器渲染的过程中兼容老式标签，比如说