关于前端:前端规范说明

12次阅读

共计 18449 个字符，预计需要花费 47 分钟才能阅读完成。

目录

1. 设计规范
1.1. 目录设计
1.2. 变量命名
1.3. 界面布局
1.4. 设计模式
1.5. 文档设计
2. 编码标准
3. 插件应用(以 vscode 为例)
4. 参考资源
5. 总结

写在后面

1. 设计规范

1.1. 目录设计

目录构造这一块设计参照 vue 脚手架做为一个参考的根底，次要还是要留神命名和构造组织治理。

  • 我的项目命名
    全副采纳小写形式，以中划线分隔。

    正例：mall-management-system/mall_management-system

    反例：mallManagementSystem

  • 目录命名
    全副采纳小写形式，以中划线分隔，有复数构造时，要采纳复数命名法，缩写不必复数

    正例：scripts / styles / components / images / utils / layouts / demo-styles / demo-scripts / img / doc / demo_scripts

    反例：script / style / demoStyles / imgs / docs

    【非凡】VUE 的我的项目中的 components 中的组件目录，应用 kebab-case 命名

    正例：head-search / page-loading / authorized / notice-icon

    反例：HeadSearch / PageLoading

    【非凡】VUE 的我的项目中的除 components 组件目录外的所有目录也应用 kebab-case 命名
    正例：page-one / shopping-car / user-management

    反例：ShoppingCar / UserManagement
    注：不论参考哪种命名形式，最重要是要规定对立

   ├── index.html                      入口页面
    ├── build                            构建脚本目录
    │   ├── build-server.js                 运行本地构建服务器，能够拜访构建后的页面
    │   ├── build.js                        生产环境构建脚本
    │   ├── dev-client.js                   开发服务器热重载脚本，次要用来实现开发阶段的页面主动刷新
    │   ├── dev-server.js                   运行本地开发服务器
    │   ├── utils.js                        构建相干工具办法
    │   ├── webpack.base.conf.js            wabpack 根底配置
    │   ├── webpack.dev.conf.js             wabpack 开发环境配置
    │   └── webpack.prod.conf.js            wabpack 生产环境配置
    ├── config                          我的项目配置
    │   ├── dev.env.js                      开发环境变量
    │   ├── index.js                        我的项目配置文件
    │   ├── prod.env.js                     生产环境变量
    │   └── test.env.js                     测试环境变量
    ├── mock                            mock 数据目录
    │   └── hello.js
    ├── package.json                    npm 包配置文件，外面定义了我的项目的 npm 脚本，依赖包等信息
    ├── src                             我的项目源码目录    
    │   ├── main.js                         入口 js 文件
    │   ├── app.vue                         根组件
    │   ├── components                      公共组件目录
    │   │   └── title.vue
    │   ├── assets                          资源目录，这里的资源会被 wabpack 构建
    │   │   └── images
    │   │       └── logo.png
    │   ├── routes                          前端路由
    │   │   └── index.js
    │   ├── store                           利用级数据（state）│   │   └── index.js
    │   └── views                           页面目录
    │       ├── hello.vue
    │       └── notfound.vue
    ├── static                          纯动态资源，不会被 wabpack 构建。└── test                            测试文件目录（unit&e2e）└── unit                            单元测试
            ├── index.js                        入口脚本
            ├── karma.conf.js                   karma 配置文件
            └── specs                           单测 case 目录
                └── Hello.spec.js

1.2. 变量命名

网上有很多优良的命名计划，能够参考看看，这里我只是选取比拟要害的根底准则。

  • 留神词性
    一般变量 / 属性应用用 名词

    var person = {name: 'Frank'}
