写出良好风格的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() {}; 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 { font-family: 'Microsoft YaHei', '黑体-简', '\5b8b\4f53'; }

　　　　

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

　　避免使用 !important

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

　　　　

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