做为一个web前端工程师,每天接触HTML、css就像吃饭一样,但是作为一名合作、优秀的web前端工程师,对DIV+CSS命名还是有一定的规范的,本文整理了一份web前端开发中DIV+CSS各种命名规范。

Div+CSS命名规范一. 窗体

头:header  
内容:content/container  
尾:footer  
导航:nav  
侧栏:sidebar
栏目:column  
页面外围控制整体布局宽度:wrapper  
左右中:left right center
登录条:loginbar  
标志:logo  
广告:banner  
页面主体:main  
热点:hot
新闻:news  
下载:download  
子导航:subnav  
菜单:menu
子菜单:submenu  
搜索:search  
友情链接:friendlink  
页脚:footer
版权:copyright  
滚动:scroll  
内容:content  
标签页:tab
文章列表:list  
提示信息:msg  
小技巧:tips  
栏目标题:title
加入:joinus  
指南:guild  
服务:service  
注册:regsiter
状态:status  
投票:vote  
合作伙伴:partner

二. css注释的写法   

/* Footer */   内容区  /* End Footer */
Html注释的写法 :<!--header头部-- >

三. id的命名

1. 页面结构  
容器: container  
页头:header  
内容:content/container   
页面主体:main  
页尾:footer  
导航:nav   
侧栏:sidebar  
栏目:column  
页面外围控制整体布局宽度:wrapper   
左右中:left right center
2. 导航  
导航:nav  
主导航:mainnav  
子导航:subnav   
顶导航:topnav  
边导航:sidebar  
左导航:leftsidebar   
右导航:rightsidebar  
菜单:menu  
子菜单:submenu   
标题: title  
摘要: summary
3. 功能  
标志:logo  
广告:banner  
登陆:login  
登录条:loginbar   
注册:regsiter  
搜索:search  
功能区:shop   
标题:title  
加入:joinus  
状态:status  
按钮:btn   
滚动:scroll  
标签页:tab  
文章列表:list  
提示信息:msg   
当前的: current  
小技巧:tips  
图标: icon  
注释:note   
指南:guild 
服务:service  
热点:hot  
新闻:news   
下载:download  
投票:vote  
合作伙伴:partner   
友情链接:link  
版权:copyright

四. class的命名

1. 颜色
使用颜色的名称或者16进制代码,如 .red { color: red; }; .f60 { color: #f60; }; .ff8600 { color: #ff8600; }
2. 字体大小
直接使用’font+字体大小’作为名称,如 .font12px { font-size: 12px; }; .font9pt {font-size: 9pt; }
3. 对齐样式
使用对齐目标的英文名称,如 .left { float:left; }; .bottom { float:bottom; }
4. 标题栏样式
使用’类别+功能’的方式命名,如 .barnews { }; .barproduct { }

注意事项:

1. 一律小写;   
2. 尽量用英文;   
3. 不加中杠和下划线;   
4. 尽量不缩写,除非一看就明白的单词,主要的: 
母版块:master.css  
模块:module.css  
基本共用:base.css   
布局,版面:layout.css  
主题:themes.css  
专栏:columns.css   
文字:font.css  
表单:forms.css  
补丁:mend.css  
打印:print.css

web前端开发CSS命名规范参考的更多相关文章

  1. WEB前端开发CSS基础样式全面总结

    Web前端开发css基础样式全面总结 颜色和单位的使用 颜色 用颜色的名字表示颜色,比如:red 用16进制表示演示 比如:#FF0000 用rgb数值表示颜色,rgb(红,绿,蓝),每个值都在0-2 ...

  2. 1+x 证书 Web 前端开发 css 专项练习

    官方QQ群 1+x 证书 Web 前端开发 css 专项练习 http://blog.zh66.club/index.php/archives/192/

  3. Web前端开发CSS规范总结

    作为Web前端开发必备语言,CSS为大家广为熟知,今天就跟大家分享下CSS规范总结,Web前端的小伙伴们看过来吧! CSS样式的权值(权重) 权值等级的定义 第一等:代表内联样式,如: style=” ...

  4. web前端开发——css

    一.css介绍 1.css是什么? Cascading Style Sheets缩写,层叠样式表.样式定义如何显示HTML元素,样式通常又会存在于样式表中. 2.为什么需要css? 使HTML页面变得 ...

  5. CSS命名规范参考及书写注意事项

    CSS书写顺序 *{ /*显示属性*/ display position float clear cursor … /*盒模型*/ margin padding width height /*排版*/ ...

  6. 【WEB前端】CSS书写规范

    古语有云:不以规矩,不成方圆.不管是国还是家还是...都得有规矩加以约束.同样,在我们程序猿的代码中也有一定的规矩——W3C标准,但是我今天不会讲那么高深的道理,我只想说说,我近些日子在开发中所总结出 ...

  7. Web前端开发CSS基础

    CSS 层叠样式表(英文全称:Cascading Style Sheets),是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言.CSS不 ...

  8. Web前端开发css基础样式总结

    颜色和单位的使用    颜色        用颜色的名字表示颜色,比如:red        用16进制表示演示 比如:#FF0000        用rgb数值表示颜色,rgb(红,绿,蓝),每个值 ...

  9. css 命名规范参考[转]

    命名空间 另外最好的实践就是当命名你的类名的时候,使用命名空间前缀来进行分类.这些前缀会在你的命名前添加一组字符,但是这个值能立刻标记每一个类的目的,在你看 HTML 或者样式的时候是很需要的.我使用 ...

随机推荐

  1. IplImage, CvMat, Mat 的关系

    IplImage, CvMat, Mat 的关系 转载来源:http://www.cnblogs.com/summerRQ/articles/2406109.html opencv中常见的与图像操作有 ...

  2. java中如何实现类似goto的作法

    goto虽然是java中保留的keyword,但是对于跳转这个语法对新手来说这个确实好用.为了提高程序的可靠性和可读性,Java语言目前是不支持无条件跳转的goto语句!! 幸亏java中有高仿跳转的 ...

  3. 用Access作为后台数据库支撑。

    /// <summary> /// 读取Excel文档 /// </summary> /// <param name="Path">文件名称&l ...

  4. checkbox全选和子选

    用jq: $(function() { var $subBox = $("input[name='subBox']"); $("#checkAll").clic ...

  5. python图像卷积

    import cv2import numpy as np #filier 2Dsavepath = "E:\\"image = cv2.imread('E:\\me.jpg');c ...

  6. hdu1166 线段树

    Problem Description C国的死对头A国这段时间正在进行军事演习,所以C国间谍头子Derek和他手下Tidy又开始忙乎了.A国在海岸线沿直线布置了N个工兵营地,Derek和Tidy的任 ...

  7. 安装 phpredis 扩展

    /************************************************//********************* phpredis  ***************** ...

  8. (转)POJ题目分类

    初期:一.基本算法:     (1)枚举. (poj1753,poj2965)     (2)贪心(poj1328,poj2109,poj2586)     (3)递归和分治法.     (4)递推. ...

  9. WordPress用户注册无法发送密码邮件怎么回事?

    wordpress无法发送电子邮件.可能原因:您的主机禁用了 mail() 函数 等等几句话.在网上一搜,很快找到了解决方案:使用wp-mail-smtp插件. 一.插件下载安装.可以在wordpre ...

  10. 每天一个linux命令---导出到文件

    导出Linux下的部分日志到文件,使用‘>’符号 例如: [calendar@test190 logs]$ monitor.log|grep getCalendarView > share ...