前端代码规范(es6,eslint,vue)

相关文章推荐

英俊的刺猬 · Prettier, ESLint and ...· 1 周前 ·

爱喝酒的荔枝 · 动手实践：Oracle 和 Ruby on ...· 1 年前 ·

逼格高的山寨机 · python版本降级版本出现冲突_如何解决p ...· 1 年前 ·

骑白马的皮带 · pytorch里巧用optimizer.ze ...· 1 年前 ·

苦恼的地瓜 · 使用docker ...· 1 年前 ·

从容的青蛙 · fread函数详解 - 掘金· 1 年前 ·

腾讯云

备案控制台

开发者社区

TVP

文章/答案/技术大牛

写文章

专栏首页山河木马前端代码规范(es6,eslint,vue)

3 0

分享

<!-- bad -->
<div id="main">
  <div class="article">
    <div class="header">
      <h1>Blog post</h1>
      <p>Published: <span>21st Feb, 2015</span></p>
    <p>…</p>
</div>

<!-- good -->
  <article>
    <header>
      <h1>Blog post</h1>
      <p>Published: <time datetime="2015-02-21">21st Feb, 2015</time></p>
    </header>
    <p>…</p>
  </article>
</main>

<!-- bad -->
  <figure>
    <img alt=Company src=logo.png>
  </figure>
<!-- good -->
  <img alt=Company src=logo.png>
</h1>

<!-- bad -->
<!doctype html>
<html lang=en>
    <meta http-equiv=Content-Type content="text/html; charset=utf-8" />
    <title>Contact</title>
    <link rel=stylesheet href=style.css type=text/css />
  </head>
    <h1>Contact me</h1>
    <label>
      Email address:
      <input type=email placeholder=you@email.com required=required />
    </label>
    <script src=main.js type=text/javascript></script>
  </body>
</html>

<!-- good -->
<!doctype html>
<html lang=en>
  <meta charset=utf-8>
  <title>Contact</title>
  <link rel=stylesheet href=style.css>
  <h1>Contact me</h1>
  <label>
    Email address:
    <input type=email placeholder=you@email.com required>
  </label>
  <script src=main.js></script>
</html>

<!DOCTYPE html>
  </head>
</html>

强烈建议为 html 根元素指定 lang 属性，从而为文档设置正确的语言。这将有助于语音合成工具确定其所应该采用的发音，有助于翻译工具确定其翻译时所应遵守的规则等等。

<html lang="en">
  <!-- ... -->
</html>

<meta http-equiv="X-UA-Compatible" content="IE=Edge">

<head>
  <meta charset="UTF-8">
</head>

<!-- bad -->
    <h1><img alt="Logo" src="logo.png"></h1>
    <!-- good -->
    <h1><img alt="My Company, Inc." src="logo.png"></h1>

<!-- bad -->
<!doctype html>
<meta charset=utf-8>
<script src=analytics.js></script>
<title>Hello, world.</title>
<p>...</p>
<!-- good -->
<!doctype html>
<meta charset=utf-8>
<title>Hello, world.</title>
<p>...</p>
<script src=analytics.js></script>

id class name data-xxx src, for, type, href title, alt aria-xxx, role value style

