# CSS Framework Think

上图是Tailwind的css示例（官方示例）。事实证明，如果全部使用BEM的形，很有可能会造成以上的复杂代码。这种代码的模式，本质上其实就是把原来的CSS编写改到了class的编写上。

不仅如此，如果这种形式的CSS框架没有启用一些tree-shaking的措施的话，这种框架（Utility-First）会导致大量的无用代码，unused rules现在虽然不会造成渲染级别的性能问题，但是对于网络或者是parsing都会造成影响。

之所以个人推荐的CSS预处理器永远是SCSS，这是因为S CSS 的设计永远是CSS的超集－－就跟TypeScript一样并不一样，typings的notImplicitAny必须是关闭的。用户不需要手动做任何的兼容性处理，即可将原来的CSS部分转移到SCSS中来。反而，像Stylus/SASS这种语法，会让用户不得不对原有的代码进行修改。这种情况下，当然是语法松弛的SCSS更能提高效率一些。

当然，对于原有的代码重构，SCSS也是松弛可选的。如果没空完全可以打个TODO，以后再看。

其实Tailwind的设计还是有借鉴意义的。它宣称自己是一种非UI Kit的解决方案，完全unopinionated，使用上完全由用户决定。

个人认为如果这种方案结合上体验化的设计，一些Code Snippet，将会是相当不错的解决方案。毕竟现在的前端不过是一堆大家习惯的、有实践意义的CSS拼拼凑凑而成。

所以，什么时候开坑？