资讯专栏INFORMATION COLUMN

团队合作前端书写习惯总结

番茄西红柿 / 1009人阅读

摘要:函数的名字前缀为动词,以此区分变量和函数示例函数命名命名方法小驼峰式命名法命名规范前缀应当为动词命名建议可使用常见动词约定动词含义返回值判断是否可执行某个动作权限函数返回一个布尔值。含有此值不含有此值判断是否为某个值函数返回一个布尔值。

CSS 规范

CSS 书写规范

  • class类: 小写字母,-分割;
  • 图片: 小写字母,‘-’或者‘_’ 分割;
  • 避免选择器嵌套层级过多,少于3级;
  • 不要随意使用id,id应该按需使用,而不能滥用;
  • 使用CSS缩写属性 ,比如padding:0 10px 5px 5px等等,这样精简代码同时又能提高用户的阅读体验;
  • 不缩写单词,除非一看就明白的单词

CSS 字体单位

  • px像素(Pixel),相对长度单位,像素px是相对于显示器屏幕分辨率而言的。
  • em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸。
  • rem也是相对长度单位,但相对的只是HTML根元素。
  • vw代表视窗(Viewport)的宽度为1%,如果视窗宽度为1000px,那么50vw = 500px。
  • vh代表窗口高度的百分,如果视窗高度为800px,那么50vh = 400px

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 变量命名

命名方法:小驼峰式命名

命名规范:前缀应当是名词。(函数的名字前缀为动词,以此区分变量和函数)

示例

var maxCount = 10;
var tableTitle = LoginTable;

 

JS 函数命名

命名方法:小驼峰式命名法

命名规范:前缀应当为动词

命名建议:可使用常见动词约定

动词 含义 返回值
can 判断是否可执行某个动作(权限) 函数返回一个布尔值。true:可执行;false:不可执行
has 判断是否含有某个值 函数返回一个布尔值。true:含有此值;false:不含有此值
is 判断是否为某个值 函数返回一个布尔值。true:为某个值;false:不为某个值
get 获取某个值 函数返回一个非布尔值
set 设置某个值 无返回值、返回是否设置成功或者返回链式对象
load 加载某些数据 无返回值或者返回是否加载完成的结果

 JS 常量命名

命名方法:名称全部大写

命名规范:使用大写字母和下划线来组合命名,下划线用以分割单词

示例

var MAX_COUNT = 10;
var URL = http://www.runoob.com;

 

 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标准;

4.注意代码加注释,增加可读性,如:


content

5. 代码缩进统一用4 空格;

 

参考:http://www.runoob.com/w3cnote/front-end-standards.html

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/1666.html

相关文章

  • 一个靠谱的前端开源项目需要什么?

    摘要:一个靠谱的应该包含以下几部分言简意赅的项目介绍你的项目解决了什么核心问题,有哪些令人心动的特性。除了在中提到遵循的开源协议外,一个靠谱的开源项目还会将该开源协议的内容文档放在自己的项目下方。 0. 前言 写前端代码一段时间之后,你可能会萌生做一个开源项目的想法,一方面将自己的好点子分享出去让更多的人受益,另一方面也可以在社区贡献的环境下学到更多的东西从而快速成长。但是开源项目也有开源项...

    hiyayiji 评论0 收藏0
  • 一个靠谱的前端开源项目需要什么?

    摘要:一个靠谱的应该包含以下几部分言简意赅的项目介绍你的项目解决了什么核心问题,有哪些令人心动的特性。除了在中提到遵循的开源协议外,一个靠谱的开源项目还会将该开源协议的内容文档放在自己的项目下方。 0. 前言 写前端代码一段时间之后,你可能会萌生做一个开源项目的想法,一方面将自己的好点子分享出去让更多的人受益,另一方面也可以在社区贡献的环境下学到更多的东西从而快速成长。但是开源项目也有开源项...

    DesGemini 评论0 收藏0
  • # 前端进阶--1.为什么要制定开发规范?

    摘要:使用代替可以使用工具代替结语我们应该根据公司情况业务场景和团队具体情况来制定适合自己的开发规范,开发规范不需要最好,也没有最好的开发规范,只有适合自己的。后期我将和大家分享如何制定开发规范。 0 为什么要有规范? 与性能无关 与功能无关 与效果无关 与能力无关 与工期无关 但是,规范必不可少 与效率相关(开发、迭代和维护,重点提升维护及迭代效率) 与团队相关(减少团队之间的不一致...

    TerryCai 评论0 收藏0
  • [前端开发]--分享个人习惯的命名方式

    摘要:最近在知乎上看到这个作为程序员,有没有让你感到既无语又崩溃的程序命名。今天,也分享下最近自己在使用的命名习惯,当然只是个人习惯。但是两个函数的命名,一个是,另一个是。关于的命名规范,应该很多人都是习惯用大驼峰命名。 把一件平凡的事情做好,很平凡。把一件平凡的事情坚持的做好,很不平凡。 1.前言 如果说计算机科学只存在两个难题:缓存失效和命名。那么我就觉得命名的难点只有两个:词汇量和坚持...

    Rocture 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<