Mikä on paras CSS-esiprosessori?

CSS-esiprosessorit: Pikalinkit

Sass
Vähemmän
Neula
PostCSS
Pleeease
CSS-murskaus
Puutarha
Tyylin osat

Markkinoilla on useita CSS-esiprosessoreita. Olet todennäköisesti kuullut Lessista ja Sassista (jos ei, katso artikkeli aiheesta mikä on Sass? ), mutta on olemassa useita muita vaihtoehtoja, jotka sopivat paremmin tarpeisiisi. Tässä tarkastelemme tarkemmin kaikkia erilaisia ​​esiprosessoreita ympäriinsä sekä kunkin hyviä ja huonoja puolia. Käytä oikealla olevia pikalinkkejä siirtyäksesi tiettyyn osioon.

Ensin varoituksen sana. Vuonna 2007 Jon Christopher kirjoitti blogikirjoituksen nimeltä Älä käytä CSS-kehyksiä , ja monet hänen kommentistaan ​​pitävät paikkansa tänään. 'Suuri ongelma kehyksissä on, kun uudet kehittäjät kiinnittyvät kehykseen eikä itse koodiin. Tässä tapauksessa saatu tieto ympäröi tiettyä kehystä, mikä rajoittaa kehittäjää vakavasti. ' Vaikka esiprosessorit voivat epäilemättä helpottaa elämääsi, on aina olemassa vaara, että kehykseen luottaminen vähentää ymmärrystäsi alla olevasta ydinkielestä.



01. Sass

'Sass on maailman kypsin, vakain ja tehokkain CSS-laajennuskieli.' Se tulee valmistajilta, mutta sitä on melko vaikea kiistää. Yli 11 vuoden ajan Sassin takana oleva tiimi on työskennellyt ahkerasti esiprosessorin rakentamiseksi, joka on monipuolinen, jolla on suuri yhteisö, joka tukee ja kehittää sitä ja sen käyttäjiä, ja joidenkin alan suurimpien nimien on omaksunut. Se tarjoaa ylivoimaisesti eniten sitoutunutta yhteisöä, jossa on foorumeita, omistettuja sivustoja ja opetusohjelmia kaikilla tärkeimmillä koodin opetusalustoilla - tutustu Sass Way erityisesti.

Sass on rakennettu Rubyn päälle ja tarjoaa kaksi erilaista syntaksityyppiä käyttäjän mieltymysten mukaan. Sass ei käytä aaltosulkeita valitsinten tai puolipisteiden ympärillä sääntöjen lopussa, mutta ominaisuus on identtinen SCSS: n (Sassy CSS) kanssa, joka kuitenkin käyttää molempia.

SCSS on yleisin kielivalinta lähinnä siksi, että se ei eroa syntaktisesti tavallisesta CSS: stä, mikä tekee perusperiaatteiden käyttöönotosta todella helppoa. Lisäksi jokaisella päätehtävällä on moduuli käytettäväksi Sassin kanssa.

Sass-esikääntäjällä on LibSass-niminen C / C ++ -portti, joka irrottaa Sassin Rubysta. Se on nopea, kannettava ja helppo rakentaa, ja se integroituu useisiin alustoihin ja kieliin.

kuinka olla digitaalinen taiteilija

Plussat

  • Pienin este pääsylle - voit hyödyntää joitakin tehokkaimmista ominaisuuksista yksinkertaisesti oppimalla pari uutta symbolia
  • Uusilla yhteistyökumppaneilla ei pitäisi olla vaikeuksia noutaa sitä.
  • LibSass (joka erottaa Sassin Rubysta) on nopea, kannettava ja helppo rakentaa
  • Ylivoimaisesti eniten sitoutunut yhteisö, runsaalla tuella ja resursseilla

Haittoja

  • Kuten kaikissa puitteissa, on olemassa vaara, että luotat tähän lähestymistapaan et ymmärrä täysin taustalla olevaa kieltä

02. Vähemmän

Less on tyyliltään hyvin samanlainen kuin Sass sen ominaisuuksissa, joten kaikki, jotka ovat käyttäneet yhtä, tuntevat olonsa kotoisaksi toisen kanssa. Sen suosio sai suuren vauhdin, kun sitä käytettiin lähdekoodissa Twitter Bootstrap. Sittemmin se on siirtynyt Sassille Bootstrap 5: ssä, mutta se on antanut monille ihmisille mukavuuden käyttää sen syntaksia.

