Najboljših 5 orodij CSS za spletne razvijalce in oblikovalce

CSS je že daleč, a orodja okoli njega še niso bila.


Če menite, da je pisanje CSS-a kot boj proti pošasti v katranu, niste sami. Čeprav je CSS ena najbolj temeljnih tehnologij, ki napaja splet, ta sam po sebi ni ustrezen programski jezik ali okvir. Kot rezultat, ko projekt postane vse bolj izrazit, nered je nered – zdi se, da so selektorska pravila povsod naokoli, in težko je najti, kje je; ko na svoje strani vključite pisave, zunanji CSS, JS in druga sredstva, se zdi, da končna velikost svežnja raste iz rok, in sprašujete se, kje so se izgubili ideali hitrih, uporabnikom prijaznih sprednjih strani.

A ni treba biti tak. Danes se je orodje okrog CSS-ja razvilo na raven, ki je potek dela ne moremo samo ukrotiti, ampak narediti tudi prijetno. V tem članku bom govoril o petih takih orodjih CSS, za katere sem v svojem delu ugotovil izjemno vrednost. Zavestno se izogibam, vključno z orodji za igrače, kot so CSS generatorji, generatorji menijev itd., Ker povzročajo več težav, kot jih rešujejo.

Vlak CSS prihaja! Pojdimo! �� ��

PostCSS

Če imate radi JavaScript, vam bo všeč ideja, ki jo lahko zdaj dodajamo in nadzorujemo CSS prek JavaScript. In ravno to je sposobnost tega PostCSS prispeva.

Vendar pa to ni samo sintaksa sladkorja, ki temelji na JavaScript, nad CSS. PostCSS zavija več močnih paketov / funkcij skupaj, kar ima za posledico veliko bolj prijeten in enostaven potek dela pri delu s CSS-om. Na primer:

  • Profili prodajalca se samodejno dodajo glede na to, katero lastnost uporabljate.
  • Možnost zaznavanja, katere funkcije CSS je mogoče uporabiti v trenutnem brskalniku.
  • Uporaba prihajajočih, vendar izdanih, vendar zelo močnih sintaksi posodobitev za CSS.
  • Odzivno omrežje, ki je enako fleksibilno.

Mislim, da se ne bom ukvarjal s PostCSS, če ne vključim primera mreže. Torej, tukaj gremo. Nekaj ​​tako preprostega kot to:

div {
izgubljeni stolpec: 1/3
}

se pretvori v popoln sistem CSS s skoraj vsemi robnimi primeri:

div {
širina: kalc (99,9% * 1/3) –
(30px – 30px * 1/3));
}
div: nth-otrok (1n) {
plovec: levo;
meja-desno: 30px;
jasno: noben;
}
div: last-otrok {
meja-desno: 0;
}
div: nth-otrok (3n) {
meja-desno: 0;
plovec: desno;
}
div: nth-otrok (3n + 1) {
jasno: oboje;
}

Ker je to stvar, ki jo poganja JS, PostCSS ni ravno enostavno nastaviti, še posebej, če ste oblikovalec in niste imeli veliko skupnega z moduli, paketi in npm svetom na splošno. Glede na to je potencial PostCSS pri vašem delu ogromen in ga ne smemo spregledati.

PurgeCSS

Ali imate radi sodoben delovni potek v okviru frontenda, a ste frustrirani, da prinesejo preveč prtljage? Če je odgovor da, je PurgeCSS vaš prijatelj, vsaj kar se tiče CSS-ja.

Za tiste, ki morda ne veste, kaj je veliko: tukaj je hitra pot. Ko sestavite aplikacije za eno stran z uporabo okvirjev v ospredju, kot so React, Angular, Vue itd., Boste preučili tisto, kar se imenuje “postopek izdelave”. V bistvu vse svoje CSS, JS, SASS itd. Kodirate v ločene datoteke (organizirate jih tako, kot se vam zdi najbolj intuitivno), ko pa končate, pa ponudniku povejte, naj stvar “zgradi”. To je, da preberete vso izvorno kodo, ki ste jo napisali, nanjo namestite različne filtre (minifikacija, prikrivanje / ulifikacija itd.) In izhod izpnite v posamezne datoteke, običajno “app.js” za vse JavaScript in “App.css” za vse CSS. Te datoteke, skupaj s tankim indeksom.html, so vse, kar potrebujete za zagon sprednje strani aplikacije. Slaba stran je, da se vse, kar vse vključi v te končne datoteke, njihova velikost pogosto presega, kar je dovoljeno za hiter odzivni čas; na primer, ni redko videti “app.js”, ki presega 500 KB!

