CSS命名方法(笔记)

划分CSS的一些方法(不同的划分方法都有利与弊，要记住，最合适项目的才是最好的)：

①按功能划分：将字体的CSS存放在font.css。将控制颜色的CSS存放在color.css。将控制布局的CSS存放在layout.css。

 

②按区块划分：将头部的CSS存放在header.css。将底部的CSS存放在footer.css。将侧栏存放在sidebar.css。将主题存放在main.css。

 

③base.css+common.css+page.css(一般情况下推荐用这种方法)：将一个网站的所有样式按职能分成三大类base、common、page，在任何一个网页最终样式表现都由这三者完成。base层基本上是不用维护的，common层修改的幅度不会很大，page层代码可能由多个工程师开发，那要如何避免冲突呢？我们可以通过命名来避免冲突，可以将CSS命名规范为驼峰命名法和划线命名法。驼峰命名法是从第二个单词开始，将每个单词的首字母大写(className、subMenu)。划线命名法是用中划线或者下划线分隔(class-name、class_name)。如果项目是由多个工程师来完成，我们可以给每个人分配一个独立的命名ID。如我叫追风，那么我们可以这样写(zf-sub-menu或者zf-subMenu)。

1、base层：是网站页面样式所需要依赖的最低层，相对稳定基本不用维护。我们一般会在这一层存放以下内容(每个浏览都会对一些标签属性有默认预设值，所以要把一些标签属性统一设置)。

body,div,dl,dt,dd,dl,ol,ul,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td,{margin:0;padding:0;}
table{border-collapse:collapse;border-spacing:0;}
ol ul{list-style:none;}
/*文字排版*/
.f12{font-size:12px;}
.f13{font-size:13px;}
.f14{font-size:14px;}
/*定位*/
.tl{text-algin:left;}
.tc{text-algin:center;}
.tr{text-algin:right;}
/*长度高度*/
.w10{width:10px;}
.h10{height:10px;}
/*边距*/
.m10{margin:10px;}
.ml10px{margin-left:10px;}
.p10{padding:10px;}
.pr10{padding-right:10px;}

 

2、common层：是位于中间层，提供组件级的CSS。我们可以将页面内的元素拆分为一小快一小快的功能和样式相对独立的“模板”，这些模板有些很少重复，有些大量重复，我们可以将大量重复的样式提取出来存放在common.css样式中。如一个网站要用到很多重复的标题，我们可以这样编写。

.h2{font-size: 14px; font-weight: bold;}

 

 

3、page层：是页面级的，建议所有page层的css都存放在page.css里面，可以根据页面配上注释，分快书写，便于维护。

/*关于我们*/

.about-text{font-size:12px;}

/*联系方式*/

.contact-text{font-size:14px;}