划分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:;padding:;}
table{border-collapse:collapse;border-spacing:;}
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;}

CSS命名方法(笔记)的更多相关文章

  1. 豆瓣移动端风格的css命名方法与学习

    在CSS取名相对于刚入门来说是最头疼的事情,往往取一个可读性的名字相对以后的代码风格还是很重要的. 在配合团队方面一个好的类名可以帮助同事来理解,增加团队之间的效率有着很大的意义. 豆瓣的前段相对其他 ...

  2. (转)面向属性的CSS命名

    原文链接:戳这里 自从开始做前端开发以来,我发现在开发页面的时候,总是有一个问题十分影响自己的开发效率,这个问题就是css的命名,主要是指css类选择器的命名.这个问题主要体现在:第一,有的内容你压根 ...

  3. 面向属性的CSS命名

    自从开始做前端开发以来,我发现在开发页面的时候,总是有一个问题十分影响自己的开发效率,这个问题就是css的命名,主要是指css类选择器的命名.这个问题主要体现在:第一,有的内容你压根想不出用什么名字来 ...

  4. div+css命名规范大全

    网页制作中规范使用DIV+CSS命名规则,可以改善优化功效特别是团队合作时候可以提供合作制作效率, 我们开发DIV+CSS网页(Xhtml)时候,比较困惑和纠结的事就是CSS命名,特别是新手不知道什么 ...

  5. [转]HTML DIV+CSS 命名规范大全

    原文链接 常用DIV+CSS命名大全集合,即CSS命名规则 我们开发CSS+DIV网页(Xhtml)时候,比较困惑和纠结的事就是CSS命名,特别是新手不知道什么地方该如何命名,怎样命名才是好的方法. ...

  6. 常用DIV+CSS命名大全集合

    一.命名规则说明:   -   TOP 1).所有的命名最好都小写 2).属性的值一定要用双引号("")括起来,且一定要有值如class="divcss5",i ...

  7. [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 ...

  8. CSS命名规范——BEM思想(非常赞的规范)

    人们问我最多的问题之一是在CSS类名中“--”和“__”是什么意思?它们的出现是源于BEM和Nicolas Gallagher... BEM的意思就是块(block).元素(element).修饰符( ...

  9. 精简高效的css命名准则

    对于css,为了避免样式冲突,我们总会赋予相当特殊的命名,或是在选择符上添加html标记,或是使用层级.我们为避免在冲突上做文章,就会把代码的命名变得复杂化. 如果css的重用性越高,相比就越高效.如 ...

随机推荐

  1. SQL Server查询已锁的表及解锁

    --查询已锁的表 select request_session_id spid,OBJECT_NAME(resource_associated_entity_id) tableName ,* from ...

  2. KEIL C51代码优化详细分析

    阅读了<单片机与嵌入式系统应用>2005年第10期杂志<经验交流>栏目的一篇文章<Keil C51对同一端口的连续读取方法>(原文)后,笔者认为该文并未就此问题进行 ...

  3. sql server数据库中raiserror函数的用法

    server数据库中raiserror的作用就和asp.NET中的throw new Exception一样,用于抛出一个异常或错误.这个错误可以被程序捕捉到. raiserror的常用格式如下:ra ...

  4. 相见恨晚的 scala - 01 [ 基础 ]

    简洁到不行,多一个分号都是不应该. 学习笔记: centOS 下安装 scala 和安装 jdk 一毛一样 . 1 . 不同于 Java 的变量声明 :( 但是和 js 很像 ) /** * Crea ...

  5. ACdream1092

    题意是给出某个地鼠的出现位置以及出现时间,人有一个移动速度,求此人最多可以打多少个地鼠? 我们根据时间把所有的地鼠排序,如果两个地鼠之间的距离不超过时间只差与速度的乘积,那说明打完上一只地鼠还可以打到 ...

  6. NOI前训练日记

    向别人学习一波,记点流水帐.17.5.29开坑. 5.29 早晨看了道据说是树状数组优化DP的题(hdu5542),然后脑补了一个复杂度500^3的meet in the middle.然后死T... ...

  7. ldap添加memberof支持

    安装请查看上一篇博客,传送门:https://www.cnblogs.com/crysmile/p/9470508.html 如果使用LDAP仅仅作为用户统一登录中心,则参考安装文档即可:如果ldap ...

  8. 自定义样式,使用浏览器阅读epub格式的电子书

    epub格式的电子式一般用专门的阅读器打开,但是如果可以使用浏览器打开,就可以随意更改css了,获得极致的体验效果. 比如可以自定义字体.行间距.背景色.字体大小.缩进等等... 当然,如果您不需要添 ...

  9. C++ STL 常用查找算法

    C++ STL 常用查找算法 adjacent_find() 在iterator对标识元素范围内,查找一对相邻重复元素,找到则返回指向这对元素的第一个元素的迭代器.否则返回past-the-end. ...

  10. 【刷题】BZOJ 3626 [LNOI2014]LCA

    Description 给出一个n个节点的有根树(编号为0到n-1,根节点为0).一个点的深度定义为这个节点到根的距离+1. 设dep[i]表示点i的深度,LCA(i,j)表示i与j的最近公共祖先. ...