Topp 5 CSS verkfæri fyrir vefur verktaki og hönnuðir

CSS er langt komið en tækjabúnaðurinn í kringum það hefur ekki fyrr en nú.


Ef þér finnst að skrifa CSS sé eins og að berjast við skrímsli í tjörugryfju, þá ertu ekki einn. Þó að CSS sé ein grundvallartækni sem knýr vefinn er það ekki rétt forritunarmál eða umgjörð í sjálfu sér. Þar af leiðandi, um leið og verkefnið þitt byrjar að verða meira áberandi, þá gerir óreiðan líka – reglurnar um valið virðast vera alls staðar og það er erfitt að finna hvaðan er; þegar þú setur letur, utanaðkomandi CSS, JS og aðrar eignir á síðurnar þínar virðist lokastærð búntins vaxa úr böndunum og þú veltir fyrir þér hvar hugsjónirnar um skjótan, notendavæna framhlið týndu sér..

En það þarf ekki að vera svona. Í dag hefur verkfærið í kringum CSS þróast upp að því marki að ekki er hægt að temja vinnuflæðið heldur gera það skemmtilegt líka. Í þessari grein ætla ég að tala um fimm slík CSS verkfæri sem mér hefur fundist ómæld gildi í starfi mínu. Ég hef meðvitað forðast það, þar á meðal „leikfangatæki“ eins og CSS rafala, matseðill rafala o.s.frv., Vegna þess að þeir skapa fleiri vandamál en þeir leysa.

CSS lestin er að koma! Förum! �� ��

PostCSS

Ef þú elskar JavaScript, myndirðu elska hugmyndina sem við getum núna bætt við og stjórnað CSS með JavaScript. Og það er einmitt hæfileikinn sem PostCSS veitir.

En það er eingöngu ekki bara JavaScript-undirstaða setningasykur yfir CSS. PostCSS pakkar saman nokkrum öflugum pakka / eiginleikum, sem leiðir til mun skemmtilegra og auðveldara verkflæðis þegar verið er að takast á við CSS. Til dæmis:

  • Forskeytum söluaðila bætist sjálfkrafa út frá því hvaða eign þú notar.
  • Hæfni til að greina hvaða CSS aðgerðir er hægt að nota í núverandi vafra.
  • Með því að nota væntanlegar, en enn ekki komnar, en mjög öflugar setningafræði uppfærslur á CSS.
  • Móttækilegt rist sem er eins sveigjanlegt og það verður.

Ég held að ég muni ekki gera PostCSS réttlæti ef ég er ekki með töflureikninn. Svo hér förum við. Eitthvað eins einfalt og þetta:

div {
glataður dálkur: 1/3
}

verður breytt í fullan blæ á CSS kerfi þar sem næstum öll brún tilvik eru gætt:

div {
breidd: reiknað (99,9% * 1/3 –
(30px – 30px * 1/3));
}
div: nth-child (1n) {
fljóta: vinstri;
framlegð til hægri: 30px;
skýr: enginn;
}
div: síðast-barn {
framlegð til hægri: 0;
}
div: nth-barn (3n) {
framlegð til hægri: 0;
fljóta: rétt;
}
div: nth-barn (3n + 1) {
skýr: bæði;
}

Þar sem það er JS-drifið er PostCSS ekki nákvæmlega auðvelt að setja upp, sérstaklega ef þú ert hönnuður og hefur ekki mikið að gera með einingar, búntara og npm heiminn almennt. Sem sagt, möguleikar PostCSS í starfi þínu eru gríðarlegir og ætti ekki að gleymast.

HreinsunCSS

Elskarðu hið nútíma verkflæði sem byggir á framhliðinni en ert svekktur að þeir koma með of mikið af farangri? Ef já, PurgeCSS er vinur þinn, að minnsta kosti að því marki sem CSS er talið.

Fyrir þá sem kunna ekki að vita hvað skiptir máli: hér er fljótt að finna. Þegar þú smíðar stök forrit með því að nota framhlið ramma eins og React, Angular, Vue osfrv., Ferðu í gegnum það sem kallað er „build process.“ Í meginatriðum kóða þú alla CSS, JS, SASS osfrv. Í aðskildar skrár (skipuleggur þær eins og þér finnst mest leiðandi), en þegar þú ert búinn, segirðu búntaranum að “byggja” hlutinn. Það sem þetta gerir er að lesa allan kóðann sem þú hefur skrifað, nota ýmsar síur á hann (minification, obfuscation / uglification, o.s.frv.) Og spýta framleiðslunni út í stakar skrár, venjulega „app.js“ fyrir allt JavaScript og „App.css“ fyrir alla CSS. Þessar skrár, ásamt horu „index.html,“ er allt sem þú þarft til að keyra framhlið forritsins. Gallinn er sá að þar sem allt er innifalið í þessum lokaskrám þá nær stærð þeirra oft út fyrir það sem leyfilegt er fyrir skjótan viðbragðstíma; til dæmis er ekki óalgengt að sjá „app.js“ sem er yfir 500 KB!

