12月22日 消息:當(dāng)我們開發(fā)和構(gòu)建復(fù)雜的網(wǎng)站時(shí)，使用CSS進(jìn)行樣式化對開發(fā)者來說會變得很乏味，我們需要代碼少而功能更多的樣式。
這就是構(gòu)建和使用 CSS 框架的原因，這里列出了八 個(gè)最佳框架:
Material UI
網(wǎng)址:https://mui.com/
據(jù)說Material UI （MUI） 提供了一套全面的 UI 工具，可幫助你更快地發(fā)布新功能。很多大型機(jī)構(gòu)使用Material UI ，例如;Spotify、Unity、美國國家航空航天局、Netflix 等。
安裝 MUI
npminstall@mui/material@emotion/react@emotion/styled
Foundation
網(wǎng)址:https://get.foundation/
世界上最先進(jìn)的響應(yīng)式前端框架。Foundation 是一系列響應(yīng)式前端框架，可以輕松設(shè)計(jì)漂亮的響應(yīng)式網(wǎng)站、應(yīng)用程序和電子郵件，這些網(wǎng)站、應(yīng)用程序和電子郵件在任何設(shè)備上看起來都贊。（來自他們的官方網(wǎng)站）。使用Foundation 的大型機(jī)構(gòu)有:迪士尼、三星、Adobe、國家地理等
安裝
npminstallfoundation-sites//or//yarnaddfoundation-sites
Bulma
網(wǎng)址:https://bulma.io/
Bulma 是一個(gè)免費(fèi)的開源框架，提供隨時(shí)可用的前端組件，你可以輕松組合這些組件來構(gòu)建響應(yīng)式 Web 界面。使用 bulma 時(shí)無需 CSS 知識。
安裝
npminstallbulma
Tailwind CSS
網(wǎng)址:https://tailwindcss.com/
Tailwind CSS 無需離開 HTML 即可快速構(gòu)建現(xiàn)代網(wǎng)站。這很有趣，因?yàn)槟阒恍柙?div 標(biāo)簽的類中編寫樣式。
安裝
npminstall-Dtailwindcssnpxtailwindcssinit
Bootstrap
網(wǎng)址:https://getbootstrap.com/
Bootstrap 是一個(gè)功能強(qiáng)大、可擴(kuò)展且功能豐富的前端工具包。借助 Bootstrap，你可以使用 Sass 進(jìn)行構(gòu)建和自定義，利用預(yù)構(gòu)建的網(wǎng)格系統(tǒng)和組件，并使用強(qiáng)大的 JavaScript 插件使項(xiàng)目栩栩如生。
安裝
npmibootstrap@5.2.3
Chakra UI
網(wǎng)址:https://chakra-ui.com/
Chakra UI 是一個(gè)簡單、模塊化且可訪問的組件庫，它提供構(gòu)建 React 應(yīng)用程序所需的構(gòu)建塊。借助 Chakra UI，可以減少編寫 UI 代碼的時(shí)間，而將更多時(shí)間用于為客戶打造出色的體驗(yàn)。
安裝
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
網(wǎng)址:https://headlessui.com/
Headless UI 具有完全無樣式、完全可訪問的 UI 組件，旨在與 Tailwind CSS 完美集成。這也是由 tailwind Labs 創(chuàng)建的。
安裝
npminstall@headlessui/react
Semantic UI
網(wǎng)址:https://semantic-ui.com/
Semantic 是一個(gè)開發(fā)框架，可幫助使用人性化的 HTML 創(chuàng)建漂亮的響應(yīng)式布局。
安裝
npminstallsemantic-ui--savecdsemantic/gulpbuild
還有很多CSS框架也可以用來構(gòu)建超級網(wǎng)站，但選擇最佳網(wǎng)站的訣竅是沒有訣竅，只要在深入研究后選擇你認(rèn)為適合你的那個(gè)。
