web前端入门到实战：十个最流行的前端 CSS 库

前端 CSS 库，能够帮助用户分担样式设计，从而显著提升原型制做速度；用户则能够凭借前端框架，更加轻松地构建起直观的可用应用程序。目前市场上存在大量前端框架可供选择，本篇文章的主要内容就是关于那些目前最为流行且经常使用的框架。

为何要使用 CSS 库，而不选择自定义 CSS？简而言之，时间是一种宝贵的资源，咱们不应把它浪费在样式的构建身上。从零开始构建 CSS 是否性能好、效果佳？答案固然是确定的。但除非您是位身经百战的 CSS 视觉创意人士，不然把这项工做交给专家才是最好的选择。

与此同时，框架则可以更轻松地快速构建起直观的可用应用程序。凭借着极高的人气，目前市场上存在大量前端框架可供咱们选择。

Ant Design

项目归纳

“Ant Design 可以帮助每一位项目成员下降设计与原型设计工做的难度，同时提升后台应用程序与产品的开发效率。”

——摘自 Ant Design 官网

Ant Design 是一种面向后台应用的设计语言，由 Ant UED 团队开发而成。他们但愿借此统一内部后台项目的用户界面规范、减小设计差别以及没必要要的实现成本，从而解放出更多可用于设计以及前端开发的宝贵资源。

特性

• 一种面向 Web 应用程序的企业级 UI 设计语言。

• 一套开箱即用的高品质 React 组件。

• 由 TypeScript 编写而成并拥有完整的定义类型。

• 整套开发与设计资源及工具。

环境支持

• 现代浏览器与 IE 9 以上版本（带有 polyfills）。

• 服务器端渲染。

• Electron

Foundation

项目归纳

“Foundation 属于一个完整的响应式前端框架家族。利用 Foundation，您将可快速完成从原型到生产的整个流程，为任意目标设备上的站点或应用程序提供支持。Foundation 包含一套彻底可定制的响应式网格、一套庞大的 Sass Mixins 库、各种经常使用 JavaScript 插件以及彻底可访问性支持。”——摘自 Foundation 官网

特性

• a11y 友好性。

• 简约风格。

• 灵活的 Sass。

• ZURB 入门模板。

Bulma

项目归纳

Bulma 是一套 CSS 框架，所以只会输出单一 CSS 文件：bulma.css。

你们可以以开箱即用的方式使用以上文件，也能够下载 Saas 源以调用其中各项变量。

但其中不包括 JavaScript，由于人们每每倾向于使用本身的 JS 实现。Bulma 还具备环境中立性：仅属于逻辑意义上的一种样式层。

特性

• 经过使用最新 CSS3 功能（例如 Flexbox）并配合 CSS 变量与 CSS 网格，Bulma 一直处于浏览器视觉技术领域的最前沿。

• 简单的网格系统：要构建 Bulma 网格，你们只须要一个.columns 容器，并根据需求将任意数量的.column 条目打包进去便可。

• 易于学习的语法：类名称简单易读（例如.button 或.title），修饰符便于上手（例如.is-primary 或者.is-large），您可以在几分钟以内轻松学会使用 Bulma。

• 超过 100 种实用 CSS 助手。

Spectre.css

项目归纳

根据官方网站所言，Spectre.css 是“一套轻量化、响应式的现代 CSS 框架，用于实现更快、可扩展性更强的开发能力。Spectre 提供多种排版与元素的基本样式，基于 Flexbox 的响应式布局机制，外加纯 CSS 组件与工具程序。”

特性

• 轻量化（gzip 压缩后约 10 KB）

• 美观的组件与调色板。

• 直观的语法。

• 灵活性：无需 JS。

Tailwind CSS

项目归纳

“Tailwind CSS 是一款高度可定制的低级 CSS 框架，可以为您提供构建定制化设计所须要的所有构建单元，且您将完全告别那些恼人的样式问题。”——摘自 Tailwind CSS 官网

特性

