如何构建一个高效的轻量级 CSS 框架？

本文共计5761个文字，预计阅读时间需要24分钟。

GitHub: https://github.com/nzbin/snackDocs: https://nzbin.github.io/snack前言：这篇文档我已经酝酿了半年之久，或者说拖延了这么久。想说的东西很多，却又从未提起。就像轻盈级框架如雨后春笋，茁壮成长。

Github: github.com/nzbin/snack

Docs: nzbin.github.io/snack

前言

这篇文章我已经酝酿了半年之久，或者说拖沓了这么久吧。想说的东西很多，却又无从说起。如今轻量级框架如雨后春笋，层出不穷。我想每个人都应该归纳总结工作中的常见需求，编写一套适合自己的 CSS 框架。在之前的文章中，我提到了面向对象的 CSS（比如 BEM、OOCSS、SMACSS，详见 vanseodesign.com/css/dry-principles/）。这是一种思想，并不涉及具体的 CSS 问题，主要是类命名的策略！现在仍然有很多人对于前端框架的认识还停留在表面，认为 Bootstrap 是后端人员专用，前端没必要等等。我不知道这种说法从何而来，我最开始也不喜欢使用框架，或许和很多人的想法一样，畏惧新知识、害怕难以驾驭、遇到问题的时候无法解决等等。最关键的一点是很多人认为框架的样式是固定的，修改起来太麻烦，还不如自己根据设计图写起来方便。

为什么使用框架

为什么使用框架？答案显而易见，效率。除此之外，使用框架或者研究框架的意义还有很多，比如面向对象思想的具体实现。在上一家公司工作的时候，开始的几个项目我也是用最原始的方法书写 CSS 。项目之中最让我头疼的就是类的命名。我想大多数人都是根据功能去命名，这就造成了很多的冗余，相同的组件可能写很多次。简单举一个例子，如下图，个人中心的登录界面。