CSS 书写规范
- class类: 小写字母,'-'分割;
- 图片: 小写字母,‘-’或者‘_’ 分割;
- 避免选择器嵌套层级过多,少于3级;
- 不要随意使用id,id应该按需使用,而不能滥用;
- 使用CSS缩写属性 ,比如padding:0 10px 5px 5px等等,这样精简代码同时又能提高用户的阅读体验;
- 不缩写单词,除非一看就明白的单词
CSS 字体单位
- px像素(Pixel),相对长度单位,像素px是相对于显示器屏幕分辨率而言的。
- em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸。
- rem也是相对长度单位,但相对的只是HTML根元素。
CSS 注释格式
- 用来区分页面的注释:如“/************************产品中心*******************************/”
- 模块的注释,如/*首页导航栏/ */
常用CSS命名规则
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
- 指南:guide
- 服务:service
- 热点:hot
- 新闻:news
- 下载:download
- 投票:vote
- 合作伙伴:partner
- 友情链接:link
- 版权:copyright
Class命名
(1)颜色:使用颜色的名称或者16进制代码
- .red { color: red; }
- .f60 { color: #f60; }
(2)字体大小,直接使用”font+字体大小”作为名称
- .font-12px { font-size: 12px; }
- .font-9pt {font-size: 9pt; }
(3)对齐样式,使用对齐目标的英文名称,如
- .left { float:left; }
- .bottom { float:bottom; }
(4)标题栏样式,使用”类别+功能”的方式命名,如
- .bar-news { }
- .bar-product { }
JS规范
JS命名规范
JS 变量命名
命名方法:小驼峰式命名
命名规范:前缀应当是名词。(函数的名字前缀为动词,以此区分变量和函数)
JS 函数命名
命名方法:小驼峰式命名法
命名规范:前缀应当为动词
命名建议:可使用常见动词约定
JS 常量命名
命名方法:名称全部大写
命名规范:使用大写字母和下划线来组合命名,下划线用以分割单词
JS 文件命名
使用短线(-)或句点(.)作为分隔符号,推荐使用句点,最好使用小写英文字符,不要使用其他符号和扩展字符,如 jQuery UI 1.9.0 的源文件可命名为"jquery-ui-1.9.0.js"
使用 .js 扩展名,这个扩展名的兼容性最好。其实任何扩展名都可以,只要是 text 类型、编码正确即可
用句点分隔表示名称中的从属关系,范围大的在前,如jQuery 的表单插件 Form既可以命名为jquery.form.js
JS注释格式
使用多行注释,以/*开头,*/结尾
JS 注意事项
书写格式
- JS 换行缩进:采用tab(打散为4个空格)
- 结束行需添加分号`;`
HTML 规范
1. 尽量减少标签层级;
2. 双标签必须闭合,单标签用斜线闭合;
3. HTML第一行统一使用HTML5标准<!DOCTYPE html>;
4.注意代码加注释,增加可读性,如:
<!--内容--> <div class="content"> <p>content</p> </div>
5. 代码缩进统一用4 空格;