Top 5 CSS alata za web programere i dizajnere

CSS je priješao dug put, ali alat oko njega dosad nije bio.


Ako smatrate da je pisanje CSS-a poput borbe protiv čudovišta u katranu, niste sami. Iako je CSS jedna od najosnovnijih tehnologija koja napaja web, on sam po sebi nije odgovarajući programski jezik ili okvir. Kao rezultat toga, čim vaš projekt počne postajati sve izraženiji, to također postaje nered – izgleda da su odabiračka pravila na sve strane i da je teško pronaći što je tamo; dok na svoje stranice uključujete fontove, vanjski CSS, JS i drugu imovinu, čini se da konačna veličina paketa raste iz ruku, a vi se pitate gdje su se izgubili ideali brzih, jednostavnih prednjih strana.

Ali ne treba biti takav. Danas se alat oko CSS-a razvio do razine da se tok rada ne može samo prikrojiti, već i učiniti ugodnim. U ovom ću članku govoriti o pet takvih CSS alata za koje sam u svom radu imao ogromnu vrijednost. Svjesno izbjegavam, uključujući „igračke“ alate poput CSS generatora, generatora izbornika itd., Jer oni stvaraju više problema nego što rješavaju.

Vlak za CSS dolazi! Idemo! �� ��

PostCSS

Ako volite JavaScript, svidjet će vam se ideja koju sada možemo dodati i upravljati CSS-om kroz JavaScript. A to je upravo ta sposobnost PostCSS pruža.

Međutim, to nije samo sintaksa šećera na temelju JavaScript na CSS-u. PostCSS objedinjuje nekoliko snažnih paketa / značajki, što rezultira mnogo ugodnijim i lakšim tijekom rada kada se radi o CSS-u. Na primjer:

  • Prefiksi dobavljača automatski se dodaju na temelju entiteta koji koristite.
  • Sposobnost otkrivanja CSS značajki koje se mogu koristiti u trenutnom pregledniku.
  • Korištenje nadolazećih, ali tek puštanih, ali vrlo moćnih ažuriranja sintaksa na CSS.
  • Fleksibilna mreža koja je fleksibilna kao što je dobila.

Mislim da neću praviti PostCSS ako ne uključim primjer rešetke. Dakle, evo nas. Nešto tako jednostavno kao ovo:

div {
izgubljeni-stupac: 1/3
}

pretvara se u potpuno razvijeni CSS sustav u kojem su vodeni gotovo svi rubni slučajevi:

div {
širina: kalc (99,9% * 1/3) –
(30px – 30px * 1/3));
}
div: nth-dijete (1n) {
plovak: lijevo;
margina-desno: 30px;
jasno: nijedan;
}
div: last-dijete {
margina-desno: 0;
}
div: nth-dijete (3n) {
margina-desno: 0;
plutati: desno;
}
div: nth-dijete (3n + 1) {
jasno: oboje;
}

Pošto je to stvar koju pokreće JS, PostCSS nije baš jednostavno postaviti, pogotovo ako ste dizajner i nemate puno veze sa modulima, paketima i npm svijetom općenito. U skladu s tim, potencijal PostCSS-a u vašem poslu je ogroman i ne treba ga zanemariti.

PurgeCSS

Volite li moderan tijek rada temeljen na frontendu, ali frustrirani ste što donosi previše prtljage? Ako je odgovor da, PurgeCSS je vaš prijatelj, barem što se CSS-a smatra.

Za one koji možda ne znaju u čemu je velik problem: evo brzog prelaska. Kada izrađujete aplikacije za jednu stranicu koristeći prednje okvire poput React, Angular, Vue itd., Prolazite kroz ono što se naziva “proces izrade”. U osnovi sve svoje CSS, JS, SASS, itd. Kodirate u zasebne datoteke (organizirate ih kako vam se čini najintimitivnijim), ali nakon što završite, kažite grupi da to “napravi”. Ono što treba učiniti jest pročitati sav izvorni kod koji ste napisali, primijeniti na njega razne filtre (minifikacija, obmanjivanje / zanemarivanje itd.) I ispljunuti izlaz u pojedinačne datoteke, obično “app.js” za sve JavaScript i “App.css” za sve CSS. Ove su datoteke, zajedno s mršavim “index.html”, sve što vam treba za pokretanje prednjeg dijela aplikacije. Loša strana je ta što se sve uključuje u ove završne datoteke, njihova se veličina često proteže iznad onoga što je dopušteno za brzo vrijeme odgovora; Na primjer, nije neuobičajeno vidjeti “app.js” koji iznosi više od 500 KB!

