做为一个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. Codeforces Round #248 (Div. 2) C. Ryouko's Memory Note

    题目链接:http://codeforces.com/contest/433/problem/C 思路:可以想到,要把某一个数字变成他的相邻中的数字的其中一个,这样总和才会减少,于是我们可以把每个数的 ...

  2. Linux学习笔记(20) Linux系统管理

    1.进程管理 进程是正在执行的一个程序或命令,每一个进程都是一个运行的实体,都有自己的地址空间,并占用一定的系统资源. 进程管理的作用有判断服务器健康状态.查看系统中所有进程及杀死进程.一般都可以采用 ...

  3. 如何给你的ASP.NET页面添加HelpPage

    如何给你的ASP.NET页面添加HelpPage 最近写了一些webAPI,所以需要搞一套API的帮助文档,google了一下,发现这是可以自动生成的,以下就是如何自动生成HelpPage的说明. 参 ...

  4. TextView展开和收回

    第一步:接口请求返回数据 第二步:使用handler和textview.getLineCount方法判断是否超过指定行数: community_desc_more.setVisibility(View ...

  5. Java api

    StringBuilder.charAt(int index); StringBuilder.deleteCharAt(int index); StringBuilder.setCharAt(int ...

  6. 快消品销售管理系统,PDA销售管理系统,销售拜访PDA,进销存管理PDA系统 移动扫描打印开单POS

    各种ERP软件的移动订单及移动车销解决方案是针对各个需要快速.便捷的,通过智能PDA移动智能终端设备实现销售订单下达及快速车销的应用解决方案.通过将移动订单及移动车销集成到ERP的移动解决方案,可以帮 ...

  7. Nico Nico Ni~(完全背包)

    Time Limit:2000MS  Memory Limit:65535K Type: Program   Language: Not Limited Description Lys plays L ...

  8. AngularJS $http

    $http 是 AngularJS 中的一个核心服务,用于读取远程服务器的数据.在服务器上读取数据: <div ng-app="myApp" ng-controller=&q ...

  9. 贪心 Codeforces Round #287 (Div. 2) A. Amr and Music

    题目传送门 /* 贪心水题 */ #include <cstdio> #include <algorithm> #include <iostream> #inclu ...

  10. LightOJ1230 Placing Lampposts(DP)

    题目大概说给一个森林求其最小点覆盖数,同时在最小点覆盖条件下输出最多有多少条边被覆盖两次. dp[0/1][u]表示以u为根的子树内的边都被覆盖且u不属于/属于覆盖集所需的最少点数 另外,用cnt[0 ...