Top 5 CSS-gereedskap vir webontwikkelaars en ontwerpers

CSS het ‘n hele ent gekom, maar die gereedskap daarvoor het tot nou toe nog nie gedoen nie.


As u voel dat die skryf van CSS soos om monsters in ‘n teerput te veg, is u nie alleen nie. Terwyl CSS een van die mees fundamentele tegnologieë is wat die internet aanwend, is dit op sigself nie ‘n behoorlike programmeringstaal of -raamwerk nie. As gevolg hiervan, sodra u projek meer prominent begin word, word die gemors ook so: die keurreëls blyk oraloor te wees, en dit is moeilik om te vind wat is waar; terwyl u lettertipes, eksterne CSS, JS en ander bates op u bladsye insluit, lyk dit asof die finale grootte van die bundel uit die hand groei, en wonder u waar die ideale van vinnige, gebruikersvriendelike voorpunte verlore geraak het.

Maar dit hoef nie so te wees nie. Die gereedskap rondom CSS het vandag ontwikkel tot ‘n vlak dat die werkvloei nie net getem kan word nie, maar ook aangenaam gemaak kan word. In hierdie artikel gaan ek oor vyf sulke CSS-instrumente praat wat ek in my werk van groot waarde gevind het. Ek het bewustelik vermy, insluitend ‘speelgoed’-instrumente soos CSS-kragopwekkers, spyskaartgenerators, ens., Omdat dit meer probleme skep as wat hulle oplos.

Die CSS-trein kom! Kom ons gaan! �� ��

PostCSS

As u van JavaScript hou, sal u van die idee hou dat ons CSS via JavaScript kan byvoeg en beheer. En dit is presies die vermoë daarvan PostCSS bied.

Dit is egter nie net JavaScript-gebaseerde sintaksisuiker bo CSS nie. PostCSS vou verskeie kragtige pakkette / funksies bymekaar, wat lei tot ‘n baie aangenamer en makliker werkvloei tydens die hantering van CSS. Byvoorbeeld:

  • Verkopervoorvoegsels word outomaties bygevoeg op grond van die eiendom wat u gebruik.
  • Die vermoë om te bepaal watter CSS-funksies in die huidige blaaier gebruik kan word.
  • Met behulp van die opkomende, nog te publiseer, maar baie kragtige sintaksisopdaterings vir CSS.
  • ‘N responsiewe rooster wat so buigsaam is as wat dit raak.

Ek dink ek sal nie aan PostCSS reg doen as ek nie die roostervoorbeeld insluit nie. So hier gaan ons. Iets so eenvoudig soos dit:

div {
verlore kolom: 1/3
}

word omgeskakel in ‘n volwaardige CSS-stelsel met bykans alle randgevalle versorg:

div {
breedte: bereken (99,9% * 1/3 –
(30px – 30px * 1/3));
}
div: n-kind (1n) {
sweef: links;
kantlyn-regs: 30px;
duidelik: geen;
}
div: laaste kind {
kantlyn-regs: 0;
}
div: n-kind (3n) {
kantlyn-regs: 0;
sweef: regs;
}
div: n-kind (3n + 1) {
duidelik: albei;
}

Aangesien dit ‘n JS-gedrewe ding is, is PostCSS nie juis maklik om op te stel nie, veral as u ‘n ontwerper is en nie veel met modules, bundlers en die npm-wêreld in die algemeen te doen het nie. Dit gesê, die potensiaal vir PostCSS in u werk is groot en moet nie uit die oog verloor word nie.

PurgeCSS

Hou u van die moderne werkstroom wat aan die raamwerk gebaseer is, maar is gefrustreerd dat hulle te veel bagasie in die sak bring? Indien ja, is PurgeCSS u vriend, ten minste tot die oorweging van CSS.

Vir diegene wat miskien nie weet wat die saak is nie: hier is ‘n vinnige bespreking. Wanneer u toepassings op een bladsy bou met behulp van voorraamwerke soos React, Angular, Vue, ens., Gaan u deur die sogenaamde ‘build process’. In wese kodeer u al u CSS, JS, SASS, ens. In aparte lêers (organiseer dit soos u die meeste intuïtief vind), maar sodra u klaar is, sê u vir die bundelaar om die ding te “bou”. Wat dit doen is om al die bronkode wat u geskryf het, te lees, verskillende filters daarop toe te pas (minification, obfuscation / uglification, ens.), En die uitset in enkele lêers uit te spoeg, gewoonlik “app.js” vir al die JavaScript, en “App.css” vir al die CSS. Hierdie lêers, tesame met ‘n skraal “index.html,” is alles wat u nodig het om aan die voorkant van die toepassing te werk. Die nadeel is dat, aangesien alles by hierdie finale lêers ingesluit is, hul grootte dikwels strek oor wat toelaatbaar is vir vinnige responstyd; dit is byvoorbeeld nie ongewoon om ‘n “app.js” te sien wat meer as 500 kB is nie!

