介绍

它是什么

construct-scss 是由杨亮编写的一套面向 PC、H5、原生小程序、uni-app 的、专注于构建布局和常用展现的 CSS 工具库，它很袖珍，压缩之后有 24 KB，尽管听起来挺大，但是由于充满大量相似字符，所以 gzip 压缩后只有 2KB，它可以跟已有 CSS 框架、UI 框架相结合，作为框架的补充。

construct-scss 与一款叫做Tailwind CSS的 CSS 工具库很像，但是 construct-scss 要更简单，更易学，且在很多项目中已经足够用。

Tailwind CSS 近年在国外很有市场，比如你可以看这个调查报告：https://ashleynolan.co.uk/blog/frontend-tooling-survey-2019-results。

construct-scss 使用 SCSS 编写。

为什么要用它

所见即所得。你难道猜不出font-24代表什么？
不用给节点费尽心思考虑表意的 class 名，这很棒！
当某个页面的大多数样式都是布局样式，construct-scss 完全可以做到<style></style>零代码，从而避免开发过程中的反复横跳，这很棒！
construct-scss 不级联，因为级联是既有优势也有劣势的，级联的劣势是层数过多的话，维护困难，construct-scss 则没有这个烦恼。来看看级联的可怕：

CSS：

css

.widget .table .row .cell .content .header .title {
  padding: 0.1rem 0.2rem;
  font-weight: bold;
  font-size: 0.24rem;
}

SCSS：

scss

.widget {
  // ...
  .table {
    // ...
    .row {
      // ...
      .cell {
        // ...
        .content {
          .header {
            .title {
              padding: 0.1rem 0.2rem;
              font-weight: bold;
              font-size: 0.24rem;
            }
          }
        }
      }
    }
  }
}

几乎所有的 CSS 框架和 UI 框架都没有提供完善的工具库，或许工具库并不是 CSS 框架要做的事情，但这样你就不得不一遍一遍地在<style>...</style>里书写相同的样式，例如一遍又一遍的position: absolute;、display: flex;、padding: .2rem;……等等。再比如，如何写出文本溢出显示省略号的效果？你恐怕并不能第一时间写出来而且写得准确。

为什么有人反对它

反对 construct-scss（以及反对 Tailwind CSS）的人，主要观点有：

不喜欢 construct-scss 这种一长串 classList 的写法，觉得冗长。
多个同类节点的前提下，construct-scss 更冗长，比如：

html

<div>
  <div class="absolute top-0 left-0 right-0 padding-left-20 ..."></div>
  <div class="absolute top-0 left-0 right-0 padding-left-20 ..."></div>
  <div class="absolute top-0 left-0 right-0 padding-left-20 ..."></div>
  <div class="absolute top-0 left-0 right-0 padding-left-20 ..."></div>
  <div class="absolute top-0 left-0 right-0 padding-left-20 ..."></div>
  <div class="absolute top-0 left-0 right-0 padding-left-20 ..."></div>
  <div class="absolute top-0 left-0 right-0 padding-left-20 ..."></div>
</div>

如果提取样式，则代码量小，维护时清爽：

html

<style>
  .xx-item {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    padding-left: 20px;
    font-size: 24px;
    font-weight: bold;
    ...;
  }
</style>
<div>
  <div class="xx-item"></div>
  <div class="xx-item"></div>
  <div class="xx-item"></div>
  <div class="xx-item"></div>
  <div class="xx-item"></div>
  <div class="xx-item"></div>
</div>

由于 construct-scss 无法级联，失去了级联的优势。
construct-scss 与 BEM 等命名规范背离，BEM 的原则是 class 名要表达节点是做什么的，construct-scss 的原则是 class 要表达 class 是做什么的。
construct-scss 在节点层级多的前提下，维护者难以第一时间看出某一层节点是干什么的，因为并没有表达节点作用的表意 class 名。

作者本人有话说

**CSS 开发没有绝对的银弹！**级联有级联的优势，classList 有 classList 的优势，千万不要认为“我不允许你使用 construct-scss 以外的解决方案”，要根据实际情况灵活采用编写模式，你要注意什么时候不用它，什么时候用它。

什么时候不用它

像上面第一条说的，一长串 classList，如果在 5 个以内，可以接受，如果超过 5 个，甚至写折行了，那么干脆就提取到<style></style>里，记得给 class 名取一个表明节点作用的表意名称。
像上面第二条说的，多个同类节点的话，还是提取样式为佳。
像上面第三条说的，CSS 的C字母就是级联的意思，级联的好处不多说，construct-scss 不可级联，如果需要级联，就暂时放弃 construct-scss。
像上面第四条说的，节点嵌套过多，每一层节点已经一眼看不出作用，那么适当加一些 BEM class，会让代码更容易维护。

什么时候用它

记住，只在使用 contruct-scss 会很舒服的时候，才应该考虑使用 contruct-scss。

它不负责什么

construct-scss 专注于布局和最常用的工具，不含这些方面：

Reset CSS
几何图形
动效、动画
颜色管理
小众需求

请另寻专业库和框架来解决这 5 个问题。

介绍 #

它是什么 #

为什么要用它 #

为什么有人反对它 #

作者本人有话说 #

什么时候不用它 #

什么时候用它 #

它不负责什么 #

介绍