Se, että se on niin samanlainen kuin Sass, vaikeuttaa puolustamista, kun Sassia käytetään laajemmin, aktiivisemmin ja monipuolisemmin - tämä ominaisuus todellakin vertaisi kahta (kuten monet ovat aikaisemmin), jos eroja ja ainutlaatuista myyntiä olisi enemmän pistettä vähemmän. Se on kuitenkin edelleen suosittu ja vahva esiprosessori.

Plussat

  • Kirjoitettu JavaScript-muodossa, mikä tekee asennuksesta helppoa
  • GUI-sovellukset voivat katsella ja kääntää koodia puolestasi (Crunch, SimpLESS, WinLess, Koala, CodeKit, LiveReload tai Prepros)
  • Erittäin yksityiskohtainen dokumentaatio ja erittäin aktiivinen yhteisö
  • Helppo löytää apua tai aiempia esimerkkejä
  • IDE: t, kuten VS Code, Visual Studio ja WebStorm, tukevat vähemmän joko alkuperäisesti tai laajennusten kautta

Haittoja

  • Käyttää @ ilmoittaa muuttujat, mutta CSS: ssä, @ on jo merkitys (sitä käytetään julistamaan @puoli kyselyt ja @ avainkehykset ), joka voi aiheuttaa sekaannusta
  • Aika saattaa kulua paremmin Sassin oppimiseen laajemman käytön vuoksi
  • Luottaa kokonaan sekoituksiin sen sijaan, että annat sinun käyttää toimintoja, jotka voivat palauttaa arvon, mikä voi johtaa hieman rajoitettuihin käyttötapauksiin

03. Neula

Kynän loi TJ Holowaychuk - entinen Node.js: n ohjelmoija ja Luna-kielen luoja. Sen alkuperäiseen suunnitteluun vaikutti Sass and Less, mutta se tarjoaa laajemman valikoiman ominaisuuksia, huippunopean Node.js-järjestelmän konepellin alla ja antaa käyttäjille eniten vapautta CSS: n kirjoittamisessa.

Tällä vapaudella on kuitenkin haittapuoli. Kuten Declan de Wet sanoo: 'Se ei tarjoa kehittäjälle mitään lopullista suuntaa ... kun olet juurtunut muuttujiin, sekoituksiin ja toimintoihin, jotka eivät vaadi ennalta annettua dollarin merkkiä ( $ ) tai ”at” -symboli ( @ ), huomaat pian, että et voi enää erottaa toisistaan. Tämä tekee hyvin sekavasta koodista ”.

Mozilla käytti Stylusta kehittäjäverkostonsa uudistamiseen, ja se tarjoaa suurimman osan Sass-osiossa käsiteltävistä, mutta muutamalla pienellä erolla syntaksissa.

Plussat

  • Erittäin voimakas sisäänrakennetut toiminnot
  • Voi tehdä paljon enemmän laskentaa ja 'raskasta nostamista' tyylisi sisällä
  • Kirjoitettu Node.js: ssä, joka on nopea ja sopii siististi vuoden 2018 JavaScript-pinoon
  • 'Pythonic' -syntaksi näyttää paljon puhtaammalta ja vaatii vähemmän merkkejä

Haittoja

  • Liian anteeksiantava, mikä voi johtaa hämmennykseen
  • Ei tunnu olevan kovin aktiivisessa kehityksessä

04. PostCSS

Lähestymistavansa perusteella PostCSS on yksi suurimmista vaihtoehdoista Sass, Less ja Stylus -käsittelyyn esikäsittelyssä: se hyödyntää modulaarista laajennusjärjestelmää, jonka avulla käyttäjä voi mukauttaa ominaisuuksiensa ja kokoelmansa niin paljon kuin haluavat. Tämä tarkoittaa, että sen sijaan, että ottaisit käyttöön vain kirjaston kokonaisuudessaan, sinun on valittava mistä se koostuu.

Toisin kuin monet muut esiprosessorit, PostCSS ei tee oletuksia käyttämistäsi ominaisuuksista tai pinosta. Sen sijaan sinun tarvitsee vain lisätä haluamasi laajennukset niiden ominaisuuksien perusteella, joita haluat käyttää. Voit lisätä laajennuksia saadaksesi sille täsmälleen samat ominaisuudet kuin Sassin kaltaiselle kirjastolle. Tämä modulaarinen lähestymistapa tarkoittaa, että voit jopa käyttää laajennuksia täysin itse, kuten automaattinen etuliite ja pienentäminen, sen sijaan, että rakennat täyden kirjaston.

