12月22日 消息:当我们开发和构建复杂的网站时，使用CSS进行样式化对开发者来说会变得很乏味，我们需要代码少而功能更多的样式。

这就是构建和使用 CSS 框架的原因，这里列出了八 个最佳框架:

Material UI

网址:https://mui.com/

据说Material UI （MUI） 提供了一套全面的 UI 工具，可帮助你更快地发布新功能。很多大型机构使用Material UI ，例如;Spotify、Unity、美国国家航空航天局、Netflix 等。

安装 MUI

npminstall@mui/material@emotion/react@emotion/styled

Foundation

网址:https://get.foundation/

世界上最先进的响应式前端框架。Foundation 是一系列响应式前端框架，可以轻松设计漂亮的响应式网站、应用程序和电子邮件，这些网站、应用程序和电子邮件在任何设备上看起来都赞。（来自他们的官方网站）。使用Foundation 的大型机构有:迪士尼、三星、Adobe、国家地理等

安装

npminstallfoundation-sites//or//yarnaddfoundation-sites

Bulma

网址:https://bulma.io/

Bulma 是一个免费的开源框架，提供随时可用的前端组件，你可以轻松组合这些组件来构建响应式 Web 界面。使用 bulma 时无需 CSS 知识。

安装

npminstallbulma

Tailwind CSS

网址:https://tailwindcss.com/

Tailwind CSS 无需离开 HTML 即可快速构建现代网站。这很有趣，因为你只需在 div 标签的类中编写样式。

安装

npminstall-Dtailwindcssnpxtailwindcssinit

Bootstrap

网址:https://getbootstrap.com/

Bootstrap 是一个功能强大、可扩展且功能丰富的前端工具包。借助 Bootstrap，你可以使用 Sass 进行构建和自定义，利用预构建的网格系统和组件，并使用强大的 JavaScript 插件使项目栩栩如生。

安装

npmibootstrap@5.2.3

Chakra UI

网址:https://chakra-ui.com/

Chakra UI 是一个简单、模块化且可访问的组件库，它提供构建 React 应用程序所需的构建块。借助 Chakra UI，可以减少编写 UI 代码的时间，而将更多时间用于为客户打造出色的体验。

安装

npmi@chakra-ui/react@emotion/react@emotion/styledframer-motionoryarnadd@chakra-ui/react@emotion/react@emotion/styledframer-motionorpnpmadd@chakra-ui/react@emotion/react@emotion/styledframer-motion

Headless UI

网址:https://headlessui.com/

Headless UI 具有完全无样式、完全可访问的 UI 组件，旨在与 Tailwind CSS 完美集成。这也是由 tailwind Labs 创建的。

安装

npminstall@headlessui/react

Semantic UI

网址:https://semantic-ui.com/

Semantic 是一个开发框架，可帮助使用人性化的 HTML 创建漂亮的响应式布局。

安装

npminstallsemantic-ui--savecdsemantic/gulpbuild

还有很多CSS框架也可以用来构建超级网站，但选择最佳网站的诀窍是没有诀窍，只要在深入研究后选择你认为适合你的那个。