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

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 函数命名

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

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

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

 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个空格）
• 结束行需添加分号`;`

<!--内容-->
<div class="content">
    <p>content</p>
</div>

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有