fonttien lisääminen photoshop cs2: een

Plussat

  • Ajattelematon, modulaarinen lähestymistapa - voidaan räätälöidä voimakkaasti
  • Kirjoitettu puhtaana CSS: nä, joten kehittäjien ei tarvitse oppia uutta syntaksia
  • Nopeus (jos käytät vain muutamia laajennuksia)

Haittoja

  • Nopeus (jälleen) - Jos matkitaan toista asetusta, PostCCS: ltä puuttuu suorituskykyetu, jonka tarjoaa oma, optimoitu työkalu
  • Yleensä enemmän vaivaa asennukseen ja ylläpitoon kuin perinteinen esiprosessori, koska luotat erilaisiin laajennuksiin, joita ylläpitävät eri ihmiset

05. Pleeease

Pleeease käyttää hieman erilaista lähestymistapaa esikäsittelyyn siinä mielessä, että se yrittää ratkaista joitain käytännön asioita CSS: llä sen sijaan, että keskityttäisi puhtaasti sen syntaksiin tai asetteluun. Sen verkkosivusto selittää: “Node.js-sovellus, joka voi helposti käsitellä CSS: ääsi. Se yksinkertaistaa esiprosessoreiden käyttöä ja yhdistää ne parhaisiin jälkikäsittelijöihin. Se auttaa luomaan puhtaita tyylitaulukoita, tukee vanhempia selaimia ja tarjoaa paremman ylläpidettävyyden.

Pleeease tarjoaa vanhempien selainten tavallisten ongelmien varalleen paketit, mukaan lukien pikselivaroitukset, kun valitset mittaukseksi remmejä, ja IE8: n suodattimen palautukset peittävyyttä käytettäessä.

Siinä on jopa ominaisuus, jonka avulla voit käyttää suosikkiesiprosessorisi, kuten Sass tai Less, syntaksia Pleeeasen asetuksissa (samoin kuin puhdasta CSS: ää), vaikka tämä on tässä vaiheessa kokeellista.

Plussat

  • Sisäänrakennettu automaattinen etuliite lisää toimittajan etuliitteet käyttäen tietoja kohteesta caniuse.com
  • Luo lähdekartat, joissa näet alkuperäisen koodin
  • Työkalu eikä syntaksikirjasto, joten voit käyttää sitä puhtaan CSS: n tai toisen esiprosessorin kanssa
  • Selkeä, käytännöllinen käyttö vanhempien selainhahmojen käsittelemiseen

Haittoja

  • Ei kovin tunnettu, mikä voi vaikeuttaa resurssien löytämistä
  • Ominaisuus, joka sallii muiden esiprosessorien sisällyttämisen, on täysin kokeellinen tässä vaiheessa

06. CSS-murskaus

CSS-Crush on standardien innoittama esiprosessori, joka on suunniteltu mahdollistamaan moderni ja häiriöttömä CSS-työnkulku. Se on kirjoitettu PHP: ssä ja siinä on yhdistelmä vakio-ominaisuuksia, joita voit odottaa yhdessä suosituimmista esiprosessoreista (muuttujat, pesintä, miksaukset), sekä joitain käsittelemiämme työkalupohjaisempia lähestymistapoja, kuten Pleeease (toimittajan etuliite, pienentäminen ).

CSS-Crushin PHP-tausta tarkoittaa, että sitä voidaan käyttää siististi yhdessä suosittujen PHP-sisällönhallintajärjestelmien, kuten WordPressin tai Drupalin, kanssa. Tämä on luultavasti sen suurin ammattilainen, koska jos olet vain rajoittunut siihen, mitä voit tehdä CMS: ssä, voit asentaa sen laajennuksena ja hyötyä silti esiprosessorin saamisen eduista.

Yksi bonus on, että sen toimittajan etuliitteet ominaisuuksille, toiminnoille, @ -säännöt ja jopa täydelliset ilmoitukset luodaan automaattisesti. Tämä tarkoittaa, että voit ylläpitää selainten välistä tukea pitäen lähdekoodisi puhtaana.

Plussat

  • Siisti integraatio suosittujen PHP CMS: ien (WordPress, Drupal jne.) Kanssa
  • Avoin lähdekoodi, joten voit teoriassa korjata omat ongelmasi
  • Käytettävissä on hyödyllisiä laajennuksia, kuten työskentely ariaroolien ja HTML-kankaan kanssa
  • Sisäänrakennettu automaattinen esikorjaus eri selaintyyleille

