Kā izmantot PostCSS, lai notīrītu tīmekļa dizainu

Pieņemsim, ka jūs uzzinājāt par patiešām lielisku CSS funkciju, piemēram, ligzdošanu. Bet, izmēģinot to, jūs saprotat, ka atbalsts ir šausmīgs, un paies gadi, līdz beidzot varēsit to izmantot. Līdz tādu priekšapstrādātāju ieviešanai kā PostCSS tā bija milzīga problēma CSS.

Uzziniet, kā PostCSS izstrādes laikā ļauj izmantot mūsdienu un nākotnes CSS. Jūs uzzināsit, kas tieši ir PostCSS, kā to izmantot un kā vislabāk izmantot tā funkcijas.

Projekta iestatīšana

Pārejiet uz tukšu mapi, izveidojiet failu ar nosaukumu index.html un pievienojiet failam šādu HTML marķējumu:

html>
<htmllang="lv">
<galvu>
<saiterel="stila lapa"href="src/styles.css">
galvu>
<ķermeni>
<lpp>Paragrāfslpp>
<div>Divdiv>
ķermeni>
html>

Šis HTML dokuments atveido rindkopu un elements. Tas arī importē stila lapas failu ar nosaukumu stili.css kas atrodas iekšpusē src mapi. Izveidojiet failu mapē src mapi un iekļaujiet šādus CSS stila noteikumus:

ķermenilpp {
krāsa: apelsīns;
}
ķermenidiv {
krāsa: zils;
}
ķermeni {
displejs: režģis;
}

Šis CSS veido abu lapas elementu krāsu stilus un izveido režģa izkārtojumu. Lielākā daļa pārlūkprogrammu atbalsta parasto CSS sintaksi, piemēram, šo. Bet, kad redzat jaunāku sintaksi, jums būs jāievieš PostCSS.

Node.js projekta izveide un PostCSS instalēšana

Vienkārši izsakoties, PostCSS ļauj pārveidot mūsdienu CSS par kaut ko tādu, ko vairums pārlūkprogrammu var saprast; process, ko parasti sauc par transpilāciju. Tas ir lieliski piemērots, ja vēlaties izmēģināt jaunus, eksperimentālus vai nestandarta CSS rekvizītus savā kodā, ko lielākās pārlūkprogrammas var neatbalstīt.

PostCSS piedāvā arī bagātīgu JavaScript spraudņu ekosistēmu, ko varat instalēt, lai iespējotu noteiktas funkcijas, piemēram, CSS minimizāciju, krāsu atbalstu un šķiedru atbalstu.

Lai izmantotu PostCSS, pirmā lieta, kas jums jādara, ir inicializēt jaunu Node.js projektu:

npm init -y

Šī komanda ģenerēs failu package.json, kurā ir ietvertas jūsu lietotnes noklusējuma vērtības.

Pēc tam instalējiet gan PostCSS, gan PostCSS CLI. Otrā pakotne ļauj palaist PostCSS no komandrindas:

npm i --save-dev postcss postcss-cli

The --save-dev karodziņš instalē abus npm paketes kā dev atkarības; jūs izmantosit tikai PostCSS un tā spraudņus, lai izstrādes laikā apstrādātu CSS kodu.

Lai sāktu lietot PostCSS, izmantojot komandrindas interfeiss, ieejiet savā pack.json failu un izveidojiet vienkāršu uzbūve: css komanda pārsūtīšanai ar PostCSS:

"skripti": {
"būvēt: css": "postcss src/styles.css --dir dest -w"
}

Šī komanda izmantos jūsu tukšo CSS (kas tiek saglabāta src/styles.css), transpilē kodu un pēc tam izvadiet to mapē dest mapi. Palaižot npm uzbūve: css komanda izveido šo mapi un aizpilda to ar stili.css failu, kas satur pārlūkprogrammā lasāmu kodu.

Importējot CSS kodā HTML, pārliecinieties, ka importējat no mērķa mapes, kurā kompilējat savu CSS, nevis no avota mapes, no kuras PostCSS kompilē. Mūsu gadījumā tas ir dist mapi, nevis src mapi.

Ja atverat savu vietni pārlūkprogrammā, redzēsit, ka vietne joprojām piekļūst CSS. Ikreiz, kad veiksit izmaiņas avota failā, PostCSS atkārtoti kompilēs kodu un izmaiņas tiks atspoguļotas tīmekļa lapā.

Izmantojot PostCSS spraudņus

Ir simtiem PostCSS spraudņi lai PostCSS pievienotu priedēkļus, iznīcināšanu, jaunu sintakses atbalstu un desmitiem citu funkciju. Pēc PostCSS spraudņa instalēšanas jūs to aktivizējat iekšā postcss.config.js fails — JavaScript fails, ko varat izmantot, lai iestatītu visas PostCSS konfigurācijas.

