首页 > 业界动态 > 正文

前端开发代码命名的整理

2019-04-01 博客 佚名 点击: 评论
Div+CSS命名规范 一 窗体 头:header   内容:content container   尾:footer   导航:nav   侧栏:sidebar 栏目:column   页面外围控制整体布局宽度:wr
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

转载文章请标明来自天晟网 timsion.com > 业界动态 >
标题:前端开发代码命名的整理
网址:http://www.timsion.com/news/5173.html

上一篇:从国际编码竞赛来看编程语言受众度
下一篇:我们在QCon等着你!APP Can重磅回馈开发者

免责声明:以上内容来自互联网和用户投稿,不代表本站的观点和立场,版权归原作者所有,如有侵权,请与我们联系。