在與客戶的溝通中，聆聽了許多建議，學習到了很多知識，也收到過贊美與批評，在經過千錘百煉過后  總結了一點點經驗

首先：

框架選擇

    網站css框架選擇（簡潔，節約成本，快速開發）

    對于一些簡單靜態網站，展示類網站項目，達到快速開發建站，而又節約成本人力的情況下 選擇一些用于css庫的框架最為合適，

1.Bootstrap

        Bootstrap 是最受歡迎的 HTML、CSS 和 JS 框架，用于開發響應式布局、移動設備優先的 WEB 項目。

        預處理工具  雖然可以直接使用 Bootstrap 提供的 CSS 樣式表，但是不要忘記，Bootstrap 的源碼是采用最流行的 CSS 預處理工具

        一個框架、多種設備。 你的網站和應用能在 Bootstrap 的幫助下通過同一份源碼快速、有效地適配手機、平板和 PC 設備，這一切都是 CSS 媒體 查詢（Media Query）的功勞。

功能完備  Bootstrap 提供了全面、美觀的文檔，你能在這里找到關于普通 HTML 元素、HTML 和 CSS 組件以及 jQuery 插件方面的所有詳細文檔。

Bootstrap 是最受歡迎的 CSS 框架，被認為是擁有最好的響應性的CSS框架。專為前端開發而設計，有助于構建web設計理念、移動優先項目、網格系統、排版和按鈕等。

2.layui

開源模塊化前端 UI 框架

開源模塊化前端 UI 框架

      由職業前端傾情打造，面向全層次的前后端開發者，易上手開箱即用的 Web UI 組件庫

Layui 是一款采用自身模塊規范編寫的情懷型前端UI框架，遵循原生HTML/CSS/JS的書寫與組織形式，門檻極低，拿來即用。其外在極簡，卻又不失飽滿的內在，體積輕盈，組件豐盈，從核心代碼到API的每一處細節都經過精心雕琢，非常適合界面的快速開發。

   3.Semantic-UI

Semantic 是一個開發框架，可以使用人性化的 HTML 幫助創建漂亮的響應式布局。Semantic UI 旨在使網站構建過程更加語義化。核心特征是利用自然語言原理使代碼更易于閱讀，更容易理解。

4.Pure

Pure 非常輕量級，經過壓縮后不過 3.8KB。這是一個特別為移動端考慮的框架，為了壓縮大小，每一行代碼都經過仔細考量。當然如果你不使用框架給出的全部模塊，體量還可以更小。

5.Skeleton

Skeleton 如其名字，非常小巧，設計簡約，麻雀雖小五臟俱全。網格系統，文本，表單，按鈕，列表，表格，媒體查詢等功能面面俱到。非常適合快速創建簡約網站的需求。

快速搭建

為客戶節省時間成本， 并滿足客戶快速建站的需求，開發過程中 使用到css模塊化,html也應簡潔實用。

手寫源生 CSS

在我們最初學習寫頁面的時候，大家都學過怎么去寫 css，也就以下幾種情況：

• 行內樣式，即直接在 html 中的 style 屬性里編寫 css 代碼。
• 內嵌樣式，即在 html h 中的 style 標簽內編寫 class，提供給當前頁面使用。
• 導入樣式，即在內聯樣式中 通過 @import 方法，導入其他樣式，提供給當前頁面使用。
• 外部樣式，即使用 html 中的 link 標簽，加載樣式，提供給當前頁面使用。

我們在不斷摸索中，逐漸形成了以編寫內嵌樣式和外部樣式為主要的編寫習慣。

讀到這里大家肯定有所疑問，為什么不建議使用行內樣式？

使用行內樣式的缺點

• 樣式不能復用。
• 樣式權重太高，樣式不好覆蓋。
• 表現層與結構層沒有分離。
• 不能進行緩存，影響加載效率。

然后我們繼續剖析一下，為什么不建議使用導入樣式？

經測試，在 css 中使用 @import 會有以下兩種情況：

1、在 IE6-8 下，@import 聲明指向的樣式表并不會與頁面其他資源并發加載，而是等頁面所有資源加載完成后才開始下載。

2、如果在 link 標簽中去 @import 其他 css，頁面會等到所有資源加載完成后，才開始解析 link 標簽中 @import 的 css。

使用導入樣式的缺點 - 導入樣式，只能放在 style 標簽的第一行，放其他行則會無效。 - @import 聲明的樣式表不能充分利用瀏覽器并發請求資源的行為，其加載行為往往會延后觸發或被其他資源加載掛起。 - 由于 @import 樣式表的延后加載，可能會導致頁面樣式閃爍。

使用預處理器 Sass/Less

隨著時間的不斷發展，我們逐漸發現，編寫源生的 css 其實并不友好，例如：源生的 css 不支持變量，不支持嵌套，不支持父選擇器等等，這些種種問題，催生出了像 sass/less 這樣的預處理器。

預處理器主要是強化了 css 的語法，彌補了上文說了這些問題，但本質上，打包出來的結果和源生的 css 都是一樣的，只是對開發者友好，寫起來更順滑。

后處理器 PostCSS

