前端開發(fā)框架與方案總結(jié)——藍(lán)藍(lán)設(shè)計(jì)

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)、排版和按鈕等。


iShot2021-05-31 10.55.29.png


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ā)。


iShot2021-05-31 14.50.44.png


   3.Semantic-UI


Semantic 是一個(gè)開發(fā)框架，可以使用人性化的 HTML 幫助創(chuàng)建漂亮的響應(yīng)式布局。Semantic UI 旨在使網(wǎng)站構(gòu)建過(guò)程更加語(yǔ)義化。核心特征是利用自然語(yǔ)言原理使代碼更易于閱讀，更容易理解。

iShot2021-05-31 18.36.54.png

4.Pure

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

iShot2021-05-31 18.37.30.png

5.Skeleton

Skeleton 如其名字，非常小巧，設(shè)計(jì)簡(jiǎn)約，麻雀雖小五臟俱全。網(wǎng)格系統(tǒng)，文本，表單，按鈕，列表，表格，媒體查詢等功能面面俱到。非常適合快速創(chuàng)建簡(jiǎn)約網(wǎng)站的需求。


iShot2021-05-31 18.38.17.png


快速搭建

為客戶節(jié)省時(shí)間成本， 并滿足客戶快速建站的需求，開發(fā)過(guò)程中 使用到css模塊化,html也應(yīng)簡(jiǎn)潔實(shí)用。

手寫源生 CSS

在我們最初學(xué)習(xí)寫頁(yè)面的時(shí)候，大家都學(xué)過(guò)怎么去寫 css，也就以下幾種情況：

  • 行內(nèi)樣式，即直接在 html 中的 style 屬性里編寫 css 代碼。
  • 內(nèi)嵌樣式，即在 html h 中的 style 標(biāo)簽內(nèi)編寫 class，提供給當(dāng)前頁(yè)面使用。
  • 導(dǎo)入樣式，即在內(nèi)聯(lián)樣式中 通過(guò) @import 方法，導(dǎo)入其他樣式，提供給當(dāng)前頁(yè)面使用。
  • 外部樣式，即使用 html 中的 link 標(biāo)簽，加載樣式，提供給當(dāng)前頁(yè)面使用。

我們?cè)诓粩嗝髦?，逐漸形成了以編寫內(nèi)嵌樣式和外部樣式為主要的編寫習(xí)慣。

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

使用行內(nèi)樣式的缺點(diǎn)
  • 樣式不能復(fù)用。
  • 樣式權(quán)重太高，樣式不好覆蓋。
  • 表現(xiàn)層與結(jié)構(gòu)層沒有分離。
  • 不能進(jì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è)面樣式閃爍。

使用預(yù)處理器 Sass/Less

隨著時(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)更順滑。

后處理器 PostCSS

隨著前端工程化的不斷發(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)景有：

  • 配合 stylelint 校驗(yàn) css 語(yǔ)法
  • 自動(dòng)增加瀏覽器前綴 autoprefixer
  • 編譯 css next 的語(yǔ)法

更多 postcss 使用場(chǎng)景

CSS 模塊化迅速發(fā)展

隨著 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 模塊化的概念。

CSS 模塊化定義

  • 你是否為 class 命名而感到苦惱？
  • 你是否有怕跟別人使用同樣 class 名而感到擔(dān)憂？
  • 你是否因?qū)蛹?jí)結(jié)構(gòu)不清晰而感到煩躁？
  • 你是否因代碼難以復(fù)用而感到不爽？
  • 你是否因?yàn)?common.css 的龐大而感到恐懼？

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

CSS 模塊化的實(shí)現(xiàn)方式

BEM 命名規(guī)范

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

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

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ù)：

  • emotion
  • radium
  • glamorous

總結(jié)

最后放一張總結(jié)好的圖。




v2-0c8a8007eae08838730306aa8e03c677_1440w.jpg


下一篇我們講一下主流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)系。

截屏2021-05-13 上午11.41.03.png


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

原文鏈接：

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( m.sillybuy.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ù)


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)目。

分享本文至：

日歷

鏈接

個(gè)人資料

存檔