5 mjetet kryesore në CSS për Zhvilluesit e Internetit dhe Designers

CSS i është dashur një kohë e gjatë, por mjetet rreth saj nuk kanë deri më tani.


Nëse mendoni se të shkruani CSS është si të luftoni monstra në një gropë katrani, nuk jeni vetëm. Ndërsa CSS është një nga teknologjitë më themelore që krijon Ueb, ai nuk është një gjuhë apo kornizë e duhur programimi vetvetiu. Si rezultat, sapo projekti juaj të fillojë të rritet më shumë i spikatur, kështu ndodh edhe rrëmuja – rregullat e zgjedhësit duket se janë në të gjithë vendin, dhe është e vështirë të gjesh çfarë është ku; pasi përfshini fonte, CSS të jashtme, JS dhe pasuri të tjera në faqet tuaja, madhësia përfundimtare e paketës duket se do të rritet nga dora, dhe ju pyes veten se ku u humbën idealet e përparme të shpejtë, miqësore ndaj përdoruesve..

Por nuk duhet të jetë kështu. Sot, përpunimi i mjeteve rreth CSS ka evoluar në atë nivel që fluksi i punës jo vetëm që mund të zbutet, por të bëhet i këndshëm gjithashtu. Në këtë artikull, unë do të flas për pesë mjete të tilla CSS që kam gjetur me vlerë të jashtëzakonshme në punën time. Unë kam shmangur me vetëdije, duke përfshirë mjetet “lodër” si gjeneratorët CSS, gjeneratorët e menusë, etj., Sepse ato krijojnë më shumë probleme sesa zgjidhin.

Treni CSS po vjen! Shkojme! �� ��

PostCSS

Nëse e doni JavaScript, ju e doni idenë që ne tani mund të shtojmë dhe kontrollojmë CSS përmes JavaScript. Dhe kjo është saktësisht aftësia që PostCSS siguron.

Sidoqoftë, nuk është thjesht sheqer sintaksë me bazë JavaScript mbi CSS. PostCSS përmbledh disa paketa / karakteristika të fuqishme së bashku, duke rezultuar në një rrjedhë pune shumë më të këndshme dhe më të lehtë kur merren me CSS. Për shembull:

  • Parashtesat e shitësit shtohen automatikisht bazuar në cilën pronë që po përdorni.
  • Mundësia për të zbuluar se cilat veçori CSS mund të përdoren në shfletuesin aktual.
  • Duke përdorur azhurnimet e ardhshme, por ende për tu lëshuar, por shumë të fuqishme sintaksore në CSS.
  • Një rrjet i përgjegjshëm që është po aq fleksibël sa merr.

Unë mendoj se nuk do të bëj drejtësi ndaj PostCSS nëse nuk e përfshij shembullin e rrjetit. Kështu që këtu shkojmë. Diçka kaq e thjeshtë sa kjo:

div {
kolona e humbur: 1/3
}

shndërrohet në një sistem të plotë në lulëzim CSS me pothuajse të gjitha rastet e kujdesit që kujdesen për:

div {
gjerësia: llogari (99.9% * 1/3 –
(30px – 30px * 1/3));
}
div: nth-child (1n)
noton: majtas;
diferenca e djathtë: 30px;
e qartë: asnjë;
}
div: fëmija i fundit {
diferenca e djathtë: 0;
}
div: nth-child (3n)
diferenca e djathtë: 0;
noton: drejt;
}
div: nth-child (3n + 1) {
qartë: të dy;
}

Meqenëse është një gjë e drejtuar nga JS, PostCSS nuk është saktësisht e lehtë për tu vendosur, veçanërisht nëse jeni një projektues dhe nuk keni pasur shumë të bëjnë me modulet, bundlerët dhe botën npm në përgjithësi. Thënë kështu, mundësia për PostCSS në punën tuaj është masive dhe nuk duhet të anashkalohet.

PurgeCSS

A e doni fluksin e punës moderne, të bazuar në kornizë, por janë të irrituar që sjellin shumë bagazhe? Nëse po, PurgeCSS është shoku juaj, të paktën për sa i përket CSS-së.