隨著前端工程化的不斷發展，越來越多的工具被前端大佬們開發出來，愿景是把所有的重復性的工作都交給機器去做，在 css 領域就產生了 postcss。

postcss 可以稱作為 css 界的 babel，它的實現原理是通過 ast 去分析我們的 css 代碼，然后將分析的結果進行處理，從而衍生出了許多種處理 css 的使用場景。

常用的 postcss 使用場景有：

• 配合 stylelint 校驗 css 語法
• 自動增加瀏覽器前綴 autoprefixer
• 編譯 css next 的語法

更多 postcss 使用場景

CSS 模塊化迅速發展

隨著 react、vue 等基于模塊化的框架的普及使用，我們編寫源生 css 的機會也越來越少。我們常常將頁面拆分成許多個小組件，然后像搭積木一樣將多個小組件組成最終呈現的頁面。

但是我們知道，css 是根據類名去匹配元素的，如果有兩個組件使用了一個相同的類名，后者就會把前者的樣式給覆蓋掉，看來解決樣式命名的沖突是個大問題。

為了解決這個問題，產生出了 CSS 模塊化的概念。

CSS 模塊化定義

• 你是否為 class 命名而感到苦惱？
• 你是否有怕跟別人使用同樣 class 名而感到擔憂？
• 你是否因層級結構不清晰而感到煩躁？
• 你是否因代碼難以復用而感到不爽？
• 你是否因為 common.css 的龐大而感到恐懼？

你如果遇到如上問題，那么就很有必要使用 css 模塊化。

CSS 模塊化的實現方式

BEM 命名規范

BEM 的意思就是塊（block）、元素（element）、修飾符（modifier）。是由 Yandex 團隊提出的一種前端命名方法論。這種巧妙的命名方法讓你的 css 類對其他開發者來說更加透明而且更有意義。

BEM 的命名規范如下：

/* 塊即是通常所說的 Web 應用開發中的組件或模塊。每個塊在邏輯上和功能上都是相互獨立的。 */ .block { } /* 元素是塊中的組成部分。元素不能離開塊來使用。BEM 不推薦在元素中嵌套其他元素。 */ .block__element { } /* 修飾符用來定義塊或元素的外觀和行為。同樣的塊在應用不同的修飾符之后，會有不同的外觀 */ .block--modifier { }

通過 bem 的命名方式，可以讓我們的 css 代碼層次結構清晰，通過嚴格的命名也可以解決命名沖突的問題，但也不能完全避免，畢竟只是一個命名約束，不按規范寫照樣能運行。

CSS Modules

CSS Modules 指的是我們像 import js 一樣去引入我們的 css 代碼，代碼中的每一個類名都是引入對象的一個屬性，通過這種方式，即可在使用時明確指定所引用的 css 樣式。

并且 CSS Modules 在打包的時候會自動將類名轉換成 hash 值，完全杜絕 css 類名沖突的問題。

使用方式如下：

1、定義 css 文件。

.className { color: green; } /* 編寫全局樣式 */ :global(.className) { color: red; } /* 樣式復用 */ .otherClassName { composes: className; color: yellow; } .otherClassName { composes: className from "./style.css"; }

2、在 js 模塊中導入 css 文件。

import styles from "./style.css"; element.innerHTML = '<div class="' + styles.className + '">'; 

3、配置 css-loader 打包。

CSS Modules 不能直接使用，而是需要進行打包，一般通過配置 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、最終打包出來的 css 類名就是由一長串 hash 值生成。

._2DHwuiHWMnKTOYG45T0x34 { color: red; } ._10B-buq6_BEOTOl9urIjf8 { background-color: blue; }

CSS In JS

CSS in JS，意思就是使用 js 語言寫 css，完全不需要些單獨的 css 文件，所有的 css 代碼全部放在組件內部，以實現 css 的模塊化。

CSS in JS 其實是一種編寫思想，目前已經有超過 40 多種方案的實現，最出名的是 styled-components。

使用方式如下：

import React from "react"; import styled from "styled-components"; // 創建一個帶樣式的 h1 標簽 const Title = styled.h1`  font-size: 1.5em;  text-align: center;  color: palevioletred; `; // 創建一個帶樣式的 section 標簽 const Wrapper = styled.section`  padding: 4em;  background: papayawhip; `; // 通過屬性動態定義樣式 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; `; // 樣式復用 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 時就創建好了樣式，在使用的時候就可以渲染出帶樣式的組件了。

除此之外，還有其他比較出名的庫：

• emotion
• radium
• glamorous

總結

最后放一張總結好的圖。

下一篇我們講一下主流js框架 與js開發

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。

部分借鑒自：知乎 作者：孟思行

原文鏈接：

藍藍設計( m.lzhte.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

Bootstrap 是最受歡迎的 HTML、CSS 和 JS 框架，用于開發響應式布局、移動設備優先的 WEB 項目。

Bootstrap 是最受歡迎的 HTML、CSS 和 JS 框架，用于開發響應式布局、移動設備優先的 WEB 項目。

Bootstrap 是最受歡迎的 HTML、CSS 和 JS 框架，用于開發響應式布局、移動設備優先的 WEB 項目。