PurgeCSS je dodan kot del vašega delovnega procesa gradnje in preprečuje, da bi neuporabljeni CSS vključil v končni izid. Tipičen primer uporabe je Bootstrap: to je srednje velika knjižnica z več razredi uporabniškega vmesnika za različne komponente. Če vaša aplikacija uporablja, recimo, 10% razredov Bootstrap, je preostalih 90% edini utrip v vaši zadnji datoteki CSS. Toda zahvaljujoč PurgeCSS lahko takšne neuporabljene datoteke CSS prepoznamo in preprečimo iz postopka izdelave, kar ima za posledico veliko manjše končne datoteke CSS (zmanjšanje velikosti 5-6 krat je precej normalno).

Torej, nadaljujte s “čiščenjem” nepotrebnega CSS-ja PurgeCSS! ��

Zračni veter

Zračni veter je okvir CSS, vendar je toliko v nasprotju z zrnom, da sem mislil, da ga bom tukaj vključil med orodja CSS. Če sovražite inline CSS (kdo ne ?!), vas bo Tailwind najverjetneje povzročil, da se boste v grozi odvrnili, ko boste prvič naleteli nanj. Naj bo prvi okus, če pogledamo, kako lahko kodirate tipičen obrazec s pomočjo Tailwind CSS:

Uporabniško ime

Geslo

Prosimo, izberite geslo.

Prijaviti


Ste pozabili geslo?

© 2019 Acme Corp. Vse pravice pridržane.

“Je to šala ali kaj ?! Kaj vse so tisti moteči mali razredi? Po natančnejšem pregledu zakaj za vraga nastavljam robove, oblazinjenje in barvo neposredno skupaj s HTML? Je to leto 2019 ali kaj? “

Misli, kot je ta, so pričakovane. Vem, ker sem se počutil isto in takoj zaprl pokrov na Tailwind. Šele pozneje sem naletel na podcast, kjer je gost preuredil trendovsko spletno mesto v Tailwindu spodobne velikosti in začel sem biti pozoren.

Preden se premaknemo naprej, razmislite o teh vprašanjih:

  • Ste naveličani pomnjenja standardnih okvirnih razredov in njihovih funkcij, da lahko svoje zasnove prilagodite po svojih željah? Dober primer je sprememba videza in obnašanja navigacijske vrstice Bootstrap.
  • Ali menite, da so priljubljeni okviri, kot je Bootstrap, pretirani in poskušate narediti veliko več, kot bi morali?
  • Se vam zdi, da mešate okvire, ker želite najboljše od vseh svetov?
  • Ali želite imeti večji nadzor nad svojimi dizajni in kljub temu ugotovite, da je izkušnja vanilijevega CSS presenetljiva?

Če je odgovor na katero koli od teh vprašanj “da”, potrebujete zavoj vetra slabo. Zdaj pa si oglejmo, kaj je tailwind in kaj počne.

Tailwind se imenuje CSS, ki je prvi pripomoček, ki se razlikuje od tistega, kar počnemo v svojih vsakodnevnih delovnih procesih: semantični CSS. Razlika med pomenskim CSS in uporabnim CSS je v tem, da prvi poskuša elemente sloga združiti po imenu vizualnih odsekov, ki se pojavijo na strani. Če imate na strani navigacijski meni, kartice, vrtiljak itd., Bi semantični način delovanja pomenil združitev pravil v slogu CSS v razrede, kot so .nav, .card, .carousel itd., Ki njihovi podpoglavji so ustrezno označeni (na primer .card-body, .card-footer itd.). To je daleč najpogostejši pristop k CSS in vsi ga poznamo v okvirih, kot so Bootstrap, Foundation, Bulma, UI Kit itd..

Po drugi strani pa “uporabni” slog pisanja razredov imen CSS natančno glede na njihovo funkcijo: razred, ki nadzoruje rob za zgornjo in spodnjo stran, bo imenovan kot .margin-y-medium in ga je mogoče uporabiti kjer koli v HTML markacija, kjer je potrebna ta marža. Medtem ko to nekoliko uvaja ime razreda (le na hitro si oglejte kodo, ki sem jo delil prej ali na posnetku zaslona – toliko razredov!), Je namera CSS kristalno jasna: ni vam treba skakati naprej in nazaj med dokumentacijo, CSS in HTML, da ugotovite prava imena in pravi učinek.

To je zelo osvobajajoč način dela, vendar je tudi ulov: osnove CSS morate imeti pravilno nameščene (vključno s sodobnimi koncepti, kot je Flexbox). To je zato, ker Tailwind ne ponuja nobenih slogov v okencu za nobene sestavine na vaši strani, vi pa morate sami izdelovati sloge iz danih gradnikov. Druga težava je v nastavitvi: Tailwind vam omogoča, da združite več razredov CSS v tiste, ki se imenujejo komponente, vendar to poteka prek JavaScript in zahteva nalaganje modulov in paket, kot je Webpack.