Për ata që nuk mund ta dinë se çfarë është puna e madhe: këtu është një përmbledhje e shpejtë. Kur ndërtoni aplikacione me faqe të vetme duke përdorur kornizat e përparme si React, Angular, Vue, etj., Ju kaloni në atë që quhet “proces i ndërtimit”. Në thelb, ju i kodoni të gjitha CSS, JS, SASS, etj., Në skedarë të veçantë (duke i organizuar ashtu siç i shihni më intuitiv), por pasi të keni përfunduar, ju i thoni bundlerit që të “ndërtojë” sendin. Thisfarë bën kjo është të lexoni të gjithë kodin burimor që keni shkruar, të aplikoni filtra të ndryshëm në të (minifikim, mbërthim / uglifikim, etj.), Dhe të nxirrni rezultatin në skedarë të vetëm, zakonisht “app.js” për të gjithë JavaScript, dhe “App.css” për të gjithë CSS. Këto skedarë, së bashku me një “indeks.html” të dobët, është gjithçka që ju nevojitet për të ekzekutuar pjesën e përparme të aplikacionit. Dobësi është se pasi që gjithçka përfshihet në këto skedarë përfundimtarë, madhësia e tyre shpesh shtrihet përtej asaj që lejohet për kohën e shpejtë të përgjigjes; për shembull, nuk është e pazakontë të shohësh një “app.js” që është mbi 500 KB!

PurgeCSS shtohet si pjesë e rrjedhës suaj të punës dhe nuk lejon që CSS të papërdorura të futet në rezultatin përfundimtar. Një rast tipik i përdorimit është Bootstrap: është një bibliotekë e mesme me disa klasa UI për komponentë të ndryshëm. Nëse aplikacioni juaj përdor, të themi, 10% të klasave të Bootstrap, pjesa tjetër 90% janë fryma e vetme në skedarin tuaj përfundimtar CSS. Por falë PurgeCSS, skedarë të tillë të papërdorura CSS mund të identifikohen dhe parandalohen nga procesi i ndërtimit, duke rezultuar në skedarë CSS përfundimtarë shumë më të vegjël (zvogëlimi i madhësisë 5-6 herë është mjaft normale).

Pra, shkoni përpara, “pastroni” CSS të panevojshëm me PurgeCSS! ��

Tailwind

Tailwind është një kornizë CSS, por shkon aq shumë kundër grurit sa mendova se do ta përfshija këtu midis mjeteve CSS. Nëse e urreni CSS-në (që nuk e bën ?!), Tailwind ka të ngjarë të bëjë që të tërhiqeni në tmerr herën e parë kur ta hasni. Le të marrim një shije të parë duke parë se si mund të kodoni një formë tipike duke përdorur Tailwind CSS:

Emri i përdoruesit

fjalëkalim

Ju lutemi zgjidhni një fjalëkalim.

Hyni


Keni harruar fjalëkalimin?

© 2019 Acme Corp Të gjitha të drejtat e rezervuara.

“A është kjo shaka apo çfarë ?! Cilat janë ato klasa të vogla të bezdisshme? Pas inspektimit më të afërt, pse dreqin jam duke i vendosur kufijtë, mbushjen dhe ngjyrën direkt me HTML? A është ky 2019 apo çfarë? “

Mendime si këto priten. E di sepse u ndjeva njësoj dhe menjëherë mbylla kapakun në Tailwind. Vetëm deri vonë, unë hasa në një podcast, ku mysafiri kishte ribërë një faqe në internet me modë, me madhësi të mirë në Tailwind, që unë fillova t’i kushtoj vëmendje.

Para se të shkojmë më tej, merrni parasysh këto pyetje:

  • A jeni të lodhur duke mësuar përmendësh klasat e kornizës standarde dhe funksionet e tyre në mënyrë që të mund t’i përshtatni modelet tuaja sipas dëshirës tuaj? Një shembull i mirë është ndryshimi i pamjes dhe sjelljes së shiritit të navigimit Bootstrap.
  • A mendoni se kornizat e njohura si Bootstrap janë të tepërta dhe përpiquni të bëni shumë më tepër sesa duhet?
  • A e gjeni veten duke u përzier kornizat sepse dëshironi më të mirën nga të gjitha botët?
  • A ju pëlqen të keni më shumë kontroll mbi modelet tuaja dhe megjithatë të gjeni përvojën e tepërt të vaniljes CSS?

