2021-5-31 前端達(dá)人
在與客戶的溝通中，聆聽了許多建議，學(xué)習(xí)到了很多知識(shí)，也收到過(guò)贊美與批評(píng)，在經(jīng)過(guò)千錘百煉過(guò)后 總結(jié)了一點(diǎn)點(diǎn)經(jīng)驗(yàn)
首先：
框架選擇
網(wǎng)站css框架選擇（簡(jiǎn)潔，節(jié)約成本，快速開發(fā)）
對(duì)于一些簡(jiǎn)單靜態(tài)網(wǎng)站，展示類網(wǎng)站項(xiàng)目，達(dá)到快速開發(fā)建站，而又節(jié)約成本人力的情況下 選擇一些用于css庫(kù)的框架最為合適，
1.Bootstrap
Bootstrap 是最受歡迎的 HTML、CSS 和 JS 框架，用于開發(fā)響應(yīng)式布局、移動(dòng)設(shè)備優(yōu)先的 WEB 項(xiàng)目。
預(yù)處理工具 雖然可以直接使用 Bootstrap 提供的 CSS 樣式表，但是不要忘記，Bootstrap 的源碼是采用最流行的 CSS 預(yù)處理工具
一個(gè)框架、多種設(shè)備。 你的網(wǎng)站和應(yīng)用能在 Bootstrap 的幫助下通過(guò)同一份源碼快速、有效地適配手機(jī)、平板和 PC 設(shè)備，這一切都是 CSS 媒體 查詢（Media Query）的功勞。
功能完備 Bootstrap 提供了全面、美觀的文檔，你能在這里找到關(guān)于普通 HTML 元素、HTML 和 CSS 組件以及 jQuery 插件方面的所有詳細(xì)文檔。
Bootstrap 是最受歡迎的 CSS 框架，被認(rèn)為是擁有最好的響應(yīng)性的CSS框架。專為前端開發(fā)而設(shè)計(jì)，有助于構(gòu)建web設(shè)計(jì)理念、移動(dòng)優(yōu)先項(xiàng)目、網(wǎng)格系統(tǒng)、排版和按鈕等。
2.layui
開源模塊化前端 UI 框架
開源模塊化前端 UI 框架
由職業(yè)前端傾情打造，面向全層次的前后端開發(fā)者，易上手開箱即用的 Web UI 組件庫(kù)
Layui 是一款采用自身模塊規(guī)范編寫的情懷型前端UI框架，遵循原生HTML/CSS/JS的書寫與組織形式，門檻極低，拿來(lái)即用。其外在極簡(jiǎn)，卻又不失飽滿的內(nèi)在，體積輕盈，組件豐盈，從核心代碼到API的每一處細(xì)節(jié)都經(jīng)過(guò)精心雕琢，非常適合界面的快速開發(fā)。
3.Semantic-UI
Semantic 是一個(gè)開發(fā)框架，可以使用人性化的 HTML 幫助創(chuàng)建漂亮的響應(yīng)式布局。Semantic UI 旨在使網(wǎng)站構(gòu)建過(guò)程更加語(yǔ)義化。核心特征是利用自然語(yǔ)言原理使代碼更易于閱讀，更容易理解。
4.Pure
Pure 非常輕量級(jí)，經(jīng)過(guò)壓縮后不過(guò) 3.8KB。這是一個(gè)特別為移動(dòng)端考慮的框架，為了壓縮大小，每一行代碼都經(jīng)過(guò)仔細(xì)考量。當(dāng)然如果你不使用框架給出的全部模塊，體量還可以更小。
5.Skeleton
Skeleton 如其名字，非常小巧，設(shè)計(jì)簡(jiǎn)約，麻雀雖小五臟俱全。網(wǎng)格系統(tǒng)，文本，表單，按鈕，列表，表格，媒體查詢等功能面面俱到。非常適合快速創(chuàng)建簡(jiǎn)約網(wǎng)站的需求。
快速搭建
為客戶節(jié)省時(shí)間成本， 并滿足客戶快速建站的需求，開發(fā)過(guò)程中 使用到css模塊化,html也應(yīng)簡(jiǎn)潔實(shí)用。
在我們最初學(xué)習(xí)寫頁(yè)面的時(shí)候，大家都學(xué)過(guò)怎么去寫 css，也就以下幾種情況：
我們?cè)诓粩嗝髦?，逐漸形成了以編寫內(nèi)嵌樣式和外部樣式為主要的編寫習(xí)慣。
讀到這里大家肯定有所疑問(wèn)，為什么不建議使用行內(nèi)樣式？
使用行內(nèi)樣式的缺點(diǎn)
然后我們繼續(xù)剖析一下，為什么不建議使用導(dǎo)入樣式？
經(jīng)測(cè)試，在 css 中使用 @import 會(huì)有以下兩種情況：
1、在 IE6-8 下，@import 聲明指向的樣式表并不會(huì)與頁(yè)面其他資源并發(fā)加載，而是等頁(yè)面所有資源加載完成后才開始下載。
2、如果在 link 標(biāo)簽中去 @import 其他 css，頁(yè)面會(huì)等到所有資源加載完成后，才開始解析 link 標(biāo)簽中 @import 的 css。
使用導(dǎo)入樣式的缺點(diǎn) - 導(dǎo)入樣式，只能放在 style 標(biāo)簽的第一行，放其他行則會(huì)無(wú)效。 - @import 聲明的樣式表不能充分利用瀏覽器并發(fā)請(qǐng)求資源的行為，其加載行為往往會(huì)延后觸發(fā)或被其他資源加載掛起。 - 由于 @import 樣式表的延后加載，可能會(huì)導(dǎo)致頁(yè)面樣式閃爍。
隨著時(shí)間的不斷發(fā)展，我們逐漸發(fā)現(xiàn)，編寫源生的 css 其實(shí)并不友好，例如：源生的 css 不支持變量，不支持嵌套，不支持父選擇器等等，這些種種問(wèn)題，催生出了像 sass/less 這樣的預(yù)處理器。
預(yù)處理器主要是強(qiáng)化了 css 的語(yǔ)法，彌補(bǔ)了上文說(shuō)了這些問(wèn)題，但本質(zhì)上，打包出來(lái)的結(jié)果和源生的 css 都是一樣的，只是對(duì)開發(fā)者友好，寫起來(lái)更順滑。
隨著前端工程化的不斷發(fā)展，越來(lái)越多的工具被前端大佬們開發(fā)出來(lái)，愿景是把所有的重復(fù)性的工作都交給機(jī)器去做，在 css 領(lǐng)域就產(chǎn)生了 postcss。
postcss 可以稱作為 css 界的 babel，它的實(shí)現(xiàn)原理是通過(guò) ast 去分析我們的 css 代碼，然后將分析的結(jié)果進(jìn)行處理，從而衍生出了許多種處理 css 的使用場(chǎng)景。
常用的 postcss 使用場(chǎng)景有：
隨著 react、vue 等基于模塊化的框架的普及使用，我們編寫源生 css 的機(jī)會(huì)也越來(lái)越少。我們常常將頁(yè)面拆分成許多個(gè)小組件，然后像搭積木一樣將多個(gè)小組件組成最終呈現(xiàn)的頁(yè)面。
但是我們知道，css 是根據(jù)類名去匹配元素的，如果有兩個(gè)組件使用了一個(gè)相同的類名，后者就會(huì)把前者的樣式給覆蓋掉，看來(lái)解決樣式命名的沖突是個(gè)大問(wèn)題。
為了解決這個(gè)問(wèn)題，產(chǎn)生出了 CSS 模塊化的概念。
你如果遇到如上問(wèn)題，那么就很有必要使用 css 模塊化。
BEM 的意思就是塊（block）、元素（element）、修飾符（modifier）。是由 Yandex 團(tuán)隊(duì)提出的一種前端命名方法論。這種巧妙的命名方法讓你的 css 類對(duì)其他開發(fā)者來(lái)說(shuō)更加透明而且更有意義。
BEM 的命名規(guī)范如下：
/* 塊即是通常所說(shuō)的 Web 應(yīng)用開發(fā)中的組件或模塊。每個(gè)塊在邏輯上和功能上都是相互獨(dú)立的。 */ .block { } /* 元素是塊中的組成部分。元素不能離開塊來(lái)使用。BEM 不推薦在元素中嵌套其他元素。 */ .block__element { } /* 修飾符用來(lái)定義塊或元素的外觀和行為。同樣的塊在應(yīng)用不同的修飾符之后，會(huì)有不同的外觀 */ .block--modifier { }通過(guò) bem 的命名方式，可以讓我們的 css 代碼層次結(jié)構(gòu)清晰，通過(guò)嚴(yán)格的命名也可以解決命名沖突的問(wèn)題，但也不能完全避免，畢竟只是一個(gè)命名約束，不按規(guī)范寫照樣能運(yùn)行。
CSS Modules 指的是我們像 import js 一樣去引入我們的 css 代碼，代碼中的每一個(gè)類名都是引入對(duì)象的一個(gè)屬性，通過(guò)這種方式，即可在使用時(shí)明確指定所引用的 css 樣式。
并且 CSS Modules 在打包的時(shí)候會(huì)自動(dòng)將類名轉(zhuǎn)換成 hash 值，完全杜絕 css 類名沖突的問(wèn)題。
使用方式如下：
1、定義 css 文件。
.className { color: green; } /* 編寫全局樣式 */ :global(.className) { color: red; } /* 樣式復(fù)用 */ .otherClassName { composes: className; color: yellow; } .otherClassName { composes: className from "./style.css"; }2、在 js 模塊中導(dǎo)入 css 文件。
import styles from "./style.css"; element.innerHTML = '<div class="' + styles.className + '">'; 3、配置 css-loader 打包。
CSS Modules 不能直接使用，而是需要進(jìn)行打包，一般通過(guò)配置 css-loader 中的 modules 屬性即可完成 css modules 的配置。
// webpack.config.js module.exports = { module: { rules: [ { test: /\.css$/, use:{ loader: 'css-loader', options: { modules: { // 自定義 hash 名稱 localIdentName: '[path][name]__[local]--[hash:base64:5]', } } } ] } }; 4、最終打包出來(lái)的 css 類名就是由一長(zhǎng)串 hash 值生成。
._2DHwuiHWMnKTOYG45T0x34 { color: red; } ._10B-buq6_BEOTOl9urIjf8 { background-color: blue; }CSS in JS，意思就是使用 js 語(yǔ)言寫 css，完全不需要些單獨(dú)的 css 文件，所有的 css 代碼全部放在組件內(nèi)部，以實(shí)現(xiàn) css 的模塊化。
CSS in JS 其實(shí)是一種編寫思想，目前已經(jīng)有超過(guò) 40 多種方案的實(shí)現(xiàn)，最出名的是 styled-components。
使用方式如下：
import React from "react"; import styled from "styled-components"; // 創(chuàng)建一個(gè)帶樣式的 h1 標(biāo)簽 const Title = styled.h1` font-size: 1.5em; text-align: center; color: palevioletred; `; // 創(chuàng)建一個(gè)帶樣式的 section 標(biāo)簽 const Wrapper = styled.section` padding: 4em; background: papayawhip; `; // 通過(guò)屬性動(dòng)態(tài)定義樣式 const Button = styled.button` background: ${props => (props.primary ? "palevioletred" : "white")}; color: ${props => (props.primary ? "white" : "palevioletred")}; font-size: 1em; margin: 1em; padding: 0.25em 1em; border: 2px solid palevioletred; border-radius: 3px; `; // 樣式復(fù)用 const TomatoButton = styled(Button)` color: tomato; border-color: tomato; `; <Wrapper> <Title>Hello World, this is my first styled component!</Title> <Button primary>Primary</Button> </Wrapper>; 可以看到，我們直接在 js 中編寫 css，案例中在定義源生 html 時(shí)就創(chuàng)建好了樣式，在使用的時(shí)候就可以渲染出帶樣式的組件了。
除此之外，還有其他比較出名的庫(kù)：
最后放一張總結(jié)好的圖。
下一篇我們講一下主流js框架 與js開發(fā)
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)掃碼藍(lán)小助，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系。
部分借鑒自：知乎 作者：孟思行
原文鏈接：
藍(lán)藍(lán)設(shè)計(jì)( www.teruid.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
Bootstrap 是最受歡迎的 HTML、CSS 和 JS 框架，用于開發(fā)響應(yīng)式布局、移動(dòng)設(shè)備優(yōu)先的 WEB 項(xiàng)目。
Bootstrap 是最受歡迎的 HTML、CSS 和 JS 框架，用于開發(fā)響應(yīng)式布局、移動(dòng)設(shè)備優(yōu)先的 WEB 項(xiàng)目。
Bootstrap 是最受歡迎的 HTML、CSS 和 JS 框架，用于開發(fā)響應(yīng)式布局、移動(dòng)設(shè)備優(yōu)先的 WEB 項(xiàng)目。
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.teruid.com