写出良好风格的JS、CSS代码

现在代码的格式都有 eslint、prettier、babel 这些来保证，但是技术手段再高端都不能解决代码可读性的问题。

因为这个只有个人才能解决。但是注意一下事项，可以显著提高代码的可读性、可识别性。

一、变量相关

　　1、限量数量的定义。

　　　　不要滥用变量，数据只使用一次或者不使用就无需装到变量中。

let kpi = 4;  // 没用的就删掉
function example() {
  let a = 1;
  let b = 2;
  return 2*a + b + 1;
}

　　2、变量命名

　　　　无需对每个变量都写注释，从名字上就看懂。

// 不要
let fName = 'guo';
let lName = 'zheng';
// 要这样
let firstName = 'guo';
let lastName = 'zheng';

　　3、特定的变量

if(value > 8) {
  // 为什么要大于 8 ，8 表示什么？长度？位移？还是高度？
}
// 应为
const MAX_INPUT_LENGTH = 8;
if(value > MAX_INPUT_LENGTH) {
  // 一目了然  
}

　　4、变量命名

// 过于啰嗦
let nameString;
let theUsers;
// 要简洁
let name;
let users;

　　5、使用说明性的变量 -- 即 有意义的变量

const address = 'One Infinite Loop, Cupertino 95014';
const cityZipCodeRegex = /^[^,\]+[,\s]+(.+?)s*(d{5})?$/;
saveCityZipCode(
  address.match(cityZipCodeRegex)[1], // 这个公式要干嘛？
  address.match(cityZipCodeRegex)[2], // 这个公式要干嘛？
)
// 用变量名解释长代码的含义
const address = 'One Infinite Loop, Cupertino 95014';
const cityZipCodeRegex = /^[^,\]+[,\s]+(.+?)s*(d{5})?$/;
const [, city, zipCode] = address.match(cityZipCodeRegex) || [];  // 解构赋值
saveCityZipCode(city, zipCode)

　　6、避免使用太多全局变零

　　　　少用或者使用替代方案。

　　　　你可以选择只用局部变量，通过（）{} 的方法。

　　　　如果确实有很多的全局变量需要共享，你可以使用vuex，redux 或者 自己参考 flux 模式写一个。

　　7、变量赋值

　　　　对于求职获取的变量，做好兜底。

// 没有兜底
const MIN_NAME_LENGTH = 8;
let lastName = fullName[1];
if(lastName.length > MIN_NAME_LENGTH) {
  // 这样就给代码埋了一个坑。当fullName 为一个元素时呢？ 比如：fullName = ['guo']
}
// 做好兜底
const MIN_NAME_LENGTH = 8;
let lastName = fullName[1] || '';
if(lastName.length > MIN_NAME_LENGTH) {
  ...
}
// 其实在项目中很多求值变量，对于每个求值变量都需要做好兜底
let propertyValue = Object.attr || 0; // 因为 Object.attr 有可能为空，所以要做好兜底。但是变量赋值不需要兜底。

　二、函数相关

　　1、函数命名

　　　　对于返回 true 或 false 的函数，最好以 should、is、can、has 开头

function showFriendsList() {} // 现在问，返回的是一个数组，还是对象，还是 true or false。无法知道。
// 一目了然
function isEmpty() {}
function hasClass() {}
function canOpen() {}
function shouldShow() {}

　　2、功能函数最好为纯函数

　　　　不要让功能函数的输出变化无常。功能函数使用纯函数，输入一致，输出结果永远唯一。

function plusAbc(a, b, c) {
  let c = fetch('../api'); // 因为 api 变化，输出变化。
  return a + b + c;
}
// 纯函数
function plusAbc(a, b, c) {
  return a + b + c;
}

　　3、函数传参

pageXOffset.getSVG(api, true, false); // 让人看不懂这三个参数
pageXOffset.getSVG({
  imageApi: api,
  includePageBackground: true,
  compress: false
  // 一目了然 知道这些参数是控制什么。
});

　　4、动作函数要以动词开头

 function sendEmailToUser() {}; 2 function getUserInfo() {}; 

　　5、一个函数完成一个独立功能，不要一个函数混杂多个功能。

　　　　当函数需要做更多事情时，他们会更难以编写、测试、理解、组合。当你能将一个函数抽离出来只完成一个动作，他们将更容易进行重构并且代码更容易阅读。

　　6、优先使用命令式编程。

// 使用for循环编程
for(var i=1;i<10;i++) {
  // 每一项要做的事情
}
// 命令式
let b = a.map(item => {
  // 每一项要做的事情
})

　　7、函数过多使用if else

　　　　可以使用switch 替代，或者数组 替代。参考上一篇。

三、尽量使用ES6, 有可能的话使用 ES7

　　1、使用箭头函数 代替传统函数

// 传统
function add() {}
// 箭头函数
let add = () => {}

　　2、连接字符串

　　　　使用模板字符串 代替 传统 +

// 传统
let str = 'hello' + name;
// 模板
let str = `hello${name}`

　　3、使用解构赋值

// 传统
let data = { name: 'guo', age: 11 };
let name = data.name;
let age = data.age;

let fullName = ['guo', 'zheng'];
let firstName = fullName[0];
let lastName = fullName[1];

// 解构赋值
let data = { name: 'guo', age: 11 };
const {name, age} = data;

let fullName = ['guo', 'zheng'];
const [firstName, lastName] = fullName;

　　4、尽量使用 class

　　　　不太会，以后再补

四、别处补充来

　　1、采用utf-8编码，在CSS头部使用。

　　@charset "utf-8"

　　必须定义在css文件所有字符前面(包括注释)，才能生效

 　　2、定义的选择器名，属性及属性值的书写皆为小写。

　　3、当一个规则包含多个选择器时，每个选择器独占一行。

　　　　+、~、> 选择器的两边各留一个空格

　　　　.header > .header-res,

　　　　.footer + .footer-res {}

　　4、选择器命名尽量 简洁且语义化

　　5、数值 与 单位

　　当属性值或颜色参数为 0 ---- 1 之间的数时，省略0

　　color： rgba(255, 255, 255, .6)

　　当长度为 0 时，省略单位，margin: 0 auto 20px;

　　十六进制颜色 使用小写且尽量简写。

　　样式属性的顺序：

　　　　如果包含content属性，应放在最前面。

　　　　布局方式、位置相关属性。position / top / right / bottom / left / z-index / display / float / …

　　　　盒模型相关属性。width / height / padding / margin / border / overflow / …

　　　　文本排版相关属性。font / line-height / text-align / word-wrap / …

　　　　视觉外观相关属性。color / background / list-style / transform / animation / transition / …

　　合理使用引号：在某些样式中，会出现一些含有空格的关键字或者中文关键字。

 　　　　 body { 2 font-family: 'Microsoft YaHei', '黑体-简', '5b8b4f53'; 3 } 

　　　　

div {
  background-image: url('...');
}
 

　　避免使用 !important

　　尽量避免使用标签名。提高CSS匹配性能。CSS 选择器的解析规则： 从右到左。

　　　　

仅作学习笔记，如有雷同不是巧合，可能是参考过。