Nëse përgjigjja për ndonjë nga këto është një “po”, ju duhet Tailwind keq. Tani le të hedhim një vështrim se çfarë është Tailwind dhe çfarë bën.

Bailwind është ajo që quhet një CSS e parë e shërbimeve, e cila ndryshon nga ajo që ne bëjmë në rrjedhën tonë të përditshme të punës: CSS semantike. Dallimi midis CSS-së semantike dhe shërbimeve CSS është se i pari përpiqet të grupojë elementët e stilit me emrin e seksioneve vizuale që shfaqen në faqe. Pra, nëse keni një menu të lundrimit, kartat, karuseli, etj., Në një faqe, mënyra semantike e të bërit të gjërave do të ishte grupimi i rregullave të stilit CSS nën klasa të tilla si .nav, .card, .carousel, etj., Të cilat nën-seksionet e tyre të etiketuara në përputhje me rrethanat (për shembull,. kartë-trup,. kartelë, etj). Kjo është deri tani qasja më e zakonshme për CSS, dhe ne të gjithë jemi njohur me të përmes kornizave si Bootstrap, Foundation, Bulma, UI Kit, etj..

Nga ana tjetër, stili “utility” i të shkruarit të klasave CSS emërton saktësisht sipas funksionit të tyre: një klasë që kontrollon marzhin për anët e sipërme dhe të poshtme do të emërtohet si .margin-y-medium dhe mund të aplikohet kudo në HTML shënimin ku është e nevojshme kjo diferencë. Ndërsa kjo prezanton disi një zvarritje të emrit të klasës (thjesht hidhni një vështrim të shpejtë në kodin që kam ndarë më herët ose në pamjen e ekranit – kaq shumë klasa!), Qëllimi i CSS është i qartë: nuk keni nevojë të hidheni mbrapa dhe me radhë midis dokumentacionit, CSS tuaj dhe HTML tuaj për të gjetur emrat e duhur dhe efektin e duhur.

Shtë një mënyrë shumë e çliruar për të punuar, por ka edhe një kapje: duhet të keni në themel bazat tuaja CSS (përfshirë konceptet moderne si Flexbox). Kjo për faktin se Tailwind nuk ofron stile jashtë kutisë për ndonjë përbërës në faqen tuaj, dhe ju takon juve të ndërtoni stilet nga blloqet e dhëna të ndërtimit. Problemi tjetër është ai i konfigurimit: Tailwind ju lejon të gruponi disa klasa CSS së bashku në ato që quhen komponentë, por kjo është bërë përmes JavaScript dhe kërkon një hamës modul dhe bundler si Webpack.

E thënë të gjitha dhe të bëra, Tailwind është një mënyrë e re polarizuese, e mrekullueshme për të bërë styling, dhe do t’u bëjë thirrje atyre që dëshirojnë për thjeshtësi dhe kontroll më të madh.

saas

megjithëse Sass ka qenë rreth e rrotull për një kohë të gjatë, unë e kam përfshirë këtu sepse zhvilluesit ende nuk e dinë se sa i dobishëm është. Sheets Stilistically Awesome Style (ose SASS) është një superset e CSS që u krijua për të zbutur çmendurinë e zvarritjeve në projekt pasi CSS rritet përtej disa linjave.

Fotografojeni këtë: ju keni një rrugë të gjatë për të shkruar CSS për projektin tuaj. Ju jeni duke përdorur disa ngjyra, keni kuptuar disa diferenca të ndjeshme për diva të ndryshme, stilet e shkronjave, etj. Përveç që tani e kupton se nuk varen të gjithë aq mirë. Ndoshta ju dëshironi të provoni kufijtë më të mëdhenj për të gjitha seksionet, kartat dhe butonat. Epo, tani çfarë? Edhe vetë ideja për të kërkuar-zëvendësuar përmes skedarit tuaj gjigand CSS është e mjaftueshme për të dhënë një dhimbje koke. Ne e kemi bërë të gjithë këtë, dhe të gjithë e dimë se sa është i prirur ndaj gabimit. Sass zgjidh këtë problem duke prezantuar ndryshore:

