CSS工程化簡單介紹 PostCSS介紹與外掛程式使用

css工程化在不同公司有不同做法，主要關注四個方面

組織：**的組織，怎麼劃分模組，怎麼更方便合作

優化：**怎樣寫更好，團隊合作中為什麼要這麼做

構建：**的壓縮、上線等等

維護css->postcss解析轉化->css

postcss解析轉化階段可以做的事: 模組化，加字首，相容性等等

postcss本身只有解析能力

各種神器特性全靠外掛程式

目前至少有200多個外掛程式

import 模組合併

autoprefixier自動加字首

cssnano壓縮**

cssnext使用css新特性

precss變數、mixin、迴圈等

安裝

npm install postcss-cli

.

/node_modules/
.bin/postcss src/
01-postcss.css

.

/node_modules/
.bin/postcss src/
01-postcss.css -o build/
01-postcss.css

const autoprefixer =

require
('autoprefixer');
module.exports =)]
};

browsers:

['last 2 versions'
]//適配最近兩個版本瀏覽器
browsers:
['>10%'
]//適配大於10%的瀏覽器
browsers:
['firefox >30'
]//適配firefox大於30的版本
browsers:
['since 2016'
]//適配2023年之後的瀏覽器

browser list

less是按這個**的標準解釋css的

npm install postcss-import

postcss.config.js

const autoprefixer =

require
('autoprefixer');
const atimport =
require
('postcss-import');
module.exports =)]
};

@import

"./02-plugins-module.css"
;.box

*

.

/node_modules/
.bin/postcss src/
01-postcss.css -o build/
02-plugins-module.css

*

.box

const autoprefixer =

require
('autoprefixer');
const cssnano =
require
('cssnano');
const atimport =
require
('postcss-import');
module.exports =),
cssnano	]}
;

src/02-plugins-module.css的內容

*

body
body

*

body
.box

#ffffff變成#fff, 兩個body變成乙個body

CSS工程化書寫簡單方式

建立變數書寫格式 變數名稱 具體的值 可以多個值，分隔符是空格 f70 red f71 1px solid f72 0 auto 建立變數書寫格式 ximin 混合器名稱 mixin f73 使用混合器 書寫格式 include 混合器名稱 建立帶參混合器書寫格式 mixin 混合器名稱 引數1,引...

css工程化概述

css工程化概述 css的問題 類名衝突的問題 當你寫乙個css類的時候，你是寫全域性的類呢，還是寫多個層級選擇後的類呢？你會發現，怎麼都不好 過深的層級不利於編寫 閱讀 壓縮 復用 過淺的層級容易導致類名衝突 一旦樣式多起來，這個問題就會變得越發嚴重，其實歸根結底，就是類名衝突不好解決的問題 重複...

css工程化面試題

1.如何解決css模組化的問題 less sass等css預處理器 postcss外掛程式 webpack處理css 2.postcss可以做什麼？其取決於外掛程式可以做什麼 autoprefixer cssnext prescc等相容性處理 import模組合併 css語法檢查，相容性檢查 壓縮檔...