PurgeCSS se dodaje kao dio vašeg procesa izrade i sprječava da se neiskorišteni CSS ujedini u konačni ishod. Tipičan slučaj upotrebe je Bootstrap: to je knjižnica srednje veličine s nekoliko UI klasa za različite komponente. Ako vaša aplikacija koristi, recimo, 10% Bootstrap-ove klase, preostalih 90% samo je zaostatak u vašoj posljednjoj CSS datoteci. Ali zahvaljujući PurgeCSS, takve neiskorištene CSS datoteke mogu se prepoznati i spriječiti u procesu sastavljanja, što rezultira mnogo manjim konačnim CSS datotekama (5-6 puta smanjenje veličine je prilično normalno).

Dakle, samo naprijed “očistite” nepotrebni CSS PurgeCSS! ��

brzina vjetra

brzina vjetra CSS je okvir, ali toliko ide u usporedbu sa zrnom da sam mislio da ću ga ovdje uključiti među CSS alate. Ako mrzite inline CSS (tko ne ?!), Tailwind će vas najvjerojatnije natjerati da se u užasu povučete kad prvi put naiđete na njega. Imajmo prvi ukus gledajući kako možete šifrirati tipični obrazac pomoću Tailwind CSS:

Korisničko ime

Lozinka

Molimo odaberite lozinku.

Prijaviti se


Zaboravili ste lozinku?

© 2019 Acme Corp. Sva prava zadržana.

“Je li ovo šala ili što ?! Koje su sve te dosadne male nastave? Nakon detaljnijeg pregleda zašto, dovraga, postavljam margine, podloge i boju izravno zajedno s HTML-om? Je li ovo 2019. ili šta? “

Misli poput ove se očekuju. Znam jer sam to osjećao i odmah sam zatvorio poklopac na Tailwind. Tek kasnije sam naišao na podcast na kojem je gost preradio modernu web stranicu pristojne veličine u Tailwind-u i počeo sam obraćati pažnju.

Prije nego što krenemo dalje, razmotrite ta pitanja:

  • Jeste li umorni od pamćenja standardnih okvirnih klasa i njihovih funkcija kako biste mogli dizajnirati prema vlastitoj želji? Dobar primjer je promjena izgleda i ponašanja navigacijske trake Bootstrap.
  • Mislite li da su popularni okviri poput Bootstrapa prekomjerni i pokušavate učiniti mnogo više nego što bi trebali?
  • Nađete li vi što miješate okvire jer želite najbolje od svih svjetova?
  • Želite li imati veću kontrolu nad svojim dizajnom, a ipak smatrate da je CSS iskustvo vanilije prevladalo?

Ako je odgovor na bilo što od toga „da”, loše vam treba. A sad, pogledajmo što je to “wind” i što radi.

Tailwind je ono što nazivamo CSS-om, a koji se razlikuje od onog što radimo u svakodnevnom radnom toku: semantički CSS. Razlika između semantičkog CSS-a i uslužnog CSS-a je u tome što prvi pokušava elemente stila grupirati po vizualnim odjeljcima koji se pojavljuju na stranici. Dakle, ako na stranici imate navigacijski izbornik, kartice, karusele itd., Semantički način obavljanja stvari bio bi grupiranje pravila u stilu CSS-a u klase poput .nav, .card, .carousel itd., Koje njihovi pododjeljci označeni su u skladu s tim (na primjer .card-body, .card-footer, itd.). Ovo je daleko najčešći pristup CSS-u, a svi smo ga upoznali kroz okvire poput Bootstrap, Foundation, Bulma, UI Kit itd..

S druge strane, “uslužni” stil pisanja CSS naziva klase točno prema njihovoj funkciji: klasa koja kontrolira marginu za gornju i donju stranu bit će imenovana kao .margin-y-medium i može se primijeniti bilo gdje u HTML-u označavanje tamo gdje je potrebna ta marža. Iako ovo pomalo uvodi puzanje imena klase (samo brzo pogledajte kôd koji sam podijelio ranije ili na snimku zaslona – toliko klasa!), Intencija CSS-a je kristalno jasna: ne trebate skakati napred i nazad među dokumentacijom, CSS-om i HTML-om kako biste utvrdili prava imena i pravi efekt.

To je vrlo oslobađajući način rada, ali tu je i ulov: morate imati svoje CSS osnove čvrsto na mjestu (uključujući moderne koncepte poput Flexboxa). To je zato što Tailwind ne nudi stilove “out of the box” za bilo koje komponente na vašoj stranici, a na vama je da izgradite stilove iz zadanih blokova. Drugi je problem postavljanja: Tailwind vam omogućuje da grupirate nekoliko CSS klasa u dijelove koji se nazivaju komponentama, ali to se provodi kroz JavaScript i zahtijeva učitavanje modula i pakete kao što je Webpack.