Haittoja

  • Laajasta ominaisuuksista huolimatta sillä ei ole suosiota tavallisen PHP-ohjelmointiyhteisön ulkopuolella
  • Huollon puute (kirjoitushetkellä)

07. Puutarha

Tämä vaihtoehto on täysin erilainen kuin kaikki muut, koska se melkein kumoaa perinteisen CSS-kielen sellaisena kuin me sen tunnemme. Garden on kirjasto CSS: n renderoimiseksi Clojuressa ja ClojureScriptissä. Se käyttää vektoreita sääntöjen esittämiseen ja karttoja ilmoitusten esittämiseen. Se on suunniteltu 'tyylitaulukon kirjoittajille, jotka ovat kiinnostuneita siitä, mikä on mahdollista, kun vaihdat esiprosessorin ohjelmointikieleksi'.

Mitä ohjelmointikieliin tulee, Clojure tunnetaan puhtaasta arkkitehtuuristaan ​​ja kiinteästä perinnöstään. CSS: lle tämä voi tarkoittaa suurta voimaa. Syntaksi voi kuitenkin olla pelottava. Esimerkiksi, jos ei aseteta fontin painoa h1 ja h2 tunnisteita, käytät: käyttäjä => (css [: h1: h2 {: font-weight 'none'}]) .

Plussat

  • Pääsy tehokkaan ohjelmointikielen perusominaisuuksiin Clojuressa
  • Ainutlaatuinen mahdollisuus koodata projekti kokonaan samalla kielellä: Clojure backend-ohjelmointiin ja Garden CSS: lle
  • Garden Gnome -laajennuksen avulla voit vaihtaa tyylimuutoksia suoraan selaimeen lataamatta sitä uudelleen

Haittoja

  • Et voi yksinkertaisesti kopioida ja liittää CSS: ää muualta työhösi - jokainen katkelma on muunnettava oikeaan muotoon
  • Hyvin erilainen syntaksi tavalliseen CSS: ään tai muuhun esiprosessoriin, mikä vaikeuttaa lukemista
  • Gardenin oppimiskäyrä on jyrkempi kuin muut vaihtoehdot

08. Tyylitetyt komponentit

paras tapa MacBook Pro 15 -verkkokalvolle

Tämä viimeinen vaihtoehto on pivot perinteisistä esiprosessoreista. Nostan sen vain tässä yhteydessä, koska se on tapa kirjoittaa tyylisi tietyllä tavalla ja asettelulla ja saada se muuntamaan komponenttilogiikkasi ohella selainvalmiiksi CSS: ksi. Tässä käsitellään vain perusasiat ja sen tyylinkäsittely.

Styled Components on ”CSS-in-JS CSS folkille”, kuten Glen Maddern sanoi. Se on viimeisin yritys tehdä todella modulaarinen CSS punomalla se kirjoittamiin JS-komponentteihin. Sillä on suuri etu reagoivaan tyyliin verrattuna, koska sinun ei tarvitse kamelistaa attribuuttejasi, ja ilmoitat jokaisen tyylilohkon suoraan sen elementin nimelle, jossa käytät sitä.

Joten esimerkiksi luoda otsikkokomponentti, joka tekee a

merkitse joitain tyylejä, kirjoitat tämän:

const Title = styled.h1` font-size: 1.5em; text-align: center; color: palevioletred; `;

Plussat

  • Voit saavuttaa komponenttien täydellisen kapseloinnin - jokaisen merkinnän, logiikan, suuren seuraajan sekä aktiivisen yhteisön ja projektin omistajan
  • Edustaa kiehtovaa suunnanmuutosta
  • Vain liitteenä olevien tyylien estäminen. Mitä ovat vain liitteenä olevat tyylit?

Haittoja



  • Olet taas kirjoittamassa tavallista CSS: ää, jolla on haittoja
  • Melko mielipide, koska se on rakennettu toimimaan yksinomaan React JS -kirjaston kanssa
  • Sinun on käsiteltävä selainten välisiä ongelmia ja varautumisia muilla menetelmillä

Tämä artikkeli julkaistiin alun perin luovassa verkkosuunnittelulehdessä Web Designer. Osta numero 276 tai tilaa .

Lue lisää: