划分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. OSG学习:裁剪变换(1)

    在OSG中,默认了6个裁剪平面以去除没有必要显示的物体.也可以自己定义其他的裁剪平面来确定裁剪. osg::ClipPlane类继承自osg::StateAttribute类,封装了OpenGL中的g ...

  2. CMD命令去导出文件下的文件名称到EXCEL

      dir C:\Users\caire\Pictures\壁纸/b>E:\temp.xls

  3. vue 大概流程(未完)

    规划组件结构 编写对应路由 具体写每个组件功能

  4. Mysql 5.7 报错 3534 错误

    需要先 执行 mysqld  --initialize 然后  mysqld --install 最后  net start mysql 即可启动服务 如果不执行第一步 则会报错

  5. 隐藏基于Dialog的MFC的主窗体

    最近需要做一个主窗体常态隐藏的程序,类似360卫士那样,只有托盘图标常显示.本以为隐藏主窗体很简单,但遇到了意想不到的情况. 无效的做法 最初的想法是设置主对话框资源的 Visiable 属性为 fa ...

  6. Vivian's Problem UVA - 1323(梅林素数+状压二进制)

    借鉴:https://blog.csdn.net/miku23736748/article/details/52135932 https://blog.csdn.net/acm_cxlove/arti ...

  7. 页面: Fork me on GitHub

    一.实现效果如下: 二.代码地址:https://github.com/blog/273-github-ribbons 这是一个国外网友开发的代码, 里面有很多种样式,可以自已随心选择. 三.我们只拿 ...

  8. BZOJ 2745: [HEOI2012]Bridge

    2745: [HEOI2012]Bridge Time Limit: 30 Sec  Memory Limit: 128 MBSubmit: 199  Solved: 90[Submit][Statu ...

  9. 正确理解 LEAL (Load Effective Address) 指令

    LEAL: leal S, D    ->    D ← &S 在 CSAPP (Computer Systems: A Programmer’s Perspective) 中,对 LE ...

  10. 解题:POI 2008 Station

    题面 水水的换根裸题,不过以前还真没做过换根的题 换根的思想就是在DFS中利用树的信息更新出当前点为根时的信息,具体来说一般是考虑子树外和子树内两部分 每个点的答案$ans$就是$ans[fa]+n- ...