CSS poate fi dificil de gestionat, mai ales pentru orice site de dimensiuni rezonabile. Obțineți o mână de ajutor cu acest preprocesor.

Să presupunem că ai învățat despre o caracteristică CSS cu adevărat cool, cum ar fi imbricarea. Dar când mergi mai departe și încerci, îți dai seama că sprijinul este groaznic și vor trece ani de zile până să-l poți folosi în sfârșit. Aceasta a fost o problemă uriașă în CSS până la introducerea preprocesoarelor precum PostCSS.

Aflați cum PostCSS vă permite să utilizați CSS modern și viitor astăzi în timpul dezvoltării. Veți afla exact ce este PostCSS, cum îl puteți utiliza și cel mai bun mod de a profita de funcțiile sale.

Configurarea Proiectului

Navigați într-un folder gol, creați un fișier numit index.html și adăugați următorul marcaj HTML în fișier:

html>
<htmllang="ro">
<cap>
<legăturărel="foaia de stil"href=„src/styles.css”>
cap>


<corp>
<p>Paragrafp>
<div>Divdiv>
corp>
html>

Acest document HTML redă un paragraf și element. De asemenea, importă un fișier de foaie de stil numit

instagram viewer
stiluri.css adica in interiorul src pliant. Creați fișierul în src folder și include următoarele reguli de stil CSS:

corpp {
culoare: portocale;
}
corpdiv {
culoare: albastru;
}
corp {
afişa: grilă;
}

Acest CSS stilează culoarea ambelor elemente de pe pagină și creează un aspect de grilă. Majoritatea browserelor acceptă sintaxa CSS normală ca aceasta. Dar când vă veți vedea sintaxa mai nouă, va trebui să introduceți PostCSS.

Crearea unui proiect Node.js și instalarea PostCSS

În termeni simpli, PostCSS vă permite să convertiți CSS modern în ceva pe care majoritatea browserelor îl pot înțelege; un proces cunoscut sub numele de transpilare. Acest lucru este perfect dacă doriți să încercați proprietăți CSS noi, experimentale sau nestandard din codul dvs. pe care browserele majore nu le acceptă.

PostCSS oferă, de asemenea, un ecosistem bogat de plugin-uri JavaScript pe care le puteți instala pentru a activa anumite funcții, cum ar fi minimizarea CSS, suportul pentru culori și suportul pentru listing.

Pentru a utiliza PostCSS, primul lucru pe care trebuie să-l faceți este să inițializați un nou proiect Node.js:

npm init -y

Această comandă va genera un fișier package.json care conține valorile implicite pentru aplicația dvs.

Apoi, instalați atât PostCSS, cât și PostCSS CLI. Al doilea pachet vă permite să rulați PostCSS din linia de comandă:

npm i --save-dev postcss postcss-cli

The --save-dev flag instalează ambele pachete npm ca dependențe de dezvoltare; veți folosi doar PostCSS și pluginurile sale pentru a procesa codul CSS în timpul dezvoltării.

Pentru a începe să utilizați PostCSS prin intermediul Linia de comandă, intră în ta pachet.json fișier și creați simplu build: css comandă pentru transpilare cu PostCSS:

"scripte": {
"build: css": „postcss src/styles.css --dir dest -w”
}

Această comandă va prelua CSS-ul tău simplu (stocat în src/styles.css), transpuneți codul și apoi scoateți-l în fișierul dest pliant. Rularea npm build: css comanda creează acest folder și îl populează cu stiluri.css fișier care conține cod care poate fi citit de browser.

Când importați CSS-ul în HTML, asigurați-vă că importați din folderul de destinație în care compilați CSS-ul și nu din folderul sursă din care se compilează PostCSS. Acesta, în cazul nostru, este dist folderul, nu src pliant.

Dacă vă deschideți site-ul într-un browser, veți vedea că site-ul încă accesează CSS. De fiecare dată când faceți modificări la fișierul sursă, PostCSS va recompila codul, iar modificările se vor reflecta pe pagina web.

Utilizarea pluginurilor PostCSS