var student = {
    grade: 3,
    class: 2
}

    bool 变量 / 属性用 形容词 或者 be 动词 或者 情态动词 或者hasX

    var person = {
    dead: false, // 如果是形容词，后面就没必要加 is，比方 isDead 就很废话
    canSpeak: true, // 情态动词有 can、should、will、need 等，情态动词前面接动词
    isVip: true, // be 动词有 is、was 等，前面个别接名词
    hasChildren: true, // has 加名词
}

    一般函数 / 办法用 动词 结尾

    var person = {run(){}, // 不及物动词
    drinkWater(){}, // 及物动词
    eat(foo){}, // 及物动词加参数（参数是名词）}

    回调、钩子函数用 介词 结尾，或用 动词的当初实现时态

    var person = {beforeDie(){},
    afterDie(){},
    // 或者
    willDie(){}
    dead(){} // 这里跟 bool 抵触，你只有不同时裸露 bool dead 和函数 dead 就行，怕抵触就用下面的 afterDie
}
button.addEventListener('click', onButtonClick)
var component = {beforeCreate(){},
    created(){},
    beforeMount(){},
    mounted(){},
    beforeUpdate(){},
    updated(){},
    activated(){},
    deactivated(){},
    beforeDestroy(){},
    destroyed(){},
    errorCaptured(){}
}

    容易混同的中央加 前缀
    div1.classList.add(‘active’) // DOM 对象
    div2.addClass(‘active’) // jQuery 对象
    不如改成
    domDiv1 或 elDiv1.classList.add(‘active’)
    $div2.addClass(‘active’)
    属性拜访器函数能够用名词
    $div.text() // 其实是 $div.getText()
    $div.text(‘hi’) // 其实是 $div.setText(‘hi’)

  • 留神一致性
    介词一致性
    如果你应用了 before + after，那么就在代码的所有中央都保持应用
    如果你应用了 before + 实现时，那么就保持应用
    如果你改来改去，就「不统一」了，不统一将导致「不可预测」
    程序一致性
    比方 updateContainerWidth 和 updateHeightOfContainer 的程序就令人很顺当，同样会引发「不可预测」
    表里一致性
    函数名必须完满体现函数的性能，既不能多也不能少。
    比方

    function getSongs(){return $.get('/songs).then((response){div.innerText = response.songs})
}

    就违反了表里一致性，getSongs 示意获取歌曲，并没有暗示这个函数会更新页面，然而实际上函数更新了 div，这就是表里不一，正确的 写法是

    要么纠正函数名

    
function getSongsAndUpdateDiv(){return $.get('/songs).then((response){div.innerText = response.songs})
}

    要么写成两个函数

    function getSongs(){return $.get('/songs)
}
function updateDiv(songs){div.innerText = response.songs}
getSongs().then((response)=>{updateDiv(response.songs)
})
  • 工夫一致性
    有可能随着代码的变迁，一个变量的含意曾经不同于它一开始的含意了，这个时候你须要及时改掉这个变量的名字。
    这一条是最难做到的，因为写代码容易，改代码难。如果这个代码组织得不好，很可能会呈现牵一发而动全身的状况（如全局变量就很难改）
    很多优良的框架或者代码，有很多优良的编码标准，咱们能够多参考多学习，灵活运用到理论的我的项目开发中。

1.3. 界面布局

web 端界面设计布局计划: 参考 elementUIweb 端 UI 框架设计。
挪动端的界面布局设计方案：参考 Vant 有赞挪动端 UI 框架设计。

1.4. 设计模式

  • 公布订阅模式
    以睿云的我的项目架构为例，每个患者信息依据不同就诊医院可能存在不同层级的组件和页面模块，并且在不同父组件上面的子组件或者孙组件之间传递数据的。

    能够看出，图中的数据传递十分复杂，并且不够直观，代码也显得十分臃肿，难以保护。显然仅仅用单向数据流或者双向绑定父子组件间的透传数据，并不能很好的满足一些复杂多变的我的项目需要。

    利用公布订阅模式进行专用组件进行全局治理，整个代码构造会十分清晰直观，保护起来也绝对不便。而后，无论子组件还是父组件都能通过这样来传递数据，所有的操作都在一个 eventbus 事件核心进行，简化其中多层组件的传递的复杂性和不确定性。

    this.eventBus.$emit() // 公布
this.eventBus.$on() // 订阅
this.eventBus.$off() // 勾销订阅

    能够依据我的项目的理论状况，抉择开发模式，没有最好的设计模式，只有最适宜理论我的项目能力大大简化我的项目复杂性，进步开发效率。

  • 表驱动编程
    所有一一对应的关系都能够用表来做，个别波及相干多个 if-else 等逻辑分支解决，分支最多不要超过三个。不仅代码冗余，而且不够清晰直观。switch…case 尽管能够肯定水平解决这样问题，然而当逻辑分支持续减少，代码过长，还是防止不了相干的问题产生。

应用表驱动进行代码改写：

const  types_table={
'appointmentSummary':fn1,
'patientDiseaseInfo':fn2,
'patientInfo':fn3,
'questionnaireFiller':fn4
...
}
types_table[type]()

依据不同判断条件对应不同的执行逻辑，将其组织成一个一个的函数，实现逻辑和代码实现的一个抽离。整个代码开发，十分的整洁清晰，而且易于扩大，最要害的是进步了代码的可读性。

1.5. 文档设计

jsdoc 用于编写前端组件阐明的 js 正文库，能够依据相干的正文阐明，生成相应的组件开发的文档阐明。无效缩小开发人员之间的开发沟通老本，进步开发效率。

/**
 * RuiJin 类存储一位客人的名字，并打招呼。*/
class RuiJin {
  /**
   * 次要是解释 data 外面对于瑞金医院的评估报告 js 的文件
   * 
   * @param {Object} patientInfo 评估报告的患者的根本信息数据
   * @param {Boolean} showPanel1 查看报告界面的第一个 tab 项的显隐
   * @param {Boolean} showPanel2 查看报告界面的第二个 tab 项的显隐
   * @param {Object} formData 新增模块的开关期和评分的抉择表格项
   * @param {String} evaluationResult1 当报告论断须要两页展现时，用于存储第二页的报告查看论断。* @param {String} evaluationId 存储以后报告的 id 项
   * @param {Boolean} printPageShow 是否显示超过第二页的打印页
   */
  constructor() {this.patientInfo = {}
    this.maGaitExport = {summaryDatas: [],
      walkDetails: [],}
    this.summaryData = []  // 概要
    this.statis = {walk: [], // 行走过程
      turn: [], // 转向过程
      fog: [], // 解冻详情}
    this.patientGaitModel = {}
    this.FogRecogn = {FogResults: {}, // 解冻步态详情
      FogDetails: [], // 解冻步态详情}
    this.isEdit = false // 是否处于编辑状态
    this.PressureRightEnd = [] // 右后脚跟压强
    this.expandState = [true, true, true, true] // 开展收起状态
    this.showScrollBtn = false
    this.canEdit = false // 查看论断是否能够编辑
    this.isShowDialog = false // 是否显示编辑医生弹窗

    this.currentTabIndex = 1 // 0 静止剖析报告 1 冻结指数
    this.freezeExpandState = [true, true, true] // 解冻步态开展收起状态
    this.evaluationResult1 = '闪动'
    this.dialog1 = true// 查看论断 dialog 阐明
    this.diagnostician = ''// 诊断医生
    this.tug6CheckItemList = []// 参数项 list
    this.fogDetailsEmptyCount = 0
    this.status = ''
    this.showPanel1 = false
    this.showPanel2 = true
    this.formData = {
      switchType: '',
      isSynchroScore: ''
    }
    this.evaluationResult1 = ''this.evaluationId =''
    this.printPageShow = true
  }
  /**
   * 筛选出报告外面所有查看项的试验时长的最大值
   * 
   */
  MaxSummaryCheckTime () {const allCheckTimes = reportData.maGaitExport.summaryDatas.map(item => Math.ceil((item && item.TrialTime) || 0))
    if (allCheckTimes.length === 0) {return 0} else {return Math.max(...allCheckTimes)
    }
  }
  /**
   * 用于判断打印界面是否须要展现两页
   * 首先通过 \n 换行符来切分判断，存在多少，在去判断在 \n 的每一段存在多少行
   * 通过一行以 48 列为基准进行计算。* 
   */
  disatibutePages () {const colsLength = Math.ceil(this.patientGaitModel.evaluationResult.length / 48)
    const rowsLength = this.patientGaitModel.evaluationResult.split('\n').length - 1
    if (colsLength + rowsLength > 15) {this.evaluationResult1 = this.patientGaitModel.evaluationResult.split('\n').slice(rowsLength - colsLength).join('')
      this.patientGaitModel.evaluationResult = this.patientGaitModel.evaluationResult.split('\n').slice(0, rowsLength - colsLength).join('')
    }
    this.printPageShow = false
  }
}

2. 编码标准

2.1.HTML 标准

HTML 作为形容网页构造的超文本标记语言，在百度始终有着宽泛的利用。本文档的指标是使 HTML 代码格调保持一致，容易被了解和被保护。

代码格调

缩进与换行

[强制] 应用 4 个空格做为一个缩进层级，不容许应用 2 个空格 或 tab 字符。

解释：
对于非 HTML 标签之间的缩进，比方 script 或 style 标签内容缩进，与 script 或 style 标签的缩进同级。

示例：

<style>
/* 款式内容的第一级缩进与所属的 style 标签对齐 */
ul {padding: 0;}
</style>
<ul>
    <li>first</li>
    <li>second</li>
</ul>
<script>
// 脚本代码的第一级缩进与所属的 script 标签对齐
require(['app'], function (app) {app.init();
});
</script>

[倡议] 每行不得超过 120 个字符。

解释：

过长的代码不容易浏览与保护。然而思考到 HTML 的特殊性，不做硬性要求。

命名

[强制] class 必须单词全字母小写，单词间以 - 分隔。

[强制] class 必须代表相应模块或部件的内容或性能，不得以款式信息进行命名。

示例：

<!-- good -->
<div class="sidebar"></div>

<!-- bad -->
<div class="left"></div>

[强制] 元素 id 保障在页面惟一。

解释：

同一个页面中，不同的元素蕴含雷同的 id，不合乎 id 的属性含意。

[倡议] id 倡议单词全字母小写，单词间以 - 分隔。同我的项目必须放弃格调统一。

[倡议] id、class 命名，在防止抵触并形容分明的前提下尽可能短。

示例：

<!-- good -->
<div id="nav"></div>
<!-- bad -->
<div id="navigation"></div>

<!-- good -->
<p class="comment"></p>
<!-- bad -->
<p class="com"></p>

<!-- good -->
<span class="author"></span>
<!-- bad -->
<span class="red"></span>

[强制] 禁止创立无款式信息的 class。

解释：

不容许 class 只用于让 JavaScript 抉择某些元素，class 应该具备明确的语义和款式。否则容易导致 CSS class 泛滥。

应用 id、属性抉择作为 js 是更好的形式。

[强制] 同一页面，应防止应用雷同的 name 与 id。

解释：

IE 浏览器会混同元素的 id 和 name 属性，document.getElementById 可能取得不冀望的元素。所以在对元素的 id 与 name 属性的命名须要十分小心。

一个比拟好的实际是，为 id 和 name 应用不同的命名法。

示例：

<input name="foo">
<div id="foo"></div>
<script>
// IE6 将显示 INPUT
alert(document.getElementById('foo').tagName);
</script>
````


###  标签


#### [强制] 标签名必须应用小写字母。示例：

<!– good –>
<p>Hello StyleGuide!</p>

<!– bad –>
<P>Hello StyleGuide!</P>


#### [强制] 对于无需自闭合的标签，不容许自闭合。解释：常见无需自闭合标签有 `input`、`br`、`img`、`hr` 等。示例：

<!– good –>
<input type=”text” name=”title”>

<!– bad –>
<input type=”text” name=”title” />


#### [强制] 对 `HTML5` 中规定容许省略的闭合标签，不容许省略闭合标签。解释：对代码体积要求十分严苛的场景，能够例外。比方：第三方页面应用的投放零碎。示例：

<!– good –>
<ul>

<li>first</li>
<li>second</li>

</ul>

<!– bad –>
<ul>

<li>first
<li>second

</ul>



#### [强制] 标签应用必须合乎标签嵌套规定。解释：比方 `div` 不得置于 `p` 中，`tbody` 必须置于 `table` 中。具体的标签嵌套规定参见 [HTML DTD](http://www.cs.tut.fi/~jkorpela/html5.dtd) 中的 `Elements` 定义局部。#### [倡议] HTML 标签的应用应该遵循标签的语义。(语义化)

解释：上面是常见标签语义

- p - 段落
- h1,h2,h3,h4,h5,h6 - 层级题目
- strong,em - 强调
- ins - 插入
- del - 删除
- abbr - 缩写
- code - 代码标识
- cite - 引述起源作品的题目
- q - 援用
- blockquote - 一段或长篇援用
- ul - 无序列表
- ol - 有序列表
- dl,dt,dd - 定义列表


示例：

<!– good –>
<p>Esprima serves as an important building block for some JavaScript language tools.</p>

<!– bad –>
<div>Esprima serves as an important <span class=”strong”>building block</span> for some JavaScript language tools.</div>



#### [倡议] 在 CSS 能够实现雷同需要的状况下不得应用表格进行布局。解释：在兼容性容许的状况下应尽量放弃语义正确性。对网格对齐和拉伸性有严格要求的场景容许例外，如多列简单表单。#### [倡议] 标签的应用应尽量简洁，缩小不必要的标签。示例：

<!– good –>
<img class=”avatar” src=”image.png”>

<!– bad –>
<span class=”avatar”>

<img src="image.png">

</span>


###  属性

#### [强制] 属性名必须应用小写字母。示例：

<!– good –>

…

<!– bad –>

…

`

#### [倡议] 布尔类型的属性，倡议不增加属性值。

示例：

`(html)
<input type=”text” disabled>
<input type=”checkbox” value=”1″ checked>
`

#### [倡议] 自定义属性倡议以 xxx- 为前缀，举荐应用 data-。

解释：

应用前缀有助于辨别自定义属性和规范定义的属性。

示例：

`(html)
<ol data-ui-type=”Select”></ol>
`

## 通用

### DOCTYPE

#### [强制] 应用 HTML5 的 doctype 来启用规范模式，倡议应用大写的 DOCTYPE。

示例：

`(html)
<!DOCTYPE html>
`

#### [倡议] 启用 IE Edge 模式。

示例：

`(html)
<meta http-equiv=”X-UA-Compatible” content=”IE=Edge”>
`

#### [倡议] 在 html 标签上设置正确的 lang 属性。

解释：

有助于进步页面的可拜访性，如：让语音合成工具确定其所应该采纳的发音，令翻译工具确定其翻译语言等。

示例：

`(html)
<html lang=”zh-CN”>
`

### 编码

#### [强制] 页面必须应用精简模式，明确指定字符编码。指定字符编码的 meta 必须是 head 的第一个间接子元素。

解释：

见 HTML5 Charset 能用吗 一文。

示例：

`(html)
<html>
<head>
<meta charset=”UTF-8″>
……
</head>
<body>
……
</body>
</html>
`

#### [倡议] HTML 文件应用无 BOM 的 UTF-8 编码。

解释：

UTF-8 编码具备更宽泛的适应性。BOM 在应用程序或工具解决文件时可能造成不必要的烦扰。

### CSS 和 JavaScript 引入

#### [强制] 引入 CSS 时必须指明 rel="stylesheet"。

示例：

`(html)
<link rel=”stylesheet” href=”page.css”>
`

#### [倡议] 引入 CSS 和 JavaScript 时毋庸指明 type 属性。

解释：

text/css 和 text/javascript 是 type 的默认值。

#### [倡议] 在 head 中引入页面须要的所有 CSS 资源。

解释：

在页面渲染的过程中，新的 CSS 可能导致元素的款式从新计算和绘制，页面闪动。

#### [倡议] JavaScript 该当放在页面开端，或采纳异步加载。

解释：

将 script 放在页面两头将阻断页面的渲染。出于性能方面的思考，如非必要，请恪守此条倡议。

示例：

`(html)
<body>
<!– a lot of elements –>
<script src=”init-behavior.js”></script>
</body>
`

## head

### title

#### [强制] 页面必须蕴含 title 标签申明题目。

#### [强制] title 必须作为 head 的间接子元素，并紧随 charset 申明之后。

解释：

title 中如果蕴含 ASCII 之外的字符，浏览器须要晓得字符编码类型能力进行解码，否则可能导致乱码。

示例：

`(html)
<head>
<meta charset=”UTF-8″>
<title> 页面题目 </title>
</head>
`

### favicon

#### [强制] 保障 favicon 可拜访。

解释：

在未指定 favicon 时，大多数浏览器会申请 Web Server 根目录下的 favicon.ico。为了保障 favicon 可拜访，防止 404，必须遵循以下两种办法之一：

1. 在 Web Server 根目录搁置 favicon.ico 文件。
2. 应用 link 指定 favicon。

示例：

`(html)
<link rel=”shortcut icon” href=”path/to/favicon.ico”>
`

### viewport

#### [倡议] 若页面欲对挪动设施敌对，需指定页面的 viewport。

解释：

viewport meta tag 能够设置可视区域的宽度和初始缩放大小，防止在挪动设施上呈现页面展现不失常。

比方，在页面宽度小于 980px 时，若需 iOS 设施敌对，该当设置 viewport 的 width 值来适应你的页面宽度。同时因为不同挪动设施分辨率不同，在设置时，该当应用 device-width 和 device-height 变量。

另外，为了使 viewport 失常工作，在页面内容款式布局设计上也要做相应调整，如防止相对定位等。对于 viewport 的更多介绍，能够参见 Safari Web Content Guide 的介绍

## 图片

#### [强制] 禁止 img 的 src 取值为空。提早加载的图片也要减少默认的 src。

解释：

src 取值为空，会导致局部浏览器从新加载一次以后页面，参考：https://developer.yahoo.com/p…

#### [倡议] 防止为 img 增加不必要的 title 属性。

解释：

多余的 title 影响看图体验，并且减少了页面尺寸。

#### [倡议] 为重要图片增加 alt 属性。

解释：

能够进步图片加载失败时的用户体验。

#### [倡议] 增加 width 和 height 属性，以防止页面抖动。

#### [倡议] 有下载需要的图片采纳 img 标签实现，无下载需要的图片采纳 CSS 背景图实现。

解释：

1. 产品 logo、用户头像、用户产生的图片等有潜在下载需要的图片，以 img 模式实现，能不便用户下载。
2. 无下载需要的图片，比方：icon、背景、代码应用的图片等，尽可能采纳 CSS 背景图实现。

## 表单

### 控件题目

#### [强制] 有文本题目的控件必须应用 label 标签将其与其题目相关联。

解释：

有两种形式：

1. 将控件置于 label 内。
2. label 的 for 属性指向控件的 id。

举荐应用第一种，缩小不必要的 id。如果 DOM 构造不容许间接嵌套，则应应用第二种。

示例：

`(html)
<label><input type=”checkbox” name=”confirm” value=”on”> 我已确认上述条款 </label>

<label for=”username”> 用户名：</label> <input type=”textbox” name=”username” id=”username”>
`

### 按钮

#### [强制] 应用 button 元素时必须指明 type 属性值。

解释：

button 元素的默认 type 为 submit，如果被置于 form 元素中，点击后将导致表单提交。为显示辨别其作用不便了解，必须给出 type 属性。

示例：

`(html)
<button type=”submit”> 提交 </button>
<button type=”button”> 勾销 </button>
`

#### [倡议] 尽量不要应用按钮类元素的 name 属性。

解释：

因为浏览器兼容性问题，应用按钮的 name 属性会带来许多难以发现的问题。具体情况可参考此文。

### 可拜访性

#### [倡议] 在针对挪动设施开发的页面时，依据内容类型指定输入框的 type 属性。

解释：

依据内容类型指定输入框类型，能取得能敌对的输出体验。

示例：

`(html)
<input type=”date”>
`

## 多媒体

#### [倡议] 当在古代浏览器中应用 audio 以及 video 标签来播放音频、视频时，该当留神格局。

解释：

音频应尽可能笼罩到如下格局：

* MP3
* WAV
* Ogg

视频应尽可能笼罩到如下格局：

* MP4
* WebM
* Ogg

#### [倡议] 在反对 HTML5 的浏览器中优先应用 audio 和 video 标签来定义音视频元素。

#### [倡议] 只在必要的时候开启音视频的自动播放。

## 2.2.css 编码标准

CSS 作为网页款式的描述语言，在百度始终有着宽泛的利用。本文档的指标是使 CSS 代码格调保持一致，容易被了解和被保护。

尽管本文档是针对 CSS 设计的，然而在应用各种 CSS 的预编译器 (如 less、sass、stylus 等) 时，实用的局部也应尽量遵循本文档的约定。

## 代码格调

### 文件

#### [倡议] CSS 文件应用无 BOM 的 UTF-8 编码。

解释：

UTF-8 编码具备更宽泛的适应性。BOM 在应用程序或工具解决文件时可能造成不必要的烦扰。

### 缩进

#### [强制] 应用 4 个空格做为一个缩进层级，不容许应用 2 个空格 或 tab 字符。

示例：

`css
.selector {
margin: 0;
padding: 0;
}
`

### 空格

#### [强制] 选择器 与 { 之间必须蕴含空格。

示例：

`css
.selector {
}
`

#### [强制] 属性名 与之后的 : 之间不容许蕴含空格，: 与 属性值 之间必须蕴含空格。

示例：

`css
margin: 0;
`

#### [强制] 列表型属性值 书写在单行时，, 后必须跟一个空格。

示例：

`css
font-family: Arial, sans-serif;
`

### 行长度

#### [强制] 每行不得超过 120 个字符，除非单行不可分割。

解释：

常见不可分割的场景为 URL 超长。

#### [倡议] 对于超长的款式，在款式值的 空格 处或 , 后换行，倡议按逻辑分组。

示例：

`css
/ 不同属性值按逻辑分组 /
background:
transparent url(aVeryVeryVeryLongUrlIsPlacedHere)
no-repeat 0 0;

/ 可反复屡次的属性，每次反复一行 /
background-image:
url(aVeryVeryVeryLongUrlIsPlacedHere)
url(anotherVeryVeryVeryLongUrlIsPlacedHere);

/ 相似函数的属性值能够依据函数调用的缩进进行 /
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0.04, rgb(88,94,124)),
color-stop(0.52, rgb(115,123,162))
);
`

### 选择器

#### [强制] 当一个 rule 蕴含多个 selector 时，每个选择器申明必须独占一行。

示例：

`css
/ good /
.post,
.page,
.comment {
line-height: 1.5;
}

/ bad /
.post, .page, .comment {
line-height: 1.5;
}
`

#### [强制] >、+、~ 选择器的两边各保留一个空格。

示例：

`css
/ good /
main > nav {
padding: 10px;
}

label + input {
margin-left: 5px;
}

input:checked ~ button {
background-color: #69C;
}

/ bad /
main>nav {
padding: 10px;
}

label+input {
margin-left: 5px;
}

input:checked~button {
background-color: #69C;
}
`

#### [强制] 属性选择器中的值必须用双引号突围。

解释：

不容许应用单引号，不容许不应用引号。

示例：

`css
/ good /
article[character=”juliet”] {
voice-family: “Vivien Leigh”, victoria, female;
}

/ bad /
article[character=’juliet’] {
voice-family: “Vivien Leigh”, victoria, female;
}
`

### 属性

#### [强制] 属性定义必须另起一行。

示例：

`css
/ good /
.selector {
margin: 0;
padding: 0;
}

/ bad /
.selector {margin: 0; padding: 0;}
`

#### [强制] 属性定义后必须以分号结尾。

示例：

`css
/ good /
.selector {
margin: 0;
}

/ bad /
.selector {
margin: 0
}
`

## 通用

### 选择器

#### [强制] 如无必要，不得为 id、class 选择器增加类型选择器进行限定。

解释：

在性能和维护性上，都有肯定的影响。

示例：

`css
/ good /
#error,
.danger-message {
font-color: #c00;
}

/ bad /
dialog#error,
p.danger-message {
font-color: #c00;
}
`

#### [倡议] 选择器的嵌套层级应不大于 3 级，地位靠后的限定条件应尽可能准确。

示例：

`css
/ good /
#username input {}
.comment .avatar {}

/ bad /
.page .header .login #username input {}
.comment div * {}
`

### 属性缩写

#### [倡议] 在能够应用缩写的状况下，尽量应用属性缩写。

示例：

`css
/ good /
.post {
font: 12px/1.5 arial, sans-serif;
}

/ bad /
.post {
font-family: arial, sans-serif;
font-size: 12px;
line-height: 1.5;
}
`

#### [倡议] 应用 border / margin / padding 等缩写时，应留神隐含值对理论数值的影响，的确须要设置多个方向的值时才应用缩写。

解释：

border / margin / padding 等缩写会同时设置多个属性的值，容易笼罩不须要笼罩的设定。如某些方向须要继承其余申明的值，则应该离开设置。

示例：

`css
/ centering <article class=”page”> horizontally and highlight featured ones /
article {
margin: 5px;
border: 1px solid #999;
}

/ good /
.page {
margin-right: auto;
margin-left: auto;
}

.featured {
border-color: #69c;
}

/ bad /
.page {
margin: 5px auto; / introducing redundancy /
}

.featured {
border: 1px solid #69c; / introducing redundancy /
}
`

### 属性书写程序

#### [倡议] 同一 rule set 下的属性在书写时，应按性能进行分组，并以 Formatting Model（布局形式、地位）> Box Model（尺寸）> Typographic（文本相干）> Visual（视觉效果） 的程序书写，以进步代码的可读性。

解释：

– Formatting Model 相干属性包含：position / top / right / bottom / left / float / display / overflow 等
– Box Model 相干属性包含：border / margin / padding / width / height 等
– Typographic 相干属性包含：font / line-height / text-align / word-wrap 等
– Visual 相干属性包含：background / color / transition / list-style 等

另外，如果蕴含 content 属性，应放在最后面。

示例：

`css
.sidebar {
/ formatting model: positioning schemes / offsets / z-indexes / display / … /
position: absolute;
top: 50px;
left: 0;
overflow-x: hidden;

/ box model: sizes / margins / paddings / borders / … /
width: 200px;
padding: 5px;
border: 1px solid #ddd;

/ typographic: font / aligns / text styles / … /
font-size: 14px;
line-height: 20px;

/ visual: colors / shadows / gradients / … /
background: #f5f5f5;
color: #333;
-webkit-transition: color 1s;
-moz-transition: color 1s;
transition: color 1s;
}
`

### 革除浮动

### !important

#### [倡议] 尽量不应用 !important 申明。

#### [倡议] 当须要强制指定款式且不容许任何场景笼罩时，通过标签内联和 !important 定义款式。

解释：

必须留神的是，仅在设计上 的确不容许任何其它场景笼罩款式 时，才应用内联的 !important 款式。通常在第三方环境的利用中应用这种计划。上面的 z-index 章节是其中一个非凡场景的典型样例。

## 值与单位

### 文本

#### [强制] 文本内容必须用双引号突围。

解释：

文本类型的内容可能在选择器、属性值等内容中。

示例：

`css
/ good /
html[lang|=”zh”] q:before {
font-family: “Microsoft YaHei”, sans-serif;
content: ““”;
}

html[lang|=”zh”] q:after {
font-family: “Microsoft YaHei”, sans-serif;
content: “””;
}

/ bad /
html[lang|=zh] q:before {
font-family: ‘Microsoft YaHei’, sans-serif;
content: ‘“’;
}

html[lang|=zh] q:after {
font-family: “Microsoft YaHei”, sans-serif;
content: “””;
}
`

### url()

#### [强制] url() 函数中的门路不加引号。

示例：

`css
body {
background: url(bg.png);
}
`

#### [倡议] url() 函数中的绝对路径可省去协定名。

示例：

`css
body {
background: url(//baidu.com/img/bg.png) no-repeat 0 0;
}
`

### 色彩

#### [强制] RGB 色彩值必须应用十六进制记号模式 #rrggbb。不容许应用 rgb()。

解释：

带有 alpha 的色彩信息能够应用 rgba()。应用 rgba() 时每个逗号后必须保留一个空格。

示例：

`css
/ good /
.success {
box-shadow: 0 0 2px rgba(0, 128, 0, .3);
border-color: #008000;
}

/ bad /
.success {
box-shadow: 0 0 2px rgba(0,128,0,.3);
border-color: rgb(0, 128, 0);
}
`

#### [强制] 色彩值能够缩写时，必须应用缩写模式。

示例：

`css
/ good /
.success {
background-color: #aca;
}

/ bad /
.success {
background-color: #aaccaa;
}
`

#### [强制] 色彩值不容许应用命名色值。

示例：

`css
/ good /
.success {
color: #90ee90;
}

/ bad /
.success {
color: lightgreen;
}
`

#### [倡议] 色彩值中的英文字符采纳小写。如不必小写也须要保障同一我的项目内放弃大小写统一。

示例：

`css
/ good /
.success {
background-color: #aca;
color: #90ee90;
}

/ good /
.success {
background-color: #ACA;
color: #90EE90;
}

/ bad /
.success {
background-color: #ACA;
color: #90ee90;
}
`

### 字体族
字体解决方案参考

#### [强制] font-family 按「西文字体在前、中文字体在后」、「成果佳 (品质高 / 更能满足需要) 的字体在前、成果个别的字体在后」的程序编写，最初必须指定一个通用字体族(serif / sans-serif )。

解释：

更具体阐明可参考本文。

示例：

`css
/ Display according to platform /
.article {
font-family: Arial, sans-serif;
}

/ Specific for most platforms /
h1 {
font-family: “Helvetica Neue”, Arial, “Hiragino Sans GB”, “WenQuanYi Micro Hei”, “Microsoft YaHei”, sans-serif;
}
`

#### [强制] font-family 不辨别大小写，但在同一个我的项目中，同样的 Family Name 大小写必须对立。

示例：

`css
/ good /
body {
font-family: Arial, sans-serif;
}

h1 {
font-family: Arial, “Microsoft YaHei”, sans-serif;
}

/ bad /
body {
font-family: arial, sans-serif;
}

h1 {
font-family: Arial, “Microsoft YaHei”, sans-serif;
}
`

### 字号

#### [强制] 须要在 Windows 平台显示的中文内容，其字号应不小于 12px。

解释：

因为 Windows 的字体渲染机制，小于 12px 的文字显示成果极差、难以辨认。

### 字体格调

#### [倡议] 须要在 Windows 平台显示的中文内容，不要应用除 normal 外的 font-style。其余平台也应慎用。

解释：

因为中文字体没有 italic 格调的实现，所有浏览器下都会 fallback 到 obilique 实现 (主动拟合为斜体)，小字号下 (特地是 Windows 下会在小字号下应用点阵字体的状况下) 显示成果差，造成浏览艰难。

### 字重

#### [强制] font-weight 属性必须应用数值形式形容。

解释：

CSS 的字重分 100 – 900 共九档，但目前受字体自身品质和浏览器的限度，实际上反对 400 和 700 两档，别离等价于关键词 normal 和 bold。

浏览器自身应用一系列启发式规定来进行匹配，在 <700 时个别匹配字体的 Regular 字重，>=700 时匹配 Bold 字重。

但已有浏览器开始反对 =600 时匹配 Semibold 字重 (见此表)，故应用数值形容减少了灵活性，也更简短。

示例：

`css
/ good /
h1 {
font-weight: 700;
}

/ bad /
h1 {
font-weight: bold;
}
`

### 行高

#### [倡议] line-height 在定义文本段落时，应应用数值。

解释：

将 line-height 设置为数值，浏览器会基于以后元素设置的 font-size 进行再次计算。在不同字号的文本段落组合中，能达到较为舒服的行间距离成果，防止在每个设置了 font-size 都须要设置 line-height。

当 line-height 用于管制垂直居中时，还是应该设置成与容器高度一致。

示例：

`css
.container {
line-height: 1.5;
}
`

## 变换与动画

#### [强制] 应用 transition 时应指定 transition-property。

示例：

`css
/ good /
.box {
transition: color 1s, border-color 1s;
}

/ bad /
.box {
transition: all 1s;
}
`

#### [倡议] 尽可能在浏览器能高效实现的属性上增加过渡和动画。

解释：

见本文，在可能的状况下应抉择这样四种变换：

* transform: translate(npx, npx);
* transform: scale(n);
* transform: rotate(ndeg);
* opacity: 0..1;

典型的，能够应用 translate 来代替 left 作为动画属性。

示例：

`css
/ good /
.box {
transition: transform 1s;
}
.box:hover {
transform: translate(20px); / move right for 20px /
}

/ bad /
.box {
left: 0;
transition: left 1s;
}
.box:hover {
left: 20px; / move right for 20px /
}
`

正文完
前端
发表至： 前端
2021-08-31
 0
关于前端:图扑数字孪生助力智慧冷链园区实现大数据实时监控
关于前端:CSS-transition-小技巧如何保留-hover-的状态
关于前端:前端不得不懂的架构知识上
详情flex布局的项目属性flex-flexgrow-与-flexshrink

站内搜索

-「」