10 pluginuri minunate PostCSS pentru a vă face un expert CSS

PostCSS este un instrument incredibil de versatil care face posibilă transformă stilurile CSS cu pluginuri JavaScript. Flexibilitatea lui constă în modul în care este construit.

Partea centrală a PostCSS este un modul Node.js pe care îl puteți instala cu npm și dispune de un ecosistem de peste 200 de pluginuri pe care puteți alege să le utilizați în proiect.

PostCSS nu este nici preprocesor, nici postprocesor, deoarece diferite pluginuri PostCSS pot intra în oricare dintre aceste categorii sau ambele; depinde în întregime de tine ceea ce faci din ea. Cu PostCSS, tu nu trebuie să înveți o sintaxă diferită ca în cazul Sass sau LESS; puteți începe imediat să-l utilizați.

PostCSS ia fișierul CSS existent și îl transformă în date care pot fi citite de JavaScript, apoi pluginurile JavaScript fac modificările și PostCSS returnează versiunea modificată a fișierului original. Sună rece, nu-i așa??

În acest post vom arunca o privire la 10 pluginuri PostCSS vă oferă o perspectivă asupra câtorva lucruri minunate pe care le puteți realiza cu acest instrument minunat.

1. Autoprefixer

Autoprefixer este probabil cel mai cunoscut plugin PostCss, deoarece este folosit de companii de tehnologie notabile precum Google, Twitter și Shopify. Aceasta adaugă prefixele furnizorilor la regulile CSS unde este necesar.

Autoprefixer folosește datele de la Pot I Use. În acest fel, nu este datată și poate aplica întotdeauna cele mai recente reguli. Puteți verifica modul în care funcționează pe site-ul său demo interactiv.

2. CSSnext

CSSnext este un transpilator CSS care vă permite să utilizați sintaxa CSS viitoare pe site-urile actuale. W3C are numeroase reguli CSS noi care nu sunt implementate în prezent de browsere, dar ar putea permite dezvoltatorilor să scrie mai rapid și mai ușor CSS mai sofisticat. CSSnext a fost făcut pentru a depăși acest decalaj.

Merită să te uiți la caracteristicile sale pentru a vedea ce poți realiza cu ea, de exemplu, poți utilizați interogări media personalizate, selectori personalizați, modificatori de culoare, filtre SVG și pseudoclase noi în desenele tale.

3. PreCSS

PreCSS este unul dintre pluginurile PstCSS care funcționează ca un preprocesor CSS. Ea face posibilă profitați de un marcaj Sass în fișierele dvs. sytlesheet.

Prin introducerea PreCSS în fluxul de lucru puteți utiliza variabilele, if-else declaraţii, pentru bucle, amestecuri, @extinde și @import regulile, cuiburile și multe alte caracteristici utile în codul dvs. CSS. Documentația Github de la PreCSS vă oferă instrucțiuni detaliate despre modul în care puteți profita din plin de aceasta.

4. StyleLint

StyleLint este un liner modern CSS care corectează și validează codul dvs. CSS. Ea facilitează evitarea erorilor și vă împinge să urmați convențiile de codare consecvente.

StyleLint înțelege cea mai recentă sintaxă CSS, astfel încât poate fi folosită împreună cu pluginul PreCSS menționat anterior. De asemenea, vă permite să vă configurați propria configurație și chiar verificați dacă setările sunt valide.

5. Activele PostCSS

Pluginul PostCSS Assets este o metodă utilă manager de fonduri pentru fișierele dvs. CSS. Poate fi o alegere excelentă dacă aveți tendința de a avea probleme cu căile URL, deoarece Activele PostCSS vă izolează fișierele de corespondență din schimbările de mediu.

Trebuie să definiți căile de încărcare, căile relative și o cale de bază, iar pluginul va căuta în mod automat activitățile de care aveți nevoie. De exemplu, puteți scrie următorul cod dacă aveți nevoie de URL-ul corespunzător al foobar.jpg imagine:

 corp fond: rezolva ('foobar.jpg'); 

Active PostCSS de asemenea are grijă de cache-ul pentru active, așa cum puteți seta CACHEBUSTER variabilă la true dacă doriți ca căile URL să fie modificate automat în cazul modificării unui material. Acest plugin inteligent calculează, de asemenea, dimensiunile (lățimea și înălțimea) fișierelor imagine sau chiar le redimensionează utilizând un raport presetat.

6. CSSNano

Dacă aveți nevoie de fișiere CSS optimizate și miniatate pentru un site de producție, merită să faceți check out CSSNano. Este un plugin modular care constă din mai multe pluginuri mai mici, cu o singură responsabilitate PostCSS. Acesta nu numai că execută tehnici minime de bază, cum ar fi eliminarea spațiilor albe, dar are și opțiuni avansate care fac posibilă optimizarea focalizată.

Printre numeroase alte caracteristici, CSSNano este capabil să reboteze valorile indexului z, să reducă identificatorii personalizați, să convertească lungimea, timpul și valorile culorilor și să elimine prefixele furnizorilor învechite.

7. Font Magician

Dacă sunteți un fan al tipografiei sofisticate, veți dori cu siguranță Font Magician Pluginul PostCSS. Magia Font Magician se bazează pe capacitatea sa de a generând automat toate elementele necesare @ Font-face norme.

Cum funcționează este destul de simplă, trebuie doar să adăugați font-family: "Fontul My Fav"; Regula CSS la un element HTML, iar Font Magician face restul lucrării. Poate adăuga Fonturi Google, copia locală a unui font, tipografia Bootstrap și poate încărca și fonturile în mod asincron. Iată site-ul său demo interactiv.

8. Scrieți SVG

V-ati intrebat vreodata cat de cool ar fi sa scrieti SVG direct in fisierele CSS? Cu ajutorul pluginului Write SVG PostCSS puteți realiza cu ușurință acest obiectiv.

Acest plugin, de exemplu, face posibilă stocați-vă fundalul și pictogramele SVG în fișierul dvs. CSS, Și mai târziu adăugați-le la elementul HTML relevant în modul următor:

 @svg pătrate @rect umple: var (- culoare, negru); lățime: 100%; înălțime: 100%;  .exemplu fundal: alb svg (param pătrate (- culoare # 00b1ff)) acoperi; 

9. Grilă pierdută

Lost Grid este un mare plugin PostCSS care vă oferă un impresionant Sistemul de grilă CSS asta nu numai funcționează cu CSS simplu dar și cu limbi preprocesor (Sass, LESS, Stylus). Utilizează calc () Funcția CSS pentru a crea rețele frumoase pe care le puteți utiliza cu ușurință fără a cheltui prea mult timp cu personalizarea.

Lost Grid are reguli destul de simple, de exemplu definirea unei coloane cu lățime de 25% nu necesită mai mult decât acest fragment de cod mic:

 div coloană pierdută: 1/4; 

10. Spiritele PostCSS

PostCSS Sprite plugin-ul facilitează generați sprite de imagine, adică colecții de imagini plasate într-un singur fișier. După setarea câtorva opțiuni, pluginul preia imaginile din fișierul dvs. de stil, le îmbină într-un sprite, apoi actualizează referințele imaginii ori de câte ori este necesar.

Puteți utiliza filtre și grupuri diferite pentru a determina imaginile pe care doriți să le puneți în sprite și puteți seta și dimensiunile imaginii de ieșire.