Kur shkruajmë HTML, ne vendosim elemente brenda elementeve të tjerë. Por kur shkruajmë CSS, duhet të shkruajmë një hierarki të sheshtë të rregullave, gjë që e bën të vështirë “të përshtaten” mendërisht CSS në HTML. Me Sass, ju mund të imitoni strukturën e faqes brenda skedarëve tuaj të stilit:

E gjithë kjo as nuk fillon të gërvishtë sipërfaqen e mirave që ofron Sass: dizajn modular, të përfshijë skedarë, miksina, trashëgimi. . . lista vazhdon dhe vazhdon. Sigurisht, do të duhet të mësoni një rrjedhë pune të përpiluesit të Sass dhe ta përfshini atë në tuajin, por për mendimin tim, që dy orë e kaluar është një investim që do t’ju paguajë pa pushim!

Linjat CSS

Meqenëse projektuesit e uebit (dhe zhvilluesit e UI – edhe pse pyes veten se si janë dy mënyra të ndryshme ��) përdorin redaktorët e teksteve të thjeshta – ose siç ndodh në ditët e sotme, kodoni drejtpërdrejt nga mjetet e devijimit Chrome – ata rrallë merren me të dëgjuar ose përfitojnë nga Linter. Nga ana tjetër, programuesit që përdorin redaktorë të mirë tekstesh si VS Code, Sublime Text ose IDE të tjera e dinë shumë mirë këtë mjet pasi që është natyra e dytë për ta. Sidoqoftë, çështja është, nëse jeni një nga ata zhvilluesit e CSS që mbyten në CSS të çrregullt, mund të përfitoni nga një postues.

Ta themi thjesht, një linter është një program që kontrollon kodin tuaj për gabime dhe mospërputhje. Kjo e bën këtë me ndihmën e një sërë rregullash që ka për të kuptuar se çfarë është e gabuar dhe çfarë është në kundërshtim. Linjat e mira integrohen me IDE dhe redaktorët e kodeve dhe mund të konfigurohen që të funksionojnë sa herë që ruani skedarin burimor. Ata gjithashtu ju ndihmojnë me shikimin e ngjyrave, gabimet dhe përfundimin automatik kur jeni duke kompozuar skedarët tuaj CSS:

Por ja pjesa më e mirë – nëse ndiqni një modelim dhe formatim të veçantë CSS, mund të shkulni mirë për kënaqësinë tuaj. Kjo siguron që CSS brenda një projekti ndjek të njëjtin udhëzues të stilit (linja gjithashtu mund të konfigurohet për të automatizuar formatin e skedarit çdo ruajtje / kryerje të burimit). Pra, pavarësisht nëse jeni duke punuar në një ekip apo vetëm, lidhja është gjithmonë një shtesë e shkëlqyeshme për fluksin e punës së projektit tuaj.

përfundim

Jam i sigurt deri tani, ju jeni të bindur se zhvillimi modern i CSS është një thirrje shumë larg nga qasja e maceve të së kaluarës. ��

Thënë kjo, do të pranoj diçka përsëri, edhe nëse tingëlloj si një rekord i thyer: disa nga mjetet që kam mbuluar në këtë artikull nuk janë të lehta për t’u vendosur, veçanërisht nëse nuk jeni në kushte miqësore me ekosistemin npm . Por para se të ndjeheni të neveritur dhe të largoni fytyrën, më thoni këtë: a ishte e lehtë CSS kur ishe i pari mësim ajo? A ishte e thjeshtë të mësosh të përqendrohesh një divë, të zotërosh ndryshimet e humorit të notave, e kështu me radhë? Në mënyrë të ngjashme, mjetet që përshkrova këtu kanë disa kurba mësimi, por ato ia vlejnë mirë.

Sinqerisht, pasi të keni filluar të provoni rezultatet, do të shkelni veten për të mos e bërë këtë më shpejt. Dhe le të mos e kuptojmë rëndësinë e CSS që është modulare, e ligët dhe e organizuar mirë!

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