CSS 框架

最近几年的前端发展越来越快,已经单独成为了一种职业。CSS 框架作为前端界比较有争议的工具,在很早之前就已经存在了,而且发展到现在仍然有用武之地。

无论是初级还是高级前端工程师,多多少少都会使用到 CSS 框架。初级工程师可以利用它们快速的编写原型界面,高级前端工程师则利用特殊的 CSS 框架来编写复杂的 UI 界面。

这篇文章收集了前端工程师最常用的 CSS 框架,并介绍它们的特点、优点和缺点,以方便你进行选择。

为什么使用 CSS 框架#

在正式介绍 CSS 框架之前,先了解一下为什么要使用 CSS 框架,它们在当今的前端开发中有什么作用。

  • 大部分 CSS 框架都提供了常见的 UI 样式,例如选项卡、卡片、按钮、导航等,可以直接复制粘贴示例代码来快速的给自己的页面加上这些组件。

  • 使用 CSS 框架可以省略大部分 CSS 样式的编写,直接使用框架提供的 class 名字,在 HTML 中引用就可以了。

  • 在编写大型网站时,CSS 样式难以维护,我们通常在不同页面加载同一个 CSS 文件,如果命名冲突,就会导致样式有问题。如果编码习惯不好,还会造成大量的重复代码。

如果想要更快速、更有效率的编写网站,并且使得代码更容易维护、更清晰,那么可以选择下边任意一个框架。

Bootstrap#

Bootstrap 算是最老牌的 CSS 框架了,自 2011 年 Twitter 公司开源了此项目以来,到目前 2021 年已经近 10 年了。它是为了解决跨浏览器兼容性问题和响应式网站设计的问题而产生的,一度成为最火爆的前端框架。

现在 Bootstrap 已经发展成为一个通用的、完整的 CSS 框架了,内置了丰富的 UI 组件和交互功能,来促进前端工程师的生产力。不过,火爆的背后一定也会有负面的评价,那么 Boostrap 的优缺点有哪些呢?

优点#

缺点#

Semantic UI#

Tailwind#

Bulma#

Materialize#

MDUI#

Foundation#

Primer#

Last updated on