欧美啪啪精品,九九热99精品视频在线,九九热免费在线视频观看

<dfn id="sm46c"></dfn>

国产精品天天看天天狠,女高中生强奷系列在线播放,久久无码免费的a毛片大全,国产日韩综合av在线,亚洲国产中文综合专区在,特殊重囗味sm在线观看无码,中文字幕一区二区三区四区在线,无码任你躁久久久久久老妇蜜桃

前端開發(fā)框架與方案總結——藍藍設計

2021-5-31 前端達人

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

首先：

框架選擇

網站css框架選擇（簡潔，節(jié)約成本，快速開發(fā)）

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

1.Bootstrap

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

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

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

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

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

2.layui

開源模塊化前端 UI 框架

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

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

3.Semantic-UI

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

4.Pure

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

5.Skeleton

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

快速搭建

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

手寫源生 CSS

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

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

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

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

使用行內樣式的缺點

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

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

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

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

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

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

使用預處理器 Sass/Less

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

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

后處理器 PostCSS

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

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

常用的 postcss 使用場景有：

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

更多 postcss 使用場景

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

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

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

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

CSS 模塊化定義

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

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

CSS 模塊化的實現方式

BEM 命名規(guī)范

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

BEM 的命名規(guī)范如下：

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

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

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"; // 創(chuàng)建一個帶樣式的 h1 標簽 const Title = styled.h1`  font-size: 1.5em;  text-align: center;  color: palevioletred; `; // 創(chuàng)建一個帶樣式的 section 標簽 const Wrapper = styled.section`  padding: 4em;  background: papayawhip; `; // 通過屬性動態(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; `; // 樣式復用 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>;