您当前的位置：主页 > 技术探讨 >

    web前端规范

    时间：2018-08-09 15:06 日记人：arlen.zhou

    CSS规范

    1. 编码统一为utf-8;

    2.公用文件：协作开发过程中，会引入默认的base.css(里面包括了css reset、常用的css间距，css字体，css大小等，详细参见base.css)；

    1. class与id命名: ,样式名称由 小写英文 、 数字 和 _ 来组合命名, 如i_comment, fontred, width200; 避免使用中文拼音, 尽量使用简易的单词组合；命名要语义化, 简明化。

    2. 为JavaScript预留钩子的命名, 尽量使用id属性，可以更快的获取到dom。

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

    4. 书写代码前, 考虑并提高样式重复使用率;

    5. 背景图片请尽可能使用sprite技术, 减小http请求, 考虑到多人协作开发, sprite按模块制作;

    6. 必须为大区块样式添加注释, 小区块适量注释;

    7. 代码缩进与格式: 建议单行书写, 可根据自身习惯, 后期优化会统一处理;

    常用的CSS命名规则 
    头：header 
    内容：content/container 
    尾：footer 
    导航：nav 
    侧栏：sidebar 
    栏目：column 
    页面外围控制整体?丫挚矶龋?rapper 
    左右中：left right center 
    登录条：loginbar 
    标志：logo 
    广告：banner 
    页面主体：main 
    热点：hot 
    新闻：news 
    下载：download 
    子导航：subnav 
    菜单：menu 
    子菜单：submenu 
    搜索：search 
    友情链接：friendlink 
    页脚：footer 
    版权：copyright 
    滚动：scroll 
    内容：content 
    标签：tags 
    文章列表：list 
    提示信息：msg 
    小技巧：tips 
    栏目标题：title 
    加入：joinus 
    指南：guide 
    服务：service 
    注册：regsiter 
    状态：status 
    投票：vote 
    合作伙伴：partner

    注释的写法: 
    /* Header */ 
    内容区 
    /* End Header */

    id的命名: 
    1)页面结构

    容器: container 
    页头：header 
    内容：content/container 
    页面主体：main 
    页尾：footer 
    导航：nav 
    侧栏：sidebar 
    栏目：column 
    页面外围控制整体?丫挚矶龋?rapper 
    左右中：left right center

    (2)导航

    导航：nav 
    主导航：mainnav 
    子导航：subnav 
    顶导航：topnav 
    边导航：sidebar 
    左导航：leftsidebar 
    右导航：rightsidebar 
    菜单：menu 
    子菜单：submenu 
    标题: title 
    摘要: summary

    (3)功能

    标志：logo 
    广告：banner 
    登陆：login 
    登录条：loginbar 
    注册：register 
    搜索：search 
    功能区：shop 
    标题：title 
    加入：joinus 
    状态：status 
    按钮：btn 
    滚动：scroll 
    标?页：tab 
    文章列表：list 
    提示信息：msg 
    当前的: current 
    小技巧：tips 
    图标: icon 
    注释：note 
    指南：guild 
    服务：service 
    热点：hot 
    新闻：news 
    下载：download 
    投票：vote 
    合作伙伴：partner 
    友情链接：link 
    版权：copyright

    注意事项:: 
    1.一律小写; 
    2.尽量用英文; 
    3.不加中??和下划线; 
    4.尽量不缩写，除非一看就明白的单词。

    CSS样式表文件命名 
    主要的 master.css 
    模块 module.css 
    基本共用 base.css 
    布局、版面 layout.css 
    主题 themes.css 
    专栏 columns.css 
    文字 font.css 
    表单 forms.css 
    补丁 mend.css 
    打印 print.css
     

    JavaScript规范

    1. 文件编码统一为utf-8, 书写过程过, 每行代码结束必须有分号; 原则上所有功能均根据XXX项目需求原生开发, 以避免网上down下来的代码造成的代码污染(沉冗代码 || 与现有代码冲突 || …);

    2. 库引入: 原则上仅引入jQuery库, 若需引入第三方库, 须与团队其他人员讨论决定;

    3. 变量命名: 驼峰式命名. 原生JavaScript变量要求是纯英文字母, 首字母须小写, 如iTaoLun;

    另, 要求变量集中声明, 避免全局变量.

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

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

    3. 命名语义化, 尽可能利用英文单词或其缩写;

    4. 尽量避免使用存在兼容性及消耗资源的方法或属性, 比如eval_r() & innerText;

    5. 后期优化中, JavaScript非注释类中文字符须转换成unicode编码使用, 以避免编码错误时乱码显示;

    6. 代码结构明了, 加适量注释. 提高函数重用率;

    7. 注重与html分离, 减小reflow, 注重性能.

    图片规范

    1. 每个模块都会增加一个图片文件夹，方便后期维护和处理，请将同一个模块的图片放在同一个文件夹里面，图片文件命名尽量跟css文件的命名相同，尽量使用小写命名。

    2. 图片格式仅限于gif || png || jpg;

    3. 命名全部用小写英文字母 || 数字 || -(统一用分划线衔接) 的组合，其中不得包含汉字 || 空格 || 特殊字符；尽量用易懂的词汇, 便于团队其他成员理解; 另, 命名分头尾两部分, 用分划线隔开, 比如ad-left01.gif || btn-submit.gif;

    4. 在保证视觉效果的情况下选择最小的图片格式与图片质量, 以减少加载时间;

    5. 尽量避免使用半透明的png图片(若使用, 请参考css规范相关说明);

    6. 运用css sprite技术集中小的背景图或图标, 减小页面http请求。

    注释规范

    1. html注释: 注释格式 , 只能在注释的始末位置,不可置入注释文字区域;

    包围，请务必要分开注释的文字（即注释文字中加空格）

    1. css注释: 注释格式 ;/**/

    2. JavaScript注释, 单行注释使用’//这儿是单行注释’ ,多行注释使用 ;/**/



     

上一篇：react 学习之路 下一篇：仿外卖抛物小球功能 - vue + 原生js