CSS

警告

CSS 不应该是一个放在 二级栏目 的主题！

事实上随着 组件库 例如 MUI Antd vuetifyjs 的普及， 2B 行业的前端程序员很少写大量的 CSS代码。所以如果当你尝试挑战一下 CSS Battle在新窗口打开可能会感觉捉襟见肘。

那如果涉及到 CSS 架构层面的问题。你可能更加不会去考虑了，因为只有当你需要开发一个全新的应用程序你才可能因为 大量自定义CSS的需求有可能会想到怎么组织好你的 CSS代码。 OOCSS, SMACSS， ITCSS 都是比较好的参考方案，他们常常会和 BEM 混搭使用。

CSS 架构里面考虑的问题往往最后都非常细节微观，例如你甚至需要考虑如何组织一个类样式里面的 CSS 属性分类。

.foo {
  /* 定位 positioning */
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1;

  /* 盒模型 box model */
  display: inline-block;
  float: left;
  width: 100px;
  height: 100px;

  /* 文字 typography */
  font: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  color: #333;
  line-height: 1.5;

  /* 皮肤 visual | skin */
  background-color: #f5f5f5;
  border: 1px solid #e5e5e5;

  /* misc */
  opacity: 0.5;
}

最近的一个项目需要引入 CSS 架构已经是去年，那是一个基于 Bootstrap 4.x 的网站项目，我们基于 sass-boilerplate在新窗口打开 + BEM 尝试实现了整个网站的 CSS 代码。

说实话这并不轻松太多条条框框和考虑因素的叠加增加了维护成本，CSS 架构 从技术上来说很好。但是如果不能持续使用，那么 成本 无法分摊。

至于有 CSS 架构 和没有到底哪个效率高哪个成本低这个当 质变 不明显的时候，不会有结论。

# CSS

CSS