【css】高效地写样式

日常工作中，多人合作模式下如果能统一规范风格，很有利于提高代码可读性与可维护性；记录一下用过的📝

命名

结合 中划线 和 双下划线， -表示特定意义模块，__表示下面的子模块

/* 新闻版块 */
.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 官网

Tailwind CSS 是一个功能类优先的 CSS 框架，它集成了诸如 flex, pt-4, text-center 和rotate-90 这样的的类，它们能直接在脚本标记语言中组合起来，构建出任何设计

• 如何评价CSS框架TailwindCSS？-知乎