PurgeCSS bætist við sem hluti af vinnuflæðinu þínu og kemur í veg fyrir að ónotað CSS sé sett saman í lokaútganginn. Dæmigerð notkunarmál er Bootstrap: það er meðalstórt bókasafn með nokkrum UI-flokkum fyrir mismunandi hluti. Ef umsókn þín notar, segjum til dæmis, 10% af flokkum Bootstrap, eru afgangurinn 90% eina uppskeran í loka CSS skránni þinni. En þökk sé PurgeCSS er hægt að bera kennsl á og nota svo ónotaðar CSS skrár og koma í veg fyrir það í smíðaferlinu sem leiðir til mun minni endanlegrar CSS skrár (5-6 sinnum stærð minnkun er frekar eðlilegt).

Svo, haltu áfram, “hreinsaðu” óþarfa CSS með HreinsunCSS! ��

Sjóvindur

Sjóvindur er CSS ramma, en það gengur svo mikið gegn korninu að ég hélt að ég myndi taka það hér inn meðal CSS tækja. Ef þú hatar inline CSS (hver gerir það ekki ?!), þá mun Tailwind líklega valda því að þú hrökklast aftur af hryllingi í fyrsta skipti sem þú lendir í því. Við skulum fá fyrsta smekkinn með því að skoða hvernig þú getur kóða dæmigert form með Tailwind CSS:

Notandanafn

Lykilorð

Vinsamlegast veldu lykilorð.

Skráðu þig inn


Gleymt lykilorð?

© 2019 Acme Corp. Öll réttindi áskilin.

„Er þetta brandari eða hvað ?! Hvað eru allir þessir pirrandi litlu flokkar? Við nánari skoðun, af hverju í fjandanum er ég að setja framlegð, padding og lita beint ásamt HTML? Er þetta 2019 eða hvað? “

Búist er við hugsunum sem þessum. Ég veit af því að mér leið eins og lokaði lokinu strax á Tailwind. Það var aðeins fyrr en seinna sem ég rakst á podcast þar sem gesturinn hafði gert upp töff, viðeigandi stærð vefsíðu í Tailwind sem ég fór að taka eftir.

Íhugaðu þessar spurningar áður en við förum lengra:

  • Ertu þreyttur á að leggja á minnið staðlaða rammatíma og aðgerðir þeirra svo þú getir sérsniðið hönnun þína eftir þinni smekk Gott dæmi er að breyta útliti og hegðun Bootstrap stýrihnappsins.
  • Heldurðu að vinsæl umgjörð eins og Bootstrap séu of mikil og reyni að gera miklu meira en þau ættu að gera?
  • Finnst þér þú blanda saman ramma vegna þess að þú vilt hafa það besta í öllum heimunum?
  • Finnst þér gaman að hafa meiri stjórn á hönnuninni þinni og finnst vanillu CSS reynslan yfirþyrmandi?

Ef svarið við einhverju af þessu er „já“ þarftu Tailwind illa. Skoðum nú hvað Tailwind er og hvað það gerir.

Tailwind er það sem kallast gagnsemi-fyrsta CSS, sem er frábrugðið því sem við gerum í daglegu verkferli okkar: merkingartækni CSS. Munurinn á merkingartækni CSS og gagnsemi CSS er sá að sá fyrrnefndi reynir að flokka stílþætti með nafni sjónrænu hlutanna sem birtast á síðunni. Svo ef þú ert með siglingavalmynd, kort, hringekju o.s.frv. Á síðu, væri merkingartækni til að gera hlutina að flokka reglur um CSS-stíl undir flokka eins og .nav, .card, .carousel osfrv., Sem undirkafla þeirra merktir í samræmi við það (til dæmis. kort-líkami,. kort-fót, osfrv.). Þetta er langalgengasta aðferðin við CSS og við þekkjum öll hana í gegnum ramma eins og Bootstrap, Foundation, Bulma, UI Kit osfrv..

Aftur á móti mun „gagnsemis“ stíllinn til að skrifa CSS nafna flokka nákvæmlega í samræmi við hlutverk þeirra: flokkur sem stjórnar spássíu fyrir efstu og neðri hliðar verður nefndur .margin-y-medium og hægt er að nota hann hvar sem er í HTML álagning þar sem þörf er á þessari framlegð. Þó að þetta kynni eitthvað af bekknum heiti skríða (kíkið aðeins á kóðann sem ég deildi áðan eða á skjámyndinni – svo margir flokkar!), Þá er ætlunin með CSS glær: þú þarft ekki að hoppa fram og til baka meðal skjalanna, CSS og HTML til að reikna út rétt nöfn og rétt áhrif.

Þetta er mjög frelsandi leið til að vinna, en það er líka afli: þú þarft að hafa grunnatriðin þín á CSS á sínum stað (þar á meðal nútíma hugtök eins og Flexbox). Það er vegna þess að Tailwind býður upp á enga stíl utan kassa fyrir neina hluti á síðunni þinni og það er undir þér komið að búa til stíl úr gefnum byggingarreitum. Annað vandamál er uppsetningin: Tailwind gerir þér kleift að flokka nokkra CSS flokka saman í það sem kallað er íhlutir, en það er gert með JavaScript og þarfnast einingarhleðslutæki og búntara eins og Webpack.