PurgeCSS word bygevoeg as deel van u build-werkvloei en verhoed dat ongebruikte CSS saamgevoeg word in die finale uitvoer. ‘N Tipiese gebruiksgeval is Bootstrap: dit is ‘n mediumgrootte biblioteek met verskillende UI-klasse vir verskillende komponente. As u byvoorbeeld 10% van Bootstrap se klasse gebruik, is die res 90% die enigste oplaag in u finale CSS-lêer. Maar danksy PurgeCSS, kan sulke ongebruikte CSS-lêers geïdentifiseer en verhoed word vir die bouproses, wat lei tot baie kleiner finale CSS-lêers (5-6 keer die vermindering van grootte is redelik normaal).

Dus, gaan voort, “suiwer” onnodige CSS met PurgeCSS! ��

wind van agter

wind van agter is ‘n CSS-raamwerk, maar dit stry soveel teen die graan dat ek gedink het ek sal dit hier by CSS-instrumente insluit. As u inline CSS haat (wie doen dit nie ?!), dan sal Tailwind u waarskynlik die eerste keer dat u dit teëkom, van afgryse terugtrek. Laat ons eers proe deur te kyk hoe u ‘n tipiese vorm met Tailwind CSS kan kodeer:

Gebruikersnaam

wagwoord

Kies ‘n wagwoord.

Meld aan


Wagwoord vergeet?

© 2019 Acme Corp. Alle regte voorbehou.

‘Is dit ‘n grap of wat ?! Wat is al die irriterende klein klasse? By nadere ondersoek, waarom stel ek die kantlyn, opvulling en kleur direk saam met die HTML? Is dit 2019 of wat? ”

Gedagtes soos hierdie word verwag. Ek weet dit omdat ek dieselfde gevoel het en die deksel op Tailwind onmiddellik toegemaak het. Dit was eers tot later toe ek op ‘n podcast afgekom het waar die gas ‘n trendy, ordentlike grootte webwerf in Tailwind oorgedoen het, dat ek aandag begin gee het..

Oorweeg hierdie vrae voordat ons verder gaan:

  • Is u moeg om standaardraamwerkklasse en hul funksies te memoriseer sodat u u ontwerpe kan aanpas na u smaak? ‘N Goeie voorbeeld is om die voorkoms en gedrag van die Bootstrap-navigasiebalk te verander.
  • Dink jy gewilde kaders soos Bootstrap is te veel en probeer veel meer doen as wat hulle behoort te doen??
  • Vind u dat u rame meng omdat u die beste van alle wêrelde wil hê??
  • Hou u meer van beheer oor u ontwerpe en vind u die vanielje CSS-ervaring oorweldigend?

As die antwoord hierop ‘n ‘ja’ is, het u Tailwind sleg nodig. Kom ons kyk wat Tailwind is en wat dit doen.

Tailwind word ‘n hulpprogramme-eerste CSS genoem, wat verskil van wat ons doen in ons alledaagse werkvloei: semantiese CSS. Die verskil tussen semantiese CSS en nut CSS is dat eersgenoemde probeer om elemente te styl volgens die naam van die visuele gedeeltes wat op die bladsy verskyn. Dus, as u ‘n navigasie-menu, kaarte, karrousel, ens. Op ‘n bladsy het, sou die semantiese manier om dinge te doen, wees om CSS-stylreëls te groepeer onder klasse soos .nav, .card, .carousel, ens., Wat hul onderafdelings dienooreenkomstig gemerk (byvoorbeeld. kaart-liggaam,. kaart-voet, ens.). Dit is verreweg die mees algemene benadering tot CSS, en ons ken almal dit deur middel van kaders soos Bootstrap, Foundation, Bulma, UI Kit, ens..

Aan die ander kant, die ‘nut’-styl om CSS te skryf, noem klasse presies volgens hul funksie: ‘n klas wat die marge vir die bo- en onderkant reguleer, word benoem as .margin-y-medium en kan oral in die HTML toegepas word waar hierdie marge benodig word. Alhoewel dit ‘n bietjie van ‘n klasnaamkruip bekendstel (kyk net gou na die kode wat ek vroeër gedeel het of op die skermkiekie – soveel klasse!), Is die bedoeling van die CSS glashelder: jy hoef nie te spring nie heen en weer tussen die dokumentasie, u CSS en u HTML om die regte name en die regte effek uit te vind.

Dit is ‘n baie bevrydende manier van werk, maar daar is ook ‘n vangs: u moet u CSS-basiese aspekte ordentlik hê (insluitend moderne konsepte soos die Flexbox). Dit is omdat Tailwind geen buite-die-boks-style vir enige komponente op u bladsy bied nie, en dit is aan u om die style uit die gegewe boustene te konstrueer. ‘N Ander probleem is die opset: Tailwind stel u in staat om verskillende CSS-klasse in groepe te groepeer, maar dit word gedoen via JavaScript en benodig ‘n module-laaier en -bundel soos Webpack..

