日常工作中，多人合作模式下如果能统一规范风格，很有利于提高代码可读性与可维护性；记录一下用过的📝
命名
结合 中划线 和 双下划线， -表示特定意义模块，__表示下面的子模块
/* 新闻版块 */
.news-borad {
.board__abstract {/* 摘要 */
.indicator__content {/* 摘要 内容 */
margin: 20px 0;
}
.indicator__title {/* 摘要 标题*/
margin-bottom: 13px;
}
/* ... */
}
}
选择器使用
选择器嵌套应尽量少于 3 级，提高代码 可读性与可维护性
/* bad❌ */
.page .header .login #username input {}
/* good✅*/
.page input {}
- 尽量简洁，不要使用嵌套过多过于复杂的选择器。
- 通配符和属性选择器👇效率最低，需要匹配的元素最多，尽量避免使用。
/* 通配符 */
*.warning {color:red;}
*#maincontent {border: 1px solid blue;}
/* 属性选择器：包含 "example" 的链接 */
a[href*="example"] {
background-color: green;
}
- 避免使用 CSS Expression（为了确保有效性，CSS 表达式会进行频繁的求值，耗能大。在很多团队也中它也是被禁用的）
- 日常小规范的积累，才能有效控制代码质量🔩
考虑性能的属性选择
这些是计算量较大的属性
box-shadows
border-radius
transparency
transform（恰当使用，也可提高效率👇）
CSS filters
需要避免页面元素的重绘重排
- 使用
transform替代top，left等属性的转换 - 使用
visibility替换display: none，因为前者只会引起重绘，后者会引发回流（改变了布局） - 不要把节点的属性值放在一个循环里当成循环里的变量。（获取属性值的时候，会引起重新计算）
- 不要使用
table 布局，可能很小的一个小改动会造成整个的重新布局 - 动画实现的时机选择，可以选择使用 requestAnimationFrame
变量使用，函数使用(scss)
$、@mixin 、@include；其中变量的使用，既方便统一批量修改，也有利于后期扩展主题切换的需求，具体可参考Vue项目中Scss实现主题切换
📌像这些定义mixins的文件，文件名头可以加上下划线，这样后面就不会被编译成单独的css文件了
/* 引用全局变量 */
.main__container {
box-sizing: border-box;
border: 1px solid $--color-card-grey;
background: $--color-white;
}
/* 居中 */
@mixin center {
position: relative;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.box {
@include center;
}
公共样式，常用的搭配，提出来用
/*输入提示文字placeholder*/
.ph-t {
font-size: 13px;
color: #B3B7C8;
cursor: default;
}
/* 清除浮动 */
.clearfix:after {
content: "";
display: block;
clear: both;
height: 0;
visibility: hidden;
}
目前的项目里，甚至连常用的margin，font-size等高频属性，也提取出来了🙌，个人感觉用起来还是比较方便
.ml-20 {
margin-left: 20px;
}
.fs-16 {
font-size: 16px;
}
最近看到一个css框架，感觉还不错，哇哦！🧐
Tailwind CSS 是一个功能类优先的 CSS 框架，它集成了诸如
flex, pt-4, text-center和rotate-90这样的的类，它们能直接在脚本标记语言中组合起来，构建出任何设计