Sve rečeno i učinjeno, Tailwind je polarizirajući, upečatljiv novi način stylinga i svidjet će se onima koji žude za većom jednostavnošću i kontrolom..

Saas

Iako Sass postoji već duže vrijeme, uključio sam ga ovdje jer programeri još uvijek ne znaju koliko je to korisno. Stilski sjajni listovi stila (ili SASS) super je skup CSS-a koji je razvijen kako bi ukrotio ludilo koje kreše u projekt nakon što CSS poraste nakon nekoliko redaka.

Zamislite ovo: daleki ste put napisali CSS za svoj projekt. Koristite nekoliko boja, smislili ste neke razumne margine za razne div, stilove fontova i tako dalje. Samo što sada znate da to nije sve tako dobro zajedno. Možda želite isprobati veće marže za sve odjeljke, kartice i gumbe. Pa, što sad? Čak je i sama zamisao da morate pretražiti-zamijeniti svoju veliku datoteku CSS-a dovoljna za glavobolju. Svi smo to učinili i svi znamo koliko je to sklono pogreškama. Sass rješava ovaj problem uvođenjem varijabli:

Kad pišemo HTML, stavimo elemente unutar drugih elemenata. No, pri pisanju CSS-a moramo napisati ravnu hijerarhiju pravila zbog čega je mentalno teško „uklopiti“ CSS u HTML. Pomoću Sass-a možete oponašati strukturu stranice unutar datoteka sa stilom:

Sve to uopće ne počinje iscrpiti površinu proizvoda koje Sass nudi: modularni dizajn, uključuju datoteke, miksene, nasljedstvo. , , popis se nastavlja i nastavlja. Svakako, morat ćete naučiti tijek rada Sillasovog prevoditelja i uključiti ga u svoj, ali po mom mišljenju, taj par utrošenih sati je ulaganje koje će vam platiti iznova i iznova!

CSS Linters

Budući da web dizajneri (i programeri za korisničko sučelje – iako se pitam kako se ta dva pojma razlikuju ��) koriste jednostavne uređivače teksta – ili kao što je to slučaj ovih dana, kodirajte izravno iz alata za razvoj Chrome-a – rijetko ih čuju ili koriste koristi Linter. S druge strane, programeri koji koriste dobre uređivače teksta poput VS koda, uzvišenog teksta ili drugih IDE-ova vrlo dobro poznaju ovaj alat, jer im je druga priroda. U svakom slučaju, poanta je da ako ste jedan od onih programera CSS-a koji se utopio u neurednom CSS-u, mogli biste imati koristi od lintera.

Jednostavno rečeno, veznik je program koji provjerava vaš kôd na pogreške i nedosljednosti. To čini pomoću niza pravila koja imaju za utvrđivanje što nije u redu, a što nije u skladu. Dobri linteri integriraju se s IDE i uređivačima koda i mogu se konfigurirati za pokretanje svaki put kad spremite izvornu datoteku. Također vam pomažu u pregledu boja, pogreškama i automatskom dovršavanju dok sastavljate CSS datoteke:

Ali evo najboljeg dijela – ako slijedite određeni CSS stil i oblikovanje, vez možete prilagoditi svom zadovoljstvu. To osigurava da CSS u projektu slijedi isti vodič za stil (veznik se također može konfigurirati da automatski formatira datoteku svako spremanje / predavanje izvornog koda). Dakle, bez obzira radite li u timu ili sami, brod je uvijek sjajan dodatak vašem tijeku rada.

Zaključak

Siguran sam da ste do sada uvjereni da je moderni CSS razvoj daleko krik od prošlosti stada-mačaka. ��

To je rečeno, još ću vam nešto priznati, čak i ako zvučim kao neispravan zapis: neke od alata koje sam opisao u ovom članku nije lako postaviti, posebno ako niste prijateljski povezani s npm ekosustavom. , Ali prije nego što se osjećate odvratno i okrenete lice, recite mi ovo: je li CSS bio lak kada ste bili prvi učenje to? Je li bilo lako naučiti centrirati div, ovladati promjenama raspoloženja plovaka i tako dalje? Slično tome, alati koje sam ovdje opisao imaju neke krivulje učenja, ali oni ih itekako vrijede.

Iskreno, jednom kada počnete doživljavati rezultate, udarit ćete se što to nećete učiniti prije. I nemojmo podcjenjivati ​​važnost CSS-a koji je modularan, mršav i dobro organiziran!

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map