Povedano in storjeno je Tailwind polarizirajoč, osupljiv nov način oblikovanja in bo všeč tistim, ki hrepenijo po večji preprostosti in nadzoru.

Saas

Čeprav Sass je že dolgo, sem jo vključil sem, ker razvijalci še vedno ne vedo, kako koristna je. Stylistically Awesome Style Sheets (ali SASS) je super nabor CSS-a, ki je bil razvit, da ukroti norost plazenja v projekt, ko CSS preraste nekaj vrstic.

Predstavljajte si: daleč ste napisali CSS za svoj projekt. Uporabljate nekaj barv, si omislite nekaj smiselnih robov za različne div, sloge pisav in podobno. Razen zdaj, ko se zavedate, da ni vse skupaj tako dobro. Mogoče bi radi preizkusili večje marže za vse razdelke, kartice in gumbe. No, kaj zdaj? Že sama zamisel, da bi morali iskati-zamenjati po svoji velikanski datoteki CSS, je dovolj, da bi lahko ustvarili en glavobol. Vsi smo to storili in vsi vemo, kako nagnjeni so k napakam Sass to težavo rešuje z uvedbo spremenljivk:

Ko pišemo HTML, gnezdimo elemente znotraj drugih elementov. Toda pri pisanju CSS moramo napisati ravno hierarhijo pravil, zaradi česar je mentalno težko prilagoditi CSS v HTML. S Sassom lahko posnemate strukturo strani znotraj datotek s stili:

Vse to se sploh ne začne praskati po površini dobrot, ki jih ponuja Sass: modularno oblikovanje, vključitev datotek, kombinacij, dedovanje. . . seznam gre naprej in naprej. Seveda se boste morali naučiti delovni tok prevajalnika Sass in ga vključiti v svoj, toda po mojem mnenju je ta nekaj porabljenih ur naložba, ki vam bo plačala znova in znova!

CSS Linters

Ker spletni oblikovalci (in razvijalci uporabniškega vmesnika – čeprav se sprašujem, kako se ta dva izraza razlikujeta use) uporabljajo preproste urejevalnike besedil – ali kot je to danes, jih kodirajte neposredno iz orodij za razvijalce Chroma – le redko slišijo ali izkoristijo prednost linter. Po drugi strani pa programerji, ki uporabljajo dobre urejevalnike besedil, kot so VS Code, Sublime Text ali drugi IDE, to orodje zelo dobro poznajo, saj je zanje drugačna. Kakorkoli že, poanta je, če ste eden od tistih razvijalcev CSS, ki se utopi v zmešanem CSS-ju, bi lahko imeli koristi od veznika.

Preprosto povedano, linter je program, ki kodo preveri glede napak in neskladnosti. To stori s pomočjo nabora pravil, ki jih ima za ugotavljanje, kaj je narobe in kaj je v neskladju. Dobre povezave so integrirane z IDE in urejevalniki kod in se lahko konfigurirajo za zagon vsakič, ko shranite izvorno datoteko. Pomagajo vam tudi pri barvnih predogledih, napakah in samodejnem dokončanju, ko sestavljate datoteke CSS:

Toda tu je najboljši del – če sledite določenemu oblikovanju in oblikovanju CSS-ja, lahko oblogo prilagodite po svojem zadovoljstvu. To zagotavlja, da CSS v projektu sledi istemu vodilu za slog (liner je lahko konfiguriran tudi tako, da datoteko samodejno formatira vsako shranjevanje / zavezo izvorne kode). Torej, ne glede na to, ali delate v skupini ali sami, je vezalka vedno odličen dodatek k delovnemu toku vašega projekta.

Zaključek

Prepričan sem, da ste do zdaj prepričani, da je sodobni razvoj CSS daleč od preteklosti s pastirstvom. ��

Če rečem, bom spet nekaj priznal, četudi zveni kot pokvarjen zapis: nekaterih orodij, ki sem jih obravnaval v tem članku, ni enostavno nastaviti, še posebej, če niste prijazni do npm ekosistema . Toda preden se počutite ogabni in obrnete obraz, mi povejte: ali je bil CSS enostaven, ko ste bili prvi učenje to? Se je bilo enostavno naučiti centrirati div, obvladati nihanje razpoloženja plovkov in podobno? Podobno imajo orodja, ki sem jih opisal tukaj, nekaj krivulje učenja, vendar so vredna tega.

Iskreno, ko začnete z rezultati, se boste brcali, da tega ne storite prej. In ne razumemo pomena modularnega, vitkega in dobro organiziranega CSS-ja!

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