Sunt sute de Pluginuri PostCSS pentru adăugarea de prefixe, linting, suport pentru sintaxă nouă și zeci de alte caracteristici la PostCSS. După instalarea unui plugin PostCSS, îl activați în interiorul postcss.config.js fișier — un fișier JavaScript pe care îl puteți utiliza pentru a configura toate configurațiile pentru PostCSS.

Instalați cssnano Plugin PostCSS cu următoarea comandă:

npm i --save-dev cssnano

Încă o dată, trebuie doar să salvați aceste dependențe ca dependențe de dezvoltare. Motivul este că toate acestea se întâmplă pe măsură ce vă dezvoltați. Nu aveți nevoie de PostCSS sau de niciunul dintre pluginurile sale după ce ați împins site-ul în producție.

Pentru a utiliza pluginul cssnano nou instalat, trebuie să adăugați următorul cod în interiorul postcss.config.js fişier:

const cssnano = cere("cssnano")
modul.exports = {
 pluginuri: [
 cssnano({
 presetat: „implicit”
 })
 ]
}

Acum, dacă reveniți la terminal și rulați din nou comanda de compilare, aceasta va reduce CSS-ul de ieșire (adică va face codul cât mai mic posibil uman). Așadar, atunci când împingeți către un site pregătit pentru producție, acesta va face CSS-ul dvs. cât mai mic posibil.

Folosind caracteristici moderne, cum ar fi imbricarea

Să presupunem că doriți să utilizați sintaxa de imbricare în foaia de stil, așa că înlocuiți blocul de paragraf în src/styles.css cu asta:

corp {
 & p {
culoare: portocale;
 }
}

Acest cod este același cu versiunea din codul de pornire. Dar aceasta va genera o eroare, deoarece sintaxa este foarte nouă și majoritatea browserelor web nu o acceptă. Puteți activa suportul pentru această sintaxă cu PostCSS instalând postcss-preset-env conecteaza.

Pluginul compilează împreună o grămadă de pluginuri diferite pentru a gestiona CSS în funcție de stadiul în care se află. Etapa 0 reprezintă caracteristicile super-experimentale care s-ar putea să nu ajungă nici măcar în CSS. În timp ce, etapa 4 este pentru caracteristicile limbajului care fac deja parte din specificația CSS.

În mod implicit, prezent-env folosește caracteristicile din etapa 2 (care sunt cel mai probabil să ajungă în CSS). Dar puteți schimba stadiul la orice doriți în fișierul de configurare.

Pentru a instala pluginul, rulați următoarea comandă:

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

Apoi în dvs postcss.config.js fișier, trebuie să importați pluginul și să îl înregistrați:

const cssnano = cere("cssnano")
const postcssPresetEnv = cere(„postcss-preset-env”)
modul.exports = {
 pluginuri: [
 cssnano({
 presetat: „implicit”
 }),
 postcssPresetEnv({ etapă: 1})
 ]
}

Ar trebui să treceți doar de etapa noului cod CSS pe care intenționați să-l utilizați. În acest caz, presupunem că caracteristica de imbricare este la etapa 1. Când rulați din nou comanda de compilare și verificați browserul, veți vedea că acesta a compilat codul imbricat în CSS standard pe care browserul îl poate înțelege.

Utilizarea PostCSS cu cadre

Configurarea manuală a PostCSS poate fi puțin dificilă. Acesta este motivul pentru care aproape toate cadrele moderne vin cu instrumente de grupare (de exemplu, Vite, Snowpack și Parcel), iar aceste instrumente vor avea suport pentru PostCSS încorporat. Și chiar dacă nu o fac, procesul de adăugare a suportului PostCSS este incredibil de ușor.

Amintiți-vă întotdeauna că Vite și majoritatea celorlalți bundleri folosesc Sistemul de module ES6, nu CommonJS. Pentru a ocoli acest lucru, trebuie să utilizați import declarație în loc de cere() în dumneavoastră postcssconfig.js fişier:

import cssnano din"cssnano"
// Codul de configurare merge aici

Atâta timp cât aveți pluginurile instalate, totul va funcționa bine.

Aflați mai multe despre SaSS

PostCSS este doar unul dintre zecile de preprocesoare CSS disponibile în prezent. Unul dintre ele este SaSS, care înseamnă foi de stil sintactic minunate.

A învăța să folosești un alt preprocesor major poate fi util ca dezvoltator CSS.