/* bad */
div {
  color: red
/* good */
div {
  color: red;
}

/* bad */
img {
  display: block;
/* good */
img {
  vertical-align: middle;
}

/* bad */
div {
  width: 100px;
  position: absolute;
  right: 0;
/* good */
div {
  width: 100px;
  margin-left: auto;
}

/* bad */
div:first-of-type :last-child > p ~ *
/* good */
div:first-of-type .info

/* bad */
img[src$=svg], ul > li:first-child {
  opacity: 0;
/* good */
[src$=svg], ul > :first-child {
  opacity: 0;
}

/* bad */
.bar {
  color: green !important;
.foo {
  color: red;
/* good */
.foo.bar {
  color: green;
.foo {
  color: red;
}

/* bad */
  visibility: hidden;
li:first-child {
  visibility: visible;
/* good */
li + li {
  visibility: hidden;
}

/* bad */
div h1, div p {
  text-shadow: 0 1px 0 #fff;
/* good */
div {
  text-shadow: 0 1px 0 #fff;
}

/* bad */
div {
  transition: all 1s;
  top: 50%;
  margin-top: -10px;
  padding-top: 5px;
  padding-right: 10px;
  padding-bottom: 20px;
  padding-left: 10px;
/* good */
div {
  transition: 1s;
  top: calc(50% - 10px);
  padding: 5px 10px 20px;
}

/* bad */
:nth-child(2n + 1) {
  transform: rotate(360deg);
/* good */
:nth-child(odd) {
  transform: rotate(1turn);
}

/* bad */
div:hover {
  animation: move 1s forwards;
@keyframes move {
  100% {
    margin-left: 100px;
/* good */
div:hover {
  transition: 1s;
  transform: translateX(100px);
}

/* bad */
div {
  margin: 0px;
  font-size: .9em;
  line-height: 22px;
  transition: 500ms;
/* good */
div {
  margin: 0;
  font-size: .9rem;
  line-height: 1.5;
  transition: .5s;
}

/* bad */
div {
  color: hsl(103, 54%, 43%);
/* good */
div {
  color: #5a3;
}

/* bad */
div::before {
  content: url(white-circle.svg);
/* good */
div::before {
  content: "";
  display: block;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
}

/* bad */
div {
  // position: relative;
  transform: translateZ(0);
/* good */
div {
  /* position: relative; */
  will-change: transform;
}

/* Bad CSS */
.selector, .selector-secondary, .selector[type=text] {
  padding:15px;
  margin:0px 0px 15px;
  background-color:rgba(0, 0, 0, 0.5);
  box-shadow:0px 1px 2px #CCC,inset 0 1px 0 #FFFFFF
/* Good CSS */
.selector,
.selector-secondary,
.selector[type="text"] {
  padding: 15px;
  margin-bottom: 15px;
  background-color: rgba(0,0,0,.5);
  box-shadow: 0 1px 2px #ccc, inset 0 1px 0 #fff;
}

.declaration-order {
  /*定位 */
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 100;
  /* 盒模型 */
  display: block;
  box-sizing: border-box;
  width: 100px;
  height: 100px;
  padding: 10px;
  border: 1px solid #e5e5e5;
  border-radius: 3px;
  margin: 10px;
  float: right;
  overflow: hidden;
  /* 关于文字 */
  font: normal 13px "Helvetica Neue", sans-serif;
  line-height: 1.5;
  text-align: center;
  /* 关于颜色，背景 */
  background-color: #f5f5f5;
  color: #fff;
  opacity: .8;
  /*其他 */
  cursor: pointer;
}

// LESS
@color: #4D926F;
#header {
  color: @color;
  color: @color;
/* 生成的 CSS */
#header {
  color: #4D926F;
  color: #4D926F;
  //LESS
.bordered {
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
#menu a {
  color: #111;
  .bordered;
.post a {
  color: red;
  .bordered;
/* 生成的 CSS */
#menu a {
  color: #111;
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
.post a {
  color: red;
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}

#header {
  color: black;
  .navigation {
    font-size: 12px;
  .logo {
    width: 300px;
    &:hover { text-decoration: none }
}

#bundle {
  .button () {
    display: block;
    border: 1px solid black;
    background-color: grey;
    &:hover { background-color: white }
  .tab { ... }
  .citation { ... }
/*你只需要在 #header a中像这样引入 .button:*/
#header a {
  color: orange;
  #bundle > .button;
}

function hello (name) {
  console.log('hi', name)
}

console.log('hello there')
$("<div class='box'>")

function myFunction () {
  var result = something()   // ✗ avoid
}

if (condition) { ... }   // ✓ ok
if(condition) { ... }    // ✗ avoid

function name (arg) { ... }   // ✓ ok
function name(arg) { ... }    // ✗ avoid
run(function () { ... })      // ✓ ok
run(function() { ... })       // ✗ avoid

if (name === 'John')   // ✓ ok
if (name == 'John')    // ✗ avoid

if (name !== 'John')   // ✓ ok
if (name != 'John')    // ✗ avoid

// ✓ ok
var x = 2
var message = 'hello, ' + name + '!'
// ✗ avoid
var x=2
var message = 'hello, '+name+'!'

// ✓ ok
var list = [1, 2, 3, 4]
function greet (name, options) { ... }
// ✗ avoid
var list = [1,2,3,4]
function greet (name,options) { ... }

// ✓ ok
if (condition) {
  // ...
} else {
  // ...
}

// ✗ avoid
if (condition)
  // ...
  // ...
}

// ✓ ok
if (options.quiet !== true) console.log('done')

// ✓ ok
if (options.quiet !== true) {
  console.log('done')
}

// ✗ avoid
if (options.quiet !== true)
  console.log('done')

// ✓ ok
run(function (err) {
  if (err) throw err
  window.alert('done')
})

// ✗ avoid
run(function (err) {
  window.alert('done')
})

window.alert('hi')   // ✓ ok

// ✓ ok
var value = 'hello world'
console.log(value)

// ✗ avoid
var value = 'hello world'
console.log(value)

// ✓ ok
var location = env.development ? 'localhost' : 'www.api.com'
// ✓ ok
var location = env.development
  ? 'localhost'
  : 'www.api.com'

// ✗ avoid
var location = env.development ?
  'localhost' :
  'www.api.com'

// ✓ ok
var silent = true
var verbose = true

// ✗ avoid
var silent = true, verbose = true
// ✗ avoid
var silent = true,
    verbose = true

// ✓ ok
while ((m = text.match(expr))) {
  // ...
// ✗ avoid
while (m = text.match(expr)) {
  // ...
}

function foo () {return true}    // ✗ avoid
function foo () { return true }  // ✓ ok

function my_function () { }    // ✗ avoid
function myFunction () { }     // ✓ ok
var my_var = 'hello'           // ✗ avoid
var myVar = 'hello'            // ✓ ok

var obj = {
    message: 'hello',   // ✗ avoid
  }

var obj = {
    foo: 'foo'
    ,bar: 'bar'   // ✗ avoid
  var obj = {
    foo: 'foo',
    bar: 'bar'   // ✓ ok
  }

console.log ('hello') // ✗ avoid
console.log('hello')  // ✓ ok

var obj = { 'key' : 'value' }    // ✗ avoid
var obj = { 'key' :'value' }     // ✗ avoid
var obj = { 'key':'value' }      // ✗ avoid

var obj = { 'key': 'value' }     // ✓ ok

function animal () {}
var dog = new animal()    // ✗ avoid

function Animal () {}
var dog = new Animal()    // ✓ ok

function Animal () {}
var dog = new Animal    // ✗ avoid
var dog = new Animal()  // ✓ ok

var person = {
  set name (value) {    // ✗ avoid
    this.name = value
}

var person = {
  set name (value) {
    this.name = value
  get name () {         // ✓ ok
    return this.name
}

class Dog {
  constructor () {
    super()   // ✗ avoid
class Dog extends Mammal {
  constructor () {
    super()   // ✓ ok
}

var nums = new Array(1, 2, 3)   // ✗ avoid
var nums = [1, 2, 3]            // ✓ ok

function foo (n) {
  if (n <= 0) return
  arguments.callee(n - 1)   // ✗ avoid
function foo (n) {
  if (n <= 0) return
  foo(n - 1)
}

class Dog {}
Dog = 'Fido'    // ✗ avoid

const score = 100
score = 125       // ✗ avoid

if (false) {    // ✗ avoid
  // ...
if (x === 0) {  // ✓ ok
  // ...
while (true) {  // ✓ ok
  // ...
}

var pattern = /\x1f/    // ✗ avoid
var pattern = /\x20/    // ✓ ok

function sum (a, b) {
  debugger      // ✗ avoid
  return a + b
}

var name
delete name     // ✗ avoid

function sum (a, b, a) {  // ✗ avoid
  // ...
function sum (a, b, c) {  // ✓ ok
  // ...
}

class Dog {
  bark () {}
  bark () {}    // ✗ avoid
}

var user = {
  name: 'Jane Doe',
  name: 'John Doe'    // ✗ avoid
}

switch (id) {
  case 1:
    // ...
  case 1:     // ✗ avoid
}

import { myFunc1 } from 'module'
import { myFunc2 } from 'module'          // ✗ avoid
import { myFunc1, myFunc2 } from 'module' // ✓ ok

const myRegex = /^abc[]/      // ✗ avoid
const myRegex = /^abc[a-z]/   // ✓ ok

const { a: {} } = foo         // ✗ avoid
const { a: { b } } = foo      // ✓ ok

eval( "var result = user." + propName ) // ✗ avoid
var result = user[propName]             // ✓ ok

try {
  // ...
} catch (e) {
  e = 'new value'             // ✗ avoid
try {
  // ...
} catch (e) {
  const newVal = 'new value'  // ✓ ok
}

Object.prototype.age = 21     // ✗ avoid

const name = function () {
  getName()
}.bind(user)    // ✗ avoid
const name = function () {
  this.getName()
}.bind(user)    // ✓ ok

const result = true
if (!!result) {   // ✗ avoid
  // ...
const result = true
if (result) {     // ✓ ok
  // ...
}

const myFunc = (function () { })   // ✗ avoid
const myFunc = function () { }     // ✓ ok

switch (filter) {
  case 1:
    doSomething()    // ✗ avoid
  case 2:
    doSomethingElse()
switch (filter) {
  case 1:
    doSomething()
    break           // ✓ ok
  case 2:
    doSomethingElse()
switch (filter) {
  case 1:
    doSomething()
    // fallthrough // ✓ ok
  case 2:
    doSomethingElse()
}

const discount = .5      // ✗ avoid
const discount = 0.5     // ✓ ok

function myFunc () { }
myFunc = myOtherFunc    // ✗ avoid

window = {}     // ✗ avoid

setTimeout("alert('Hello world')")                   // ✗ avoid
setTimeout(function () { alert('Hello world') })     // ✓ ok

if (authenticated) {
  function setAuthUser () {}    // ✗ avoid
}

RegExp('[a-z')    // ✗ avoid
RegExp('[a-z]')   // ✓ ok

function myFunc () /*<NBSP>*/{}   // ✗ avoid

Foo.prototype.__iterator__ = function () {}   // ✗ avoid

var score = 100
function game () {
  score: 50         // ✗ avoid
}

label:
  while (true) {
    break label     // ✗ avoid
  }

function myFunc () {
  {                   // ✗ avoid
    myOtherFunc()
function myFunc () {
  myOtherFunc()       // ✓ ok
}

const id =    1234    // ✗ avoid
const id = 1234       // ✓ ok

const message = 'Hello \ world'     // ✗ avoid

new Character()                     // ✗ avoid
const character = new Character()   // ✓ ok

var sum = new Function('a', 'b', 'return a + b')    // ✗ avoid

let config = new Object()   // ✗ avoid

const myModule = new require('my-module')    // ✗ avoid

const foo = new Symbol('foo')   // ✗ avoid

const message = new String('hello')   // ✗ avoid

const math = Math()   // ✗ avoid

const num = 042     // ✗ avoid
const pathToFile = path.join(__dirname, 'app.js')   // ✓ ok

const foo = obj.__proto__               // ✗ avoid
const foo = Object.getPrototypeOf(obj)  // ✓ ok

let name = 'John'
let name = 'Jane'     // ✗ avoid
let name = 'John'
name = 'Jane'         // ✓ ok

const regexp = /test value/   // ✗ avoid
const regexp = /test {3}value/  // ✓ ok
const regexp = /test value/     // ✓ ok

function sum (a, b) {
  return result = a + b     // ✗ avoid
function sum (a, b) {
  return (result = a + b)   // ✓ ok
}

name = name   // ✗ avoid

if (score === score) {}   // ✗ avoid

if (doSomething(), !!test) {}   // ✗ avoid

let undefined = 'value'     // ✗ avoid

let fruits = ['apple',, 'orange']       // ✗ avoid

const message = 'Hello ${name}'   // ✗ avoid
const message = `Hello ${name}`   // ✓ ok

class Dog extends Animal {
  constructor () {
    this.legs = 4     // ✗ avoid
    super()
}

throw 'error'               // ✗ avoid
throw new Error('error')    // ✓ ok

let name = undefined    // ✗ avoid
let name
name = 'value'          // ✓ ok

for (let i = 0; i < items.length; j++) {...}    // ✗ avoid
for (let i = 0; i < items.length; i++) {...}    // ✓ ok

let score = val ? val : 0     // ✗ avoid
let score = val || 0          // ✓ ok

function doSomething () {
  return true
  console.log('never called')     // ✗ avoid
}

try {
  // ...
} catch (e) {
  // ...
} finally {
  return 42     // ✗ avoid
}

if (!key in obj) {}       // ✗ avoid

sum.call(null, 1, 2, 3)   // ✗ avoid

const user = { ['name']: 'John Doe' }   // ✗ avoid
const user = { name: 'John Doe' }       // ✓ ok

class Car {
  constructor () {      // ✗ avoid
}

let message = 'Hell\o'  // ✗ avoid

import { config as config } from './config'     // ✗ avoid
import { config } from './config'               // ✓ ok

user .name      // ✗ avoid
user.name       // ✓ ok

with (val) {...}    // ✗ avoid

const user = {
  name: 'Jane Doe', age: 30,
  username: 'jdoe86'            // ✗ avoid
const user = { name: 'Jane Doe', age: 30, username: 'jdoe86' }    // ✓ ok
const user = {
  name: 'Jane Doe',
  age: 30,
  username: 'jdoe86'
}

if (user) {
                            // ✗ avoid
  const name = getName()
if (user) {
  const name = getName()    // ✓ ok
}

fn(... args)    // ✗ avoid
fn(...args)     // ✓ ok

for (let i = 0 ;i < items.length ;i++) {...}    // ✗ avoid
for (let i = 0; i < items.length; i++) {...}    // ✓ ok

if (admin){...}     // ✗ avoid
if (admin) {...}    // ✓ ok

getName( name )     // ✗ avoid
getName(name)       // ✓ ok

typeof!admin        // ✗ avoid
typeof !admin        // ✓ ok

//comment // ✗ avoid
// comment // ✓ ok
/*comment*/         // ✗ avoid
/* comment */       // ✓ ok

const message = `Hello, ${ name }`    // ✗ avoid
const message = `Hello, ${name}`      // ✓ ok

if (price === NaN) { }      // ✗ avoid
if (isNaN(price)) { }       // ✓ ok

typeof name === 'undefimed'     // ✗ avoid
typeof name === 'undefined'     // ✓ ok

const getName = function () { }()     // ✗ avoid
const getName = (function () { }())   // ✓ ok
const getName = (function () { })()   // ✓ ok

yield* increment()    // ✗ avoid
yield * increment()   // ✓ ok

if (42 === age) { }    // ✗ avoid
if (age === 42) { }    // ✓ ok

window.alert('hi')   // ✗ avoid
window.alert('hi');  // ✓ ok

// ✓ ok
;(function () {
  window.alert('ok')
// ✗ avoid
(function () {
  window.alert('ok')
}())

// ✓ ok
;[1, 2, 3].forEach(bar)
// ✗ avoid
[1, 2, 3].forEach(bar)

// ✓ ok
;`hello`.indexOf('o')
// ✗ avoid
`hello`.indexOf('o')

;[1, 2, 3].forEach(bar)

var nums = [1, 2, 3]
nums.forEach(bar)

const arr = [1, 2, 3, 4];
// bad
const first = arr[0];
const second = arr[1];
// good
const [first, second] = arr;

// bad
function getFullName(user) {
  const firstName = user.firstName;
  const lastName = user.lastName;
// good
function getFullName(obj) {
  const { firstName, lastName } = obj;
// best
function getFullName({ firstName, lastName }) {
}

// bad
function processInput(input) {
  return [left, right, top, bottom];
// good
function processInput(input) {
  return { left, right, top, bottom };
const { left, right } = processInput(input);

// bad
const a = {};
a.x = 3;
// if reshape unavoidable
const a = {};
Object.assign(a, { x: 3 });
// good
const a = { x: null };
a.x = 3;

// bad
const obj = {
  id: 5,
  name: 'San Francisco',
obj[getKey('enabled')] = true;
// good
const obj = {
  id: 5,
  name: 'San Francisco',
  [getKey('enabled')]: true,
};

var ref = 'some value';
// bad
const atom = {
  ref: ref,
  value: 1,
  addValue: function (value) {
    return atom.value + value;
// good
const atom = {
  value: 1,
  addValue(value) {
    return atom.value + value;
};

// bad
const len = items.length;
const itemsCopy = [];
let i;
for (i = 0; i < len; i++) {
  itemsCopy[i] = items[i];
// good
const itemsCopy = [...items];

const foo = document.querySelectorAll('.foo');
const nodes = Array.from(foo);

(() => {
  console.log('Welcome to the Internet.');
})();

// bad
[1, 2, 3].map(function (x) {
  return x * x;
// good
[1, 2, 3].map((x) => {
  return x * x;
// best
[1, 2, 3].map(x => x * x);

let map = new Map(arr);
for (let key of map.keys()) {
  console.log(key);
for (let value of map.values()) {
  console.log(value);
for (let item of map.entries()) {
  console.log(item[0], item[1]);
}

// bad
function Queue(contents = []) {
  this._queue = [...contents];
Queue.prototype.pop = function() {
  const value = this._queue[0];
  this._queue.splice(0, 1);
  return value;
// good
class Queue {
  constructor(contents = []) {
    this._queue = [...contents];
  pop() {
    const value = this._queue[0];
    this._queue.splice(0, 1);
    return value;
}

// bad
const inherits = require('inherits');
function PeekableQueue(contents) {
  Queue.apply(this, contents);
inherits(PeekableQueue, Queue);
PeekableQueue.prototype.peek = function() {
  return this._queue[0];
// good
class PeekableQueue extends Queue {
  peek() {
    return this._queue[0];
}

// bad
promise
  .then(function(data) {
    // success
  }, function(err) {
    // error
// good
promise
  .then(function(data) { //cb
    // success
  .catch(function(err) {
    // error
  });

<!-- 推荐 -->
<app-header></app-header>
<user-list></user-list>
<range-slider></range-slider>
<!-- 避免 -->
<btn-group></btn-group> <!-- 虽然简短但是可读性差. 使用 `button-group` 替代 -->
<ui-slider></ui-slider> <!-- ui 前缀太过于宽泛，在这里意义不明确 -->
<slider></slider> <!-- 与自定义元素规范不兼容 -->

<template>
  <input type="range" v-model="value" :max="max" :min="min">
</template>
<script type="text/javascript">
  export default {
    props: {
      max: {
        type: Number, // 这里添加了数字类型的校验
        default() { return 10; },
      min: {
        type: Number,
        default() { return 0; },
      value: {
        type: Number,
        default() { return 4; },
</script>

// this is comment

/* */

// bad
/* start end */
// good
/* here is line 1 here is line 2 */

// 初始化value变量为0
var value = 0;

// TODO 未处理IE6-8的兼容性
function setOpacity(node, val) {
    node.style.opacity = val;
}

/** * 模块说明 * @module 模块名 */
/** * Core模块提供最基础、最核心的接口 * @module Core */

/** * 类说明 * @class 类名 * @constructor */

/** * 节点集合类 * @class NodeList * @constructor * @param {ArrayLike<Element>} nodes 初始化节点 */

/** * 方法说明 * @method 方法名 * @for 所属类名 * @param {参数类型} 参数名 参数说明 * @return {返回值类型} 返回值说明 */

/** * 返回当前集合中指定位置的元素 * @method * @for NodeList * @param {Number} [i=0] 位置下标。如果为负数，则从集合的最后一个元素开始倒数 * @return {Element} 指定元素 */

山河木马

前端代码规范(es6,eslint,vue)

前端代码规范(es6,eslint,vue)

前端开发规范

一、HTML

1.语义化标签

HTML5 提供了很多语义化元素，更好地帮助描述内容。希望你能从这些丰富的标签库中受益。

请确保正确使用语义化的标签，错误的用法甚至不如保守的用法。

简洁

确保代码简洁，不要再采用XHTML的旧做法。

HTML5 doctype

语言属性

IE 兼容模式

字符编码

可用性

性能

除非有非要在加载内容前加载脚本的必要性由，不然别这样做，这样会阻碍网页渲染。如果你的样式表很大，必须独立放到一个文件里。两次HTTP 请求不会显著降低性能。

属性顺序

HTML 属性应该按照特定的顺序出现以保证易读性。

二、CSS

分号

不能漏写分号

流

尽量不要改变元素默认行为。保持默认的文本流。比如，移出一个图片下面的一个白块，不影响原本的显示：

类似的，尽量不要改变浮动方式。

选择器

紧密耦合DOM选择器，三个层级以上建议加class：

避免不必要的写法：

指明

不要让代码难于重写，让选择器更精确，减少ID、避免使用!important

覆盖

覆盖样式会使维护和调试更困难，所以要尽量避免。

继承

不要把可继承的样式重复声明：

简洁性

保持代码的简洁。使用属性缩写。不必要的值不用写。

语言

能用英文的时候不用数字。

动画

除了变形和改变透明度用animation，其他尽量使用transition。

单位

可以不用单位时就不用。建议用rem。时间单位用s比ms好。

颜色

需要做透明效果是用rgba，否则都用16进制表示：

绘图

减少HTTPS请求，尽量用CSS绘图替代图片：

注释

语法

id及class命名

激活及hover的效果class

样式的声明顺序

less语法规范

1.变量,混合的使用

2.嵌套规则（避免嵌套层级过多）

3.命名空间

三、JavaScript

1. 使用两个空格进行缩进。

eslint: indent

2.除需要转义的情况外，字符串统一使用单引号。

eslint: quotes

3.不要定义未使用的变量。

eslint: no-unused-vars

4.关键字后面加空格。

eslint: keyword-spacing

5.函数声明时括号与函数名间加空格。

eslint: space-before-function-paren

6.始终使用 === 替代 ==。

例外： obj == null 可以用来检查 null || undefined。

eslint: eqeqeq

7.字符串拼接操作符 (Infix operators) 之间要留空格。

eslint: space-infix-ops

8.逗号后面加空格。

eslint: comma-spacing

9.else 关键字要与花括号保持在同一行。

eslint: brace-style

10.多行 if 语句的的括号不能省。

eslint: curly

11.不要丢掉异常处理中err参数。

eslint: handle-callback-err

12.使用浏览器全局变量时加上 window. 前缀。