总结
阿里十分注重你对源码的理解，对你所学，所用东西的理解，对项目的理解。
● There must not be more than one <meta> element with a charset attribute per document。
● The charset attribute specifies the character encoding used by the document. (and the document is therefore forced to use UTF-8 as its encoding)。●
[翻译] 通过明确声明字符编码，能够确保浏览器快速并容易的判断页面内容的渲染方式。这样做的好处是，可以避免在 HTML 中使用字符实体标记**（character entity）**，从而全部与文档编码一致（一般采用 UTF-8 编码）。
● 用两个空格来代替制表符（tab） – 这是唯一能保证在所有环境下获得一致展现的方法。
● 嵌套元素应当缩进一次（即两个空格）
sublime中默认制表符是4个空格，我们可以在sublime的右下角↘修改为**
Tab Width: 2**
● 对于属性的定义，确保全部使用双引号，绝不要使用单引号
● 不要在自闭合（self-closing）元素的尾部添加斜线
● 不要省略可选的结束标签（closing tag）（例如， 或 ）。
● 根据 HTML5 规范，在引入 CSS 和 JavaScript 文件时一般不需要指定 type 属性，因为 text/css 和 text/javascript 分别是它们的默认值。
/* ... */实用为王
● 尽量遵循 HTML 标准和语义，但是不要以牺牲实用性为代价。任何时候都要尽量使用最少的标签并保持最小的复杂度。
● 编写 HTML 代码时，尽量避免多余的父元素。很多时候，这需要迭代和重构来实现。
● 通过 JavaScript 生成的标签让内容变得不易查找、编辑，并且降低性能。能避免时尽量避免。
属性顺序（推荐）
● class
● id, name
● data-\*
● src, for, type, href
● title, alt
● aria-\*, role
class 用于标识高度可复用组件，因此应该排在首位。id 用于标识具体组件，应当谨慎使用（例如，页面内的书签），因此排在第二位。
Example link
/* 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;
}
● 所有声明语句都应当以分号结尾。最后一条声明语句后面的分号是可选的，但是，如果省略这个分号，你的代码可能更易出错。 ● 对于以逗号分隔的属性值，每个逗号后面都应该插入一个空格（例如，`box-shadow`）。 ● 不要在 `rgb()`、`rgba()`、`hsl()`、`hsla()` 或 `rect()` 值的内部的逗号后面插入空格。这样利于从多个属性值（既加逗号也加空格）中区分多个颜色值（只加逗号，不加空格）。 ● 对于属性值或颜色参数，省略小于 1 的小数前面的 0 （例如，`.5` 代替 `0.5`；`-.5px` 代替 `-0.5px`）。 ● 十六进制值应该全部小写，例如，`#fff`。在扫描文档时，小写字符易于分辨，因为他们的形式更易于区分。 ● 尽量使用简写形式的十六进制值，例如，用 `#fff` 代替 `#ffffff`。 ● 为选择器中的属性添加双引号，例如，`input[type=”text”]`。只有在某些情况下是可选的，但是，为了代码的一致性，建议都加上双引号。 ● 避免为 0 值指定单位，例如，用 `margin: 0;` 代替 `margin: 0px;`。
.declaration-order {
/* Positioning */
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 100;
/* Box-model */
display: block;
float: right;
width: 100px;
height: 100px;
/* Typography */
font: normal 13px "Helvetica Neue", sans-serif;
line-height: 1.5;
color: #333;
text-align: center;
/* Visual */
background-color: #f5f5f5;
border: 1px solid #e5e5e5;
border-radius: 3px;
/* Misc */
opacity: 1;
}
不要使用`@import` — 与``标签相比，`@import` 指令要慢很多，不光增加了额外的请求次数，还会导致不可预料的问题。
.element { ... }
.element-avatar { ... }
.element-selected { ... }
@media (min-width: 480px) {
.element { ...}
.element-avatar { ... }
.element-selected { ... }
}
.selector {
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.15);
box-shadow: 0 1px 2px rgba(0,0,0,.15);
}
/* Single declarations on one line */
.span1 { width: 60px; }
.span2 { width: 140px; }
.span3 { width: 220px; }
/* Multiple declarations, one per line */
.sprite {
display: inline-block;
width: 16px;
height: 15px;
background-image: url(../img/sprite.png);
}
.icon { background-position: 0 0; }
.icon-home { background-position: 0 -20px; }
.icon-account { background-position: 0 -40px; }
margin: 0 0 10px 0;
margin-bottom: 10px;
margin: 0 0 5px 10px;
**前提是你得知道这个元素的左边距是10px，在改别人的代码的时候，你是不知道这个元素的左边距是多少的，这个时候，你只得去审查元素。** **而且，这也违背你当初只想设置下边距的初衷。** **过度使用简写形式的属性声明会导致代码混乱，并且会对属性值带来不必要的覆盖从而引起意外的副作用。**
常见的滥用简写属性声明的情况如下：
● padding
● margin
● font
● background
● border
● border-radius
/* Bad example */
.element {
margin: 0 0 10px;
background: red;
background: url("image.jpg");
border-radius: 3px 3px 0 0;
}
/* Good example */
.element {
margin-bottom: 10px;
background-color: red;
background-image: url("image.jpg");
border-top-left-radius: 3px;
border-top-right-radius: 3px;
}
Less和Sass中的嵌套
避免非必要的嵌套。这是因为虽然你可以使用嵌套，但是并不意味着应该使用嵌套。只有在必须将样式限制在父元素内（也就是后代选择器），并且存在多个需要嵌套的元素时才使用嵌套。
注释
代码是由人编写并维护的。请确保你的代码能够自描述、注释良好并且易于他人理解。好的代码注释能够传达上下文关系和代码目的。不要简单地重申组件或 class 名称。
对于较长的注释，务必书写完整的句子；对于一般性注解，可以书写简洁的短语。
/* Bad example */
/* Modal header */
.modal-header {
...
}
/* Good example */
/* Wrapping element for .modal-title and .modal-close */
.modal-header {
...
}
选择器
● 对于通用元素使用 class ，这样利于渲染性能的优化。
● 对于经常出现的组件，避免使用属性选择器（例如，[class^="..."]）。浏览器的性能会受到这些因素的影响。
最后
本人分享一下这次字节跳动、美团、头条等大厂的面试真题涉及到的知识点，以及我个人的学习方法、学习路线等，当然也整理了一些学习文档资料出来是给大家的。知识点涉及比较全面，包括但不限于前端基础，HTML，CSS，JavaScript，Vue，ES6，HTTP，浏览器，算法等等
前端视频资料：
