谈css框架

前段时间做 FIndTeammates 项目（这是一个Django项目，不用前端框架，所以只能挑选不需要构建步骤的框架）的时候尝试并很快放弃了Pico CSS（大概浪费我一下午尝试），因为它实在太年幼了，或者说自定义的部分太少，然而预设的部分又不够好。虽然它理念中的一些地方我很赞同：

在引用的 css 文件中完成用role之类的元素的样式定义（这些应该是公有的，不需要让开发者看到），我理解的是这是一种类似重置浏览器预设的含义🤔
提供一些类似primary这样的形容词来命名classes，但这注定与原子化css的思想相违背
其他的个性化（如灵活的 transition 效果，父子级联的 hover 选择器等等）直接写 css 标签

但是它第1点预设的部分我觉得不够高效也不够好看，第2点提供的也不够多，最后基本上都在写裸 css，非常失望。一下午的尝试后直接果断 rollback 了

因为这个项目需要与很多没有现代前端经验的同学合作，所以也抛弃了用 @unocss/cli 的想法（虽然可行）（另一个原因是我也想尝试尝试其它 css 的解决方案）。于是我就想起了[Bootstrap](https://getbootstrap.com/)😂

Bootstrap虽然蛮老了，但我觉得正好适合Django，而且它的类名（像btn、btn-primary）这些，既实用高效又挺美观（中规中矩的），而且组件非常丰富（可以说非常好的满足了上面第2点）

原子化 css 的坏处在于没能分开样式和内容（可以认为原子化 css 的classes相当于简化版的 inlinestyle属性，这不美观，即使开发快但这绝对不是最好维护的

后来我想起来，像 Windi CSS 的 @apply 就完美地解决了这一点（至少在我还没用过的当下我这么认为），它既能有原子化 css 的开发效率（以及跨浏览器的兼容性），也能有代码的简洁美观性，符合我对第3点也即样式和内容的分离的要求，所以以后我的项目（比如还没正式开始做的 Re:Bingo ）很可能会采用这个解决方案✨

在 Anthony Fu 的 Reimagine Atomic CSS 中提到了这么一段：

Windi CSS as a framework will fill the missing features like @apply preprocessing, IDE intelligence sense, preflights, etc., that UnoCSS as an engine intentionally won’t provide. And it will also leverage the performance and the flexibility that UnoCSS offers for both core utilities and user configurations.

UnoCSS毕竟是一个engine而非像Windi CSS一样的framework，所以它注定不会提供这些功能，它给自己的定位似乎是一个在性能和alternatives上而非语言上优化的原子化css引擎，所以我认为它可以是一个很好的玩具，但不会是best practice

一直都说，Sass 走的是和 Atomic CSS 不同的路线：它是对语言本身创新了，而后者（以 Tailwind 为例）只是在现有的框架内用出了新的玩法——可以认为，Sass 的创新更大，发展空间也更大，更关键的是，它的 nesting 语法我觉得非常符合 css 的级联本质，而且样式的继承我觉得是非常合理的。另一方面，一个div:hover的各种子元素的一系列变化用 css 写真的很麻烦，我觉得 Sass 的写法应该能简化很多。不过很可惜的是现在确实还没用过Sass，将来有机会一定要试一试，没用过都只能是瞎评价

附上 Sass 的语法简介

而现在看来 Windi CSS 则是介于这二者之间的解决方案：既能当作原子化 css 来用，也有自己的新语法👍

Windi CSS 我觉得就是未来的 best practise：附上它的语法草案

Windi CSS 的 nesting 语法例子：

@screen sm {
  .clearfix {
    display: block;
    zoom: 1;
    &:after {
      content: " ";
      display: block;
      font-size: 0;
      height: 0;
      clear: both;
      visibility: hidden;
    }
  }
}

我觉得足够方便了

然而这个文档其实还是个草案：

For now, we are still in the draft stage, so any suggestions are welcome. You can start a discussion in github discussions, and we will reply to you as soon as possible.

但我目前认为光是@apply语法其实就够实现第2点了，让写内容的 dom 很简洁，同时保证写样式的<style>里很高效🌹

今天了解到另一个 css 框架：Stylify CSS