Instalējiet cssnano PostCSS spraudnis ar šādu komandu:

npm i --save-dev cssnano

Atkal jāsaglabā šīs atkarības tikai kā izstrādātāja atkarības. Iemesls ir tāds, ka tas viss notiek jūsu attīstības laikā. Pēc vietnes pārsūtīšanas uz ražošanu jums nav nepieciešams PostCSS vai kāds no tā spraudņiem.

Lai izmantotu tikko instalēto cssnano spraudni, jums ir jāpievieno šāds kods postcss.config.js fails:

konst cssnano = pieprasīt("cssnano")
modulis.exports = {
 spraudņi: [
 cssnano({
 iepriekš iestatīts: 'noklusējuma'
 })
 ]
}

Tagad, ja atgriezīsities terminālī un atkārtoti palaižat veidošanas komandu, tiks samazināts izvades CSS (t.i., kods tiks padarīts pēc iespējas mazāks). Tātad, pārejot uz ražošanai gatavu vietni, tas padarīs jūsu CSS pēc iespējas mazāku.

Izmantojot modernas funkcijas, piemēram, ligzdošanu

Pieņemsim, ka vēlaties savā stila lapā izmantot ligzdošanas sintaksi un aizstāt rindkopu bloku src/styles.css ar šo:

ķermeni {
 & lpp {
krāsa: apelsīns;
 }
}

Šis kods ir tāds pats kā versija jūsu sākuma kodā. Taču tas radīs kļūdu, jo sintakse ir ļoti jauna, un lielākā daļa tīmekļa pārlūkprogrammu to neatbalsta. Varat iespējot šīs sintakses atbalstu, izmantojot PostCSS, instalējot postcss-preset-env iespraust.

Spraudnis apkopo dažādus spraudņus CSS apstrādei atkarībā no tā, kurā stadijā tas ir. 0. posms ir īpaši eksperimentālas funkcijas, kuras, iespējams, pat neietilpst CSS. Savukārt 4. posms ir paredzēts valodas funkcijām, kas jau ir daļa no CSS specifikācijas.

Pēc noklusējuma, tagadne-env izmanto 2. pakāpes līdzekļus (kas, visticamāk, iegūs CSS). Bet jūs varat mainīt posmu uz jebkuru vēlamo konfigurācijas failā.

Lai instalētu spraudni, palaidiet šādu komandu:

npm i --save-dev postcss-preset-env

Tad tavā postcss.config.js failu, jums ir jāimportē spraudnis un jāreģistrē tas:

konst cssnano = pieprasīt("cssnano")
konst postcssPresetEnv = pieprasīt("postcss-preset-env")
modulis.exports = {
 spraudņi: [
 cssnano({
 iepriekš iestatīts: 'noklusējuma'
 }),
 postcssPresetEnv({ posms: 1})
 ]
}

Jums vajadzētu izturēt tikai to jaunā CSS koda posmu, kuru plānojat izmantot. Šajā gadījumā mēs pieņemam, ka ligzdošanas funkcija ir 1. posmā. Atkārtoti palaižot būvēšanas komandu un pārbaudot pārlūkprogrammu, redzēsit, ka tajā ir apkopots ligzdotais kods standarta CSS formātā, ko pārlūkprogramma var saprast.

Izmantojot PostCSS ar ietvariem

PostCSS manuāla konfigurēšana var būt nedaudz sāpīga. Tāpēc gandrīz visos modernajos ietvaros ir komplektēšanas rīki (piemēram, Vite, Snowpack un Parcel), un šiem rīkiem būs iebūvēts PostCSS atbalsts. Un pat ja viņi to nedara, PostCSS atbalsta pievienošanas process ir neticami vienkāršs.

Vienmēr atcerieties, ka Vite un lielākā daļa citu komplektētāju izmanto ES6 moduļu sistēma, nevis CommonJS. Lai to apietu, jums ir jāizmanto imports vietā paziņojums prasīt () tavā postcssconfig.js fails:

imports cssnano no"cssnano"
// Šeit tiek parādīts konfigurācijas kods

Kamēr jums būs instalēti spraudņi, viss darbosies labi.

Uzziniet vairāk par SaSS

PostCSS ir tikai viens no desmitiem pašlaik pieejamo CSS priekšapstrādātāju. Viens no tiem ir SaSS, kas apzīmē sintaktiski satriecošas stila lapas.

CSS izstrādātājam var noderēt mācīšanās izmantot citu lielu priekšapstrādātāju.