Að öllu sögðu gert, Tailwind er pólariserandi, sláandi ný leið til að stunda stíl og mun höfða til þeirra sem þrá eftir meiri einfaldleika og stjórnun.

Saas

Samt Sass hefur verið til í langan tíma, ég hef tekið það með hér vegna þess að verktaki veit enn ekki hversu gagnlegur það er. Stylistically Awesome Style Sheets (eða SASS) er yfirborð CSS sem var þróað til að temja brjálæðið sem læðist í verkefnið þegar CSS vex umfram nokkrar línur.

Taktu mynd af þessu: þú ert kominn langt með að skrifa CSS fyrir verkefnið þitt. Þú ert að nota nokkra liti, hefur reiknað út skynsamleg framlegð fyrir ýmsar deildir, leturstíla og svo framvegis. Nema að nú gerðu þér grein fyrir að það hangir ekki allt saman vel. Kannski viltu prófa stærri framlegð fyrir alla hluta, kort og hnappa. Jæja, hvað nú? Jafnvel hugmyndin um að þurfa að leita að skipta um risastóra CSS skjal er nóg til að gefa einn höfuðverk. Við höfum öll gert það og við vitum öll hversu skaðleg villa er. Sass leysir þetta vandamál með því að kynna breytur:

Þegar við skrifum HTML verpum við þætti í öðrum þáttum. En þegar við erum að skrifa CSS verðum við að skrifa flatt stigveldi reglna, sem gerir það erfitt að andlega “passa” CSS á HTML. Með Sass er hægt að líkja eftir uppbyggingu síðunnar í stílskrám þínum:

Allt þetta byrjar ekki einu sinni að klóra yfirborðið af dágóðunum sem Sass býður upp á: mát hönnun, fela í sér skrár, blanda, arf. . . listinn heldur áfram og áfram. Jú, þú þarft að læra Sass vinnuflæði og setja það inn í þitt, en að mínu mati, að nokkrar klukkustundir sem þú hefur eytt er fjárfesting sem mun borga þér aftur og aftur!

CSS Linters

Þar sem vefhönnuðir (og hönnuðir HÍ – þó ég velti því fyrir mér hvernig þessi tvö hugtök eru mismunandi ��) nota einfaldar ritstjórar – eða eins og staðan er þessa dagana, kóða beint frá Chrome dev verkfærunum – fá þeir sjaldan að heyra um eða njóta góðs af sjór. Aftur á móti þekkja forritarar sem nota góða ritstjóra eins og VS kóða, Sublime Text eða aðra hugmyndaeiningar þetta verkfæri mjög vel þar sem það er annar eðli þeirra. Engu að síður, málið er að ef þú ert einn af þessum CSS forriturum sem drukknar í sóðalegu CSS gætirðu notið góðs af ljóma.

Einfaldlega sagt, linter er forrit sem athugar kóðann þinn á villum og ósamræmi. Það gerir þetta með hjálp reglna sem það hefur til að reikna út hvað er rangt og hvað er ósamræmi. Góðir lanter sameinast IDEs og kóða ritstjóra og hægt er að stilla hann til að keyra í hvert skipti sem þú vistar frumskrána. Þeir hjálpa þér einnig við forskoðun á litum, villur og sjálfvirka útfyllingu þegar þú ert að semja CSS skrárnar þínar:

En hér er besti hlutinn – ef þú fylgir tiltekinni CSS-hönnun og sniði geturðu fínstillt lennuna til ánægju. Þetta tryggir að CSS innan verkefnis fylgi sömu stílleiðbeiningum (einnig er hægt að stilla lendarinn til að sjálfkrafa forsníða skrána í hverri vista / framkvæma frumkóðann). Svo hvort sem þú ert að vinna í teymi eða einn, þá er sængur alltaf frábær viðbót við verkefnavinnuna þína.

Niðurstaða

Ég er viss um það núna, þú ert sannfærður um að nútíma CSS þróun er langt í burtu frá smalamennsku nálgun fortíðarinnar. ��

Sem sagt, ég skal viðurkenna eitthvað aftur, jafnvel þó að ég hljómi eins og brotin skrá: sum tækin sem ég hef fjallað um í þessari grein er ekki auðvelt að setja upp, sérstaklega ef þú ert ekki á vinsamlegum nótum við vistkerfið npm . En áður en þér finnst ógeð og snúa andliti þínu frá skaltu segja mér þetta: var auðvelt með CSS þegar þú varst fyrst nám það? Var það auðvelt að læra að miðja div, að ná tökum á skapsveiflum fljóta o.s.frv.? Á sama hátt hafa verkfærin sem ég lýsti hér einhverjum námsferli en þau eru vel þess virði.

Heiðarlega, þegar þú hefur byrjað að upplifa árangurinn þá sparkarðu í sjálfan þig fyrir að gera það ekki fyrr. Við skulum ekki skilja mikilvægi CSS sem er mát, grannur og vel skipulagður!

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