Alles gesê en klaar, Tailwind is ‘n polariserende, opvallende nuwe manier om stilering te doen, en sal ‘n beroep doen op diegene wat smag na groter eenvoud en beheer..

Saas

Hoewel Sass bestaan ​​al lank, ek het dit hier ingesluit omdat ontwikkelaars nog nie weet hoe nuttig dit is nie. Stylistically Awesome Style Sheets (of SASS) is ‘n superset van CSS wat ontwikkel is om die waansin wat die kruip in die projek te tem sodra CSS buite ‘n paar lyne groei.

Stel jou voor: jy het die CSS vir jou projek verreweg gedoen. U gebruik ‘n paar kleure, het ‘n paar verstandige marges vir verskillende divs, fontstyle, ensovoorts bepaal. Behalwe dat jy nou besef dat dit nie so goed bymekaar hang nie. Miskien wil u groter marges vir alle afdelings, kaarte en knoppies probeer. Nou, wat nou? Selfs die idee om deur u reuse CSS-lêer te moet vervang, is genoeg om een ​​hoofpyn te gee. Ons het dit alles gedoen, en ons weet almal hoe foutief dit is. Sass los hierdie probleem op deur veranderlikes in te stel:

As ons HTML skryf, nest ons elemente in ander elemente. Maar wanneer ons CSS skryf, moet ons ‘n vaste hiërargie van reëls skryf, wat dit moeilik maak om die CSS geestelik op die HTML te “pas”. Met Sass kan u die bladsystruktuur in u styllêers naboots:

Dit alles begin nie eers die oppervlak van die lekkergoed wat Sass aanbied, krap nie: modulêre ontwerp, lêers, mengsels, erfenis insluit. . . die lys gaan aan en aan. Natuurlik, u sal ‘n Sass-samesteller-werkvloei moet leer en dit by u s’n moet insluit, maar na my mening is dit ‘n paar uur wat u spandeer om ‘n belegging te betaal!

CSS Linters

Aangesien webontwerpers (en UI-ontwikkelaars – alhoewel ek wonder hoe hierdie twee terme verskil ��) eenvoudige teksredakteurs gebruik – of soos deesdae die geval is, kode direk vanaf die Chrome dev-gereedskap – kry hulle selde kennis van die voordeel van ‘n Linter. Aan die ander kant weet programmeerders wat goeie teksredakteurs soos VS Code, Sublime Text of ander IDE’s gebruik, hierdie instrument baie goed, want dit is vir hulle die tweede aard. Hoe dit ook al sy, die punt is dat as u een van die CSS-ontwikkelaars is wat verdrink in morsige CSS, kan u baat by ‘n sluier.

Eenvoudig gestel, ‘n lint is ‘n program wat u kode kontroleer vir foute en teenstrydighede. Dit word gedoen met behulp van ‘n stel reëls wat bepaal word wat verkeerd is en wat strydig is. Goeie kwepers integreer met IDE’s en kode-redigeerders en kan opgestel word om te werk elke keer as u die bronlêer stoor. Dit help jou ook met voorskoue, foute en outo-voltooiing van kleure terwyl jy jou CSS-lêers saamstel:

Maar hier is die beste deel – as u ‘n spesifieke CSS-styling en -opmaak volg, kan u die lint tot u tevredenheid aanpas. Dit verseker dat die CSS binne ‘n projek dieselfde stylgids volg (die linter kan ook opgestel word om die lêer outomaties te formateer elke stoor / begaan van die bronkode). Dus, of u nou in ‘n span of alleen werk, ‘n lint is altyd ‘n uitstekende toevoeging tot u projekvloei.

Afsluiting

Ek is nou seker dat u oortuig is dat die moderne CSS-ontwikkeling ver van die kudde-die-katte-benadering van die verlede is. ��

Dit gesê, ek sal weer iets erken, selfs al klink dit na ‘n gebroke plaat: sommige van die instrumente wat ek in hierdie artikel gedek het, is nie maklik om op te stel nie, veral as u nie vriendelik is met die npm-ekosisteem nie . Maar voordat jy gewalg voel en jou gesig wegwys, sê dit vir my: was dit maklik met CSS toe jy eerste was leer Dit? Was dit maklik om te leer om ‘n div te sentreer, om die gemoedskommelings van vlotte ensovoorts te bemeester? Net so het die gereedskap wat ek hier beskryf ‘n leerkurwe, maar dit is die moeite werd.

Eerlik, sodra u die resultate begin ervaar, sal u uself skop omdat u dit nie gouer doen nie. En laat ons nie die belangrikheid van CSS modulêr, skraal en goed georganiseerd verstaan ​​nie!

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