• 响应式。

• 组件友好性。

• 可定制。

Shoelace

项目归纳

“Shoelace.css 是一套轻量化且具备前瞻性的 CSS 库，使用面向将来的 CSS 语法构建而成。其易于使用且具有充裕的定制化空间。Bottstrap 用户将在其中找到熟悉的使用感觉，但同时 Shoelace 又拥有使人耳目一新的设计。您几乎可以在任何浏览器上使用 Shoelace。CDN 版本很是适合用于原型设计，但若是要使用完整功能，您也能够从零开始利用 Shoelace 进行构建。”——摘自 Shoelace 官网

特性

• 轻量化，约 69 KB。

• 使用原生 CSS 变量与将来 CSS 功能。

• 易于使用且高度可定制。

Semantic UI

项目归纳

“Semantic UI 将单词与类视为一种可交换的概念。各个类使用来自天然语言的语法（例如名词 / 修饰关系、词序与多元性）对概念进行直观连接。其可以实现相似于 BEM 或 SMACSS 的优点，但却再也不单调乏味。”——摘自 Semantic UI 官网

特性

• 简洁的 HTML 与可交换的单词及类。

• 简化调试。

• 主题化

Skeleton

项目归纳

“Skeleton 只设计了一些标准的 HTML 元素，同时包含一套网格，但这些已经足够知足大部分需求。若是您正着手创建一个小型项目，或者以为本身并不须要大型框架提供的那么多实用工具，那么推荐您使用 Skeleton。”——摘自 Skeleton 官网

特性

• “轻如鸿毛”，仅约 400 行代码。

• 在设计中充分考虑移动设备平台。

• 初步样式设计，并不属于 UI 框架。

• 快速上手，无需编译或安装。

我我的很是喜欢 Skeleton，由于它可以加快开发速度并且设置起来也很是简单。

Tachyons

项目归纳

“Tachyons 是一套面向功能性 CSS 与人类的设计系统。无需编写 CSS 代码，您就可以快速构建并设计出新的 UI 方案。”——摘自 Tachyons 官网

“设计系统会随着规模的扩展（不管是组织扩展仍是产品扩展）而受到负面影响，这是由于不断有新的组件 / 变体被引入其中。这些谈何有时（或者说常常）缺乏记录，所以属于在组件 / 变体需求再次出现时的重复产物。即便是具备记录的组件，对几十甚至数百个实例的全部状态 / 变体进行收集与记录也是项巨大的负担。Tachyons 这类系统经过记录与限制组件的属性解决了这个难题。（我我的将其视为一种「亚原子」设计。）

你们随后能够经过这些亚原子组件（属性）进行组件建立。您只须要管理一份包含各「成分」亚原子组件的完整清单，而再也不像过去那样面对组件及其变体的繁琐记录。这些亚原子组件可以以无数种方式组合成无数种组件。这些组件虽然属性多样，但仍受限于一组合理的取值范围（即咱们的亚原子组件）。”——Daniel Eden，Facebook 公司设计师

特性

• 一种移动优先型 CSS 架构。

• 490 种无障碍颜色组合。

• 多款调试工具程序，可显著下降布局难度。

• 轻量化（约 14 KB）。

• 开源组件库。

• 可以与纯 HTML、React、Ember、Angular 以及 Rails 等顺畅协做。

• 无限可嵌套的响应式网格系统。

• 利用 PostCSS 构建而成。

Material Design

项目归纳

“由谷歌公司建立并设计，Material Design 是一种设计语言，其中结合了各项成功设计中的经典原则、创新成果与技术方案。谷歌的目标在于开发一套可以在任意平台之上，为全部产品提供统一用户体验的设计系统。”——摘自 Material Design 官网

特性

• 受到普遍支持。

• 提供入门模板 。

• 第三方支持。

若是你们愿意分享您喜欢的 CSS 库，发现本文中存在的错误，或者是我没有提到的顶尖库选项，请在评论中不吝指教！