前端命名规范与代码规范(一)

HTML与CSS命名规范

1.所有命名都使用英文小写

2.命名用引号包裹

3.用中横线连接

4.命名体现功能,不涉及表现样式(颜色、字体、边框、背景等)

QQ截图20180710115024.png

常用id的命名:

(1)页面结构

  • 容器: container

  • 页头:header

  • 内容:content/container

  • 页面主体:main

  • 页尾:footer

  • 导航:nav

  • 侧栏:sidebar

  • 栏目:column

  • 页面外围控制整体布局宽度:wrapper

  • 左右中:left right center

(2)导航

  • 导航:nav

  • 主导航:mainbav

  • 子导航: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

CSS书写规范

  • css属性书写顺序, 建议遵循 布局定位属性–>自身属性–>文本属性–>其他属性. 此条可根据自身习惯书写, 但尽量保证同类属性写在一起. 属性列举: 布局定位属性主要包括: margin & padding & float(包括clear) & position(相应的 top,right,bottom,left) & display & visibility & overflow等; 自身属性主要包括: width & height & background & border; 文本属性主要包括: font & color & text-align & text-decoration & text-indent等;其他属性包括: list-style(列表样式) & vertical-vlign & cursor & z-index(层叠顺序) & zoom等. 我所列出的这些属性只是最常用到的, 并不代表全部;

JS命名规范

  • js命名比较简单,现在大部分使用的是小驼峰和下划线命名。

  • jQuery变量要求首字符为’_’, 其他与原生JavaScript 规则相同, 如: _iTaoLun;

  • 类命名: 首字母大写, 驼峰式命名. 如 ITaoLun;

  • 函数命名: 首字母小写驼峰式命名. 如iTaoLun();

Javascrip规范可以参照eslint的规范

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容