[回顾一下上一篇]
上一篇里我主要针对于我最近写的一个项目的前端结构，开始介绍了一些前端结构的一些知识或者说是经验吧。
为什么前端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认为*选择符的涵盖范围过大，它默认选择的是所有标签，所以它会在浏览器渲染的过程中兼容老式标签，比如说 什么的，所以在浏览器的dom树生成过程中可能会影响效率----------额，对于这个说法，我自己的见解是无所谓，喜欢用*{}的太多了，包括我自己的所有reset类都有这个，然后那个博客中提到的因为*符产生的浏览器效率滞后我觉得几乎就可以不计了吧，挺好的一盘菜不能因为里面一个葱花不好看就不吃了啊(咳咳咳，请叫我烂比喻大湿)
说完最简单的重置浏览器的代码，很多人可能在说：这就够了吧，*{margin:0px;padding:0px}已经把我最不喜欢的浏览器样式取消掉了，别的就不用写了，但是其实浏览器默认样式带来的布局bug或者叫布局丑点还有很多：
img的框、li标签的默认列表样式、table里默认的上下边距和列之间蛋疼的2px的空隙...
还有h标签的默认加粗，没记错的话类似于是font-weight:600:在现在这种扁平化、大图满页面飞的时候，h标签加粗确实很少用了；
所以很多时候为了我们在后续更好的对这些标签进行改造，又为了节省后面的代码量，我们一般将浏览器的重置默认全部写在base.css类里面。上一篇文章里面我好像也提了一下，我个人比较推荐采用yui的reset.css，写的真的很管用，这个reset文件没有对不对或者好不好的说法，只有好不好用的说法，只要适合你自己开发的、能够帮你减少工程量的，就是好用的reset.css。各位看官，完全可以根据自己的需求定制，不要盲目使用。（PS:万一你碰到了个喜欢页面有margin的甲方呢，哈哈哈哈..._(:з」∠)_）
推荐个网站 http://www.cssreset.com/，一个国外css站，提供了很多种常用的reset文件，提供ctrl+c & ctrl+v 服务，开发利器~~网站截图：↓↓
这里附上比较常用的Yui的reset.css代码吧，里面对h标签的重置真是大快人心~\(???)/~收好不谢
1 body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0;} 2 table{border-collapse:collapse;border-spacing:0;} 3 fieldset,img{border:0;} 4 address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;} 5 li{list-style:none;}caption,th{text-align:left;} 6 h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;} 7 q:before,q:after{content:'';} 8 abbr,acronym {border:0;font-variant:normal;} 9 sup {vertical-align:text-top;}10 sub {vertical-align:text-bottom;}11 input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;}12 legend{color:#000;}
---------------我也是一条分割线----------------------------------------------------------我好长啊啊啊啊---------------------
[2.原子类功能的设计和实现]
说完了浏览器默认样式重置，接下来扯一扯base层css代码的另一个作用：提供原子级别的样式服务。
说到这里看过上篇的可能明白是什么意思，没看过的，你看完了就明白了= ， =
咳咳，因为我们现在讨论的是按照职能划分的css架构，所以base层作为最基础的css架构层，它需要为页面布局尽力做到最多，除了默默的重置一下浏览器默认，它还应该为上两层在布局时提供尽量方便的类，比如说高度类，宽度类，通过这些原子类的组合使用，不依赖于common类和page类也能实现页面最简单的“搭积木”...
很多同学可能疑问：你不是说base层文件不涉及浏览器ui样式、可以适用于任何网站的设计，那你这浏览器的原子类都有点儿啥啊？
有啥？这个要根据你实际的网站使用情况来看，举个我做的电商网站的css文件里面的小栗子：↓↓↓
（请自动忽视上面w960里面写的width:1024px= 。 =，以及每个.w类里面的height:inherit）
一开始没觉得，后来开始写的时候，我真是越发的为自己点赞，就说.w960和.clear30，这两个类在我所有界面里面出现了100+次，要是我当时没有这么写而是给每一个div都需要定个类名，再给它写在page.css里，相信css代码量最少多写200行...而且万一，万一碰到甲方说“你们这个界面切糕区太窄了，再大点儿，我们就喜欢大的！”...然后你没用原子类，然后就熬夜挨个文件改吧....
所以从我上面晒出来的代码里，应该最起码能总结出来：高度和宽度可以抽象出原子类，在实际使用时候：↓（举段例子）
1 2 3 4 5 6 /*宽度 原子类*/ 7 .w100{width:100px;} 8 .w200{width:200px;} 9 .w300{width:300px;}10 .w{width:100%;}11 .win{width:inherit;}12 /*高度 原子类*/13 .h50{height:50px;}14 .h100{height:100px;}15 .h200{height:200px;}16 .h300{height:200px;}17 .h{height:100%;}18 .hin{height:inherit;}19 /*定位 原子类*/20 .bc{margin-left:auto;margin-right:auto;}/*就是块状元素居中*/21 22 23 24 25 26 27
28
查看更多关于扯一扯前端css的整体架构设计：（2）base基础类的那些事儿_html/css_WEB-ITnos的详细内容...
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://haodehen.cn/did105069