规范命名css
程序员文章站
2022-03-10 18:42:56
...
css3已经发布了，许多WEB前端工程师都开始尝试使用该技术了。我们怎样来评价编写css的能力呢?不会用对与错来判断，我们可能会用“好”、“一般”、“很烂”等字眼来形容。CSS最难的是什么呢?是各大浏览器的兼容?是代码的简洁高效性?前端工程师五指曾说过：css不是什么难的技术，难点在于怎样规范的命名。项目由个人完成，工程师可以依据自己的习惯来命名css。在团队合作中，不规范的命名侧可能会引发起冲突，从而影响到整个项目的进度。下面岭南网络手把手教大家如何规范的命名css。
划分css可以有多种角度，如按功能划分：将字体的css存放在font.css;将控制颜色的css存放在color.css;将控制布局的css存放在layout.css;或者按区块划分：将头部的css存放在header.css;将底部的css存放在footer.css;将侧边栏存放在sidebar.css;将主题存放在main.css。不同的角度有划分都有自己的利与弊。
岭南网络给大家推荐一种css的划分方法：base.css+common.css+page.css。将一个网站所有的样式，按职能分成三大类：base、common、page，在任何一个网页最终样式表现都由这三者完成的。
base层是网站页面样式所需依赖的最底层，相对稳定基本不用维护。我们一般会在base.css存放以下内容。
/*css reset 因为每个浏览器都会对一些标签属性有默认预设值，所以要要把一些标签属性统一设置*/
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;}
common层是位于中间层，提供组件级的CSS。我们可以将页面内的元素拆分为一小块一小块的功能和样式相对独立的“模板”，这些模板有些是很少重复的，有些会是大量重复的，我们可以将大量重复的样式提取出来存放在common.css样式中。如一个网站要用到很多重复的标题，我们就可以这样来编写：
.h2{font-size:14px;font-weight:bold;}
page层是页面级的，建议将所有page层的css都存放在page.css里，可根据页面配上注释，分块书写，便于维护。如：
/*关于我们*/
.about-text{font-size:12px;}
/*联系方式*/
.contact-text{font-size:14px;}
base层基本上是不用维护的，common层修改的幅度不会很大，page层代码可能有多个工程师开共同开发，那要如何避免冲突呢?我们可以通过命名来避免冲突。可以将css命名规范为：骆驼命名法和划线命名法。骆驼命名法：从第二个单词开始，将每个单词的首字母大写。如dropMenu、subNavMenu.划线命名法：用中划线-，或者下划线_分隔，如drop-menu、sub_nav_menu。
如果项目是由多个工程师来完成的，我们可以给每一个人分配一个独立的命名ID。如岭南网络叫linknan，我们可以把名字开头的2个字母分配为独立命名id，如：.ln-artice li。这样就可以避免重复命名而产生冲突。
划分css可以有多种角度，如按功能划分：将字体的css存放在font.css;将控制颜色的css存放在color.css;将控制布局的css存放在layout.css;或者按区块划分：将头部的css存放在header.css;将底部的css存放在footer.css;将侧边栏存放在sidebar.css;将主题存放在main.css。不同的角度有划分都有自己的利与弊。
岭南网络给大家推荐一种css的划分方法：base.css+common.css+page.css。将一个网站所有的样式，按职能分成三大类：base、common、page，在任何一个网页最终样式表现都由这三者完成的。
base层是网站页面样式所需依赖的最底层，相对稳定基本不用维护。我们一般会在base.css存放以下内容。
/*css reset 因为每个浏览器都会对一些标签属性有默认预设值，所以要要把一些标签属性统一设置*/
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;}
common层是位于中间层，提供组件级的CSS。我们可以将页面内的元素拆分为一小块一小块的功能和样式相对独立的“模板”，这些模板有些是很少重复的，有些会是大量重复的，我们可以将大量重复的样式提取出来存放在common.css样式中。如一个网站要用到很多重复的标题，我们就可以这样来编写：
.h2{font-size:14px;font-weight:bold;}
page层是页面级的，建议将所有page层的css都存放在page.css里，可根据页面配上注释，分块书写，便于维护。如：
/*关于我们*/
.about-text{font-size:12px;}
/*联系方式*/
.contact-text{font-size:14px;}
base层基本上是不用维护的，common层修改的幅度不会很大，page层代码可能有多个工程师开共同开发，那要如何避免冲突呢?我们可以通过命名来避免冲突。可以将css命名规范为：骆驼命名法和划线命名法。骆驼命名法：从第二个单词开始，将每个单词的首字母大写。如dropMenu、subNavMenu.划线命名法：用中划线-，或者下划线_分隔，如drop-menu、sub_nav_menu。
如果项目是由多个工程师来完成的，我们可以给每一个人分配一个独立的命名ID。如岭南网络叫linknan，我们可以把名字开头的2个字母分配为独立命名id，如：.ln-artice li。这样就可以避免重复命名而产生冲突。