前言
该规范并不是一个大而全的规范。
作为中小厂，我们需要的规范并不是一个大而全的规范。扪心自问，大家写的规范自己可以遵守吗？更何况别人写的规范。
我们的规范应该遵循一点，不符合的代码完全接受不了，不允许代码提交。比如中英混杂命名方式、超大单文件。
因此我将规范分为三类：
- 必须做（不这么做代码直接打回重写）
- 不要做（做了直接打回重写）
- 建议做（遇到该问题建议这么解决，但不这么写也可以上线）
必须做
命名规范
前端开发中，CSS 的命名往往是一个大问题，也是很多开发者厌恶 CSS 的来源。
CSS 写的越多，就会越发现 CSS 的维护尤其困难，特别是在你看到一大堆 left 、 right 、 zuo 、 you 等各类 CSS 类名的时候。
因此 CSS 规范显得尤为重要，良好的 CSS 规范是 CSS 维护成本降低的主要手段。
类名命名规范
我这里简单说，详细可以查看完整版 BEM 规范。
我们的命名分为三块，Block、Element、Modifier 。下面我简单说下三块的内容：
- Block 块： 用来描述一个真正的功能模块，比如
menu，又如chat。 - Element 元素： 功能模块的组成部分，比如
menu-item，又如chat-message。 - Modifier 修饰符： 基于某一个块或元素的修饰符，比如
menu-item-disabled，又如chat-message-img。
命名方式：
- 单词和单词之间通过
-连接
例如：block-element-modifier。
拿一个小人举例，我们的小人如上图所示： 对应的
class结构如下：
stick-man整个小人。
stick-man-head小人的头。
stick-man-head-xs小人的小头。stick-man-head-md小人的大头。stick-man-hand小人的手。stick-man-feet小人的脚。
ID命名规范
我们的 ID 命名必须遵守以下内容：
- 单词之间使用
-连接。 - 保持唯一性。
- 保持描述性，比如
submit-button和button1应该选择前者。 - 不允许使用 CSS 关键字，以避免混淆。
- 不允许数字开头，CSS、JS 中，数字开头可能会引起未知问题。
- 不允许使用
ID Selector修改样式，ID选择器的权重非常高，很难进行样式覆盖。
CSS 权重：
- Inline styles: 1000。
- ID Selector：100。
- class Selector：10。
- element Selector：1。
缩写
只允许使用大家都能看懂的缩写，如果有不清楚是否别人可以看懂，查阅或补充下表。 如：
缩写一览表
- btn（button）
- el（element）
- nav（navigation）
- bg（background）
- txt（text）
- img（image）
- col（column）
- lg
- md
- sm
- xs
- xl
选择器使用规范
- 避免过多层级的选择器：多层级的选择器有两个问题，权重极高难以覆盖、难以理解。
- 例如
body header nav ul li a，我们应该写为.navigation-link。
- 例如
- 避免使用 ID 选择器：ID 选择器的优先级非常高，可能导致样式覆盖问题。尽可能使用类选择器。
- 避免使用标签选择器：标签选择器有两个问题，优先级低、影响范围广。
- 避免使用 !important：!important 可以覆盖其他所有样式，但是过度使用可能会使 CSS 变得难以维护。
- 使用伪类和伪元素：伪类和伪元素可以帮助你选择特定的元素，如
:hover，:first-child，::before和::after。 - 使用属性选择器：属性选择器可以根据元素的属性来选择元素，如 [disabled]，[type="text"]。
- 使用组合选择器：组合选择器可以帮助你选择特定的元素，如 .menu > li 选择 .menu 的直接子元素 li。
属性声明顺序
我们的 class 属性声明应该做一定的划分，避免杂乱的 class 难以阅读。
分类及定义顺序：
- 布局相关：display、flex、grid 及周边属性。
- 位置与尺寸：position、top、z-index 等 / width、height、margin、padding 等。
- 字体与样式：font、color、line-height 等 / bg、bg-image、border、border-raidus 等。
- 其他：opacity、visibility、overflow 等。
- CSS3：transition、animation、transform。
如果你发现你的样式较多时（超过 30 行），建议在不同分类中间做空行处理。
CSS 示例：
.example {
display: grid;
grid-template-rows: repeat(1, minmax(0, 1fr));
position: absolute;
top: 4px;
left: 4px;
font-size: 12px;
color: #000;
background-color: #fff;
opacity: 0;
animation: spin 1s linear infinite;
}
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
tailwindcss 同理，示例：
<div class="
grid-rows-1
absolute
top-4
left-4
text-sm
text-black
bg-white
opacity-5
animate-spin
"></div>
不要做
避免 Margin
在前端开发过程中，尽量避免使用 Margin。如果一定要用 Margin，建议提前关注 Margin 的塌陷问题。
主要问题
高度塌陷（Collapse）：在相邻的两个块之间，双方都设置了 Margin，会导致其中较小的 Margin 会被覆盖。这在前端称作高度塌陷。
Margin 与 盒模型
Margin 在所有的盒模型中，都不包含在宽度内。
高度塌陷问题解决方案
- Padding 替代 Margin：Padding 没有塌陷问题
- 使用 Flex / Grid 布局：在 FlexBox 、 Grid 布局中，元素之间的 Margin 不会出现塌陷问题
- 使用 overflow 属性：元素设置 overflow: hidden 可以阻止 Margin 塌陷
- 使用 float 解决塌陷问题（不推荐）
相关文章
- 有害的 Margin：mxstbr.com/thoughts/ma…
- Margin 的高度塌陷：www.joshwcomeau.com/css/rules-o…
- 怪异盒模型：www.runoob.com/css/css-box…
避免 Global Style
除了初始化项目外，我们都不应该使用全局样式。全局样式的每一次修改，都会带来巨量的问题。
问题
全局样式每次修改都会影响所有页面。且单通过代码审核很难看出问题。
举个例子：
之前带过一个实习生，在给老项目添加新页面时，发现老项目使用的是 标准盒模型 ，他觉得很不好用，于是通过 box-sizing 修改为了 怪异盒模型 ，且在开发时没有查看其他页面发现问题，审核时，由于在 CSS 的文件中，没有审核到该问题。
项目上线后，整个项目样式崩溃。
避免 !important
在开发过程中，我们应尽量避免使用 !important。如果在没有其他选择的情况下，可在业务代码中酌情使用（确保该属性一定是生效的）。
问题
- 样式冲突：!important 会覆盖其他所有样式（包括内联样式），可能会导致预期之外的后果。
- 维护困难：!important 使用后，会导致样式别人难以修改。
- 破坏权重：CSS 有自己的一套权重体系，!important 会破坏权重体系。
解决方案
内联样式：内联样式的权重更高
避免 不恰当的z-index
在无必要的时候，避免使用 z-index。 使用 z-index 时，确保理解并赋准确的权重，避免过大的权重（z-index: 999999）。
避免 Float
在现代浏览器中，我们他应该避免使用 Float。如果需要布局，建议采用 Flex、Grid。
在早期开发中，由于网页缺乏好的布局工具，因此使用 Float（设计初衷是为了实现文本环绕）实现布局。但是在现代开发中，浏览器已经提供了足够布局使用的属性。
避免 calc
新版的 CSS 中提供了 calc 来进行动态计算，我们应当慎重的使用 calc 来进行动态计算。
问题
- 性能问题：calc 函数在运行时计算，会影响页面的渲染性能。
替代方案
例子：
<div style="width: 200px" />
<div style="width: calc(100% - 200px)" />
使用 CSS Grid 布局 或 Flexbox 布局 替代 calc
<div style="display: flex">
<div style="width: 200px" />
<div style="flex-grow: 1" />
</div>
<div style="display: grid; grid-template-columns: 200px auto;">
<div></div>
<div></div>
</div>
使用 百分比布局 与 vw、vh 替代 calc（不能完全还原）（不能完全还原）
<div style="width: 20%"></div>
<div style="width: 80%"></div>
<div style="width: 20vw"></div>
<div style="width: 80vw"></div>
建议做
- 使用 CSS 动画，而不是 JavaScript 动画
- 尽量避免回流与重绘
- 善用 CSS3 新特性
- 及时清理未生效的 class
使用 min-width、width 替代 overflow、外包div 来解决 Flexbox 中 text、img 溢出问题
在我们使用 Flexbox 时，会遇到 text 、 img 的尺寸超出 Flexbox 的元素范围导致的溢出问题。
问题原因
CSS2.1 版本之后，为了给 Flex 提供更合适的默认最小尺寸引入了 auto ， width 和 min-width 在 Flexbox 中的默认值是 auto 。
min-width: auto 使得元素的最小宽度不再是默认的 0 ，而是根据内容和上下文来计算。即使元素没有设置显式的最小宽度，也会有一个最小宽度，以防在 Flexbox 中过于压缩。
进而导致 Flexbox 内的 text 、 img 的元素宽度是由内部的文本、图片尺寸计算而来，进而导致换行等操作 overflow-wrap 失效。
overflow、外包div 方案的问题
- 嵌套层级增加
- 意外切割元素
解决方案
- text。
- 添加
CSS的min-width: 0
- 添加
- img。
- 添加
CSS的width: 0
- 添加
