智加文档 | 智加文档

HTML

命名规范
- class 应以功能或内容命名，不以表现形式命名
- 标签内部尽量不要出现内联样式，通用、单一样式统一写在全局样式里面
- 使用唯一的 id 作为 Javascript hook, 同时避免创建无样式信息的 class

html

<div id="userInfo" class="user-info w-100"></div>

<!--common.less-->
<style>
    .w-100 {
        width: 100%;
    }
</style>

DOCTYPE 声明
- HTML 文件必须加上 DOCTYPE 声明，并统一使用 HTML5 的文档声明
meta 标签
- 统一使用 “UTF-8” 编码
- SEO优化
- 优先使用 IE 最新版本和 Chrome
- 为移动设备添加视口

html

<!DOCTYPE html>

<meta charset="utf-8">

<!-- 页面关键词 -->
<meta name="keywords" content=""/>
<!-- 页面描述 -->
<meta name="description" content="">
<!-- 网页作者 -->
<meta name="author" content="">

<meta http-equiv="X-UA-Compatible" content="IE=edge，chrome=1">

<!-- device-width 是指这个设备最理想的 viewport 宽度 -->
<!-- initial-scale=1.0 是指初始化的时候缩放大小是1，也就是不缩放 -->
<!-- user-scalable=0 是指禁止用户进行缩放 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

标签属性
- 自闭合标签不要加上结束标签
- 自定义标签的名字如果是有两个单词，则用半角连接符(-)连接
- 元素属性值使用双引号语法

html

<input type="text">
<wp-tags type="primary">test</wp-tags>

灵活使用伪类
- 不要让非内容信息污染了你的 HTML，打乱了 HTML 结构。可以使用:before、:after 等伪类元素 大部分是用于内容前缀装饰条

html

<div class="user-info">
    this is info content
</div>

<style>
    .user-info:before {}
</style>

转义符的使用
- 特殊符号尽量使用转义符
- 不可使用空格转义符来实现间距

符号	描述	转义符
	空格	` `
<	小于	`<`
>	大于	`>`
&	和	`&`
"	引号	`"`

注释规范
- 单行注释
  - 一般用于简单的描述，如某些状态描述、属性描述等
  - 注释内容前后各一个空格字符，注释位于要注释代码的上面，单独占一行
- 模块注释
  - 注释内容前后各一个空格字符
  -  表示模块开始
  -  表示模块结束，模块与模块之间相隔一行
  - 模块注释内部嵌套模块注释，

html

<!-- comment text -->
<div></div>

<!-- S Comment Text -->
<div class="mod-a">
    <!-- mod-b text -->
    <div class="mod-b"></div>
</div>
<!-- E Comment Text -->

CSS

页面布局尽量使用 flex、grid 布局方式 （需要考虑边界样式，如果宽度太小或太大该如何处理）
除特殊样式场景外，不要去设置标签元素的width，尽量保持自适应状态
如果需要修改项目中使用到的组件样式，则需要在业务代码中对该组件添加唯一标识再进行样式修饰，防止样式全局污染
样式能简写的尽量简写:

html

<style>
    .user-info {
        display: flex;
        min-width: 100px;
        margin: 10px 20px 30px 40px;
        padding: 10px 20px 30px 40px;
    }
</style>

修改颜色透明度建议如下使用：

html

<style>
    .a {
        color: tint(#f00f00, 50%); // less 中的着色器
        background: rgba(255, 255, 255, .5);
    }
  .b {
    color: #f00f00ff; //后两位表示透明度 00 - ff: 0 - 1
  }
</style>

Javascript

使用块级作用域来进行命名

javascript

let a = 0 // 声明变量
const b = 10 // 声明常量

运算符前后都需要加上空格

javascript

let a = 1
let b = 2
let c = a + b

字符串统一使用单引号包裹

javascript

let name = '张三'

Other

在整个页面中，不可出现无用的空格，无用的换行，无用的注释代码，重复代码及console.log
所有代码换行缩进均为4个空格
下载蓝湖上的设计图上的图片资源，默认下载使用最高清的图片资源，防止模糊

HTML #

CSS #

Javascript #

Other #

HTML

CSS

Javascript

Other