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;}

转载于:https://www.cnblogs.com/zhuifeng/p/3758814.html

CSS命名方法(笔记)相关推荐

CSS命名方法之BEM
转自BEM -- 源自Yandex的CSS 命名方法论 BEM的意思就是块(block).元素(element).修饰符(modifier),是由Yandex团队提出的一种前端命名方法论.这种巧妙的命 ...
div+css命名规范大全
网页制作中规范使用DIV+CSS命名规则,可以改善优化功效特别是团队合作时候可以提供合作制作效率, 我们开发DIV+CSS网页(Xhtml)时候,比较困惑和纠结的事就是CSS命名,特别是新手不知道什么 ...
[转]常用的CSS命名规则
(壹)常用的CSS命名规则头:header 内容:content/container 尾:footer 导航:nav 侧栏:sidebar 栏目:column 页面外围控制整体布局宽度:wrappe ...
[转]HTML DIV+CSS 命名规范大全
原文链接常用DIV+CSS命名大全集合,即CSS命名规则我们开发CSS+DIV网页(Xhtml)时候,比较困惑和纠结的事就是CSS命名,特别是新手不知道什么地方该如何命名,怎样命名才是好的方法. ...
html /css命名规范
一.命名规则说明 1.所有的命名最好都小写 2.属性的值一定要用双引号("")括起来,且一定要有值如 class="helloweb" , id="h ...
精简高效的CSS命名准则/方法
2019独角兽企业重金招聘Python工程师标准>>> 一."无"的哲学佛家讲究"因果报应",有果必有应.此段看似与主题没有血缘关系,实际讲 ...
精简高效的CSS命名准则和方法
一."无"的哲学佛家讲究"因果报应",有果必有应.此段看似与主题没有血缘关系,实际讲的是"因". 我个人比较喜欢老子的道家思想,并喜欢以其 ...
[css] 【转载】精简高效的CSS命名准则/方法
原文链接:http://www.zhangxinxu.com/wordpress/2010/09/%E7%B2%BE%E7%AE%80%E9%AB%98%E6%95%88%E7%9A%84css%E5 ...
在html中引入css内部样式表使用,CSS样式学习笔记（三）html文件引入CSS的方法（2）...
一.CSS样式规则 CSS样式规则二.html文件中引入CSS样式的方法有以下三种(行内样式,内部样式表,外部样式表): 2.1 行内样式( 使用style属性引入CSS样式) 实现方式:CSS样式 ...

CSS命名方法(笔记)

CSS命名方法(笔记)相关推荐

最新文章

热门文章