Af hverju ættir þú að nota SCSS í stað Styled Components?

Eftir að hafa borið saman vinsælar lausnir eins og hreint CSS, Emotion, SCSS og Stílhreinar einingar, ég valdi loks þann síðasta. Allt virtist vera í lagi. Hann hefur mjög vinsæla bókasafn nú á dögum, sem þýðir
Það er þegar til stór hópur, svo ef ég lendi í einhverjum vandræðum mun ég líklega finna lausn einhvers staðar á Stack Overflow eða GitHub. Að auki, Stílhreinar einingar Eiga nokkrar fínstillingareiginleika sem þýðir að þær birtast aðeins þegar þörf krefur. Þeir verkefni var búist við að yrði byggt með React og Tegundaskjal. Þessi bókasafn býður upp á frábæran stuðning fyrir báðar tæknir. Hljómar frábærlega, ekki satt?

Ég byrjaði þá að kóða. Eftir mánuð, þegar forritið hefur vaxið, frontendið lið og ég einbeittum okkur að afhendingu eiginleika, komumst við að því að hið ótrúlega Stílhreinar einingar Bókasafnið hafði sitt eigið mark og ég mun segja þér af hverju.

Fyrst og fremst, nafngiftingarreglugerðin. Til aðgreiningar Stílhreinar einingar frá React íhlutir, ég þurfti að nota Stílhrein forskeið sem minnkaði kóði Lestrarhæfni. Síðan (sem gæti verið skrýtið) stuðningur við TypeScript. Stílhreinar einingar, eins og þú gætir vitað, byggja á CSS-in-JS-aðferðinni. Þetta þýðir að þú getur sent þeim hvaða prop sem er og breytt stílnum, þ.e. útliti inntaksins, út frá þessum prop, og ég tel persónulega að þessi eiginleiki sé frábær. Í TypeScript ættirðu einnig að innleiða gerð þessa prop, sem gerir kóðann lengri hvað sem er Stílhreinn íhlutur. “En það myndi taka svona fimm sekúndur í viðbót, svo hvað er vandamálið þitt?” – gætirðu sagt. Þú hefur rétt fyrir þér, þó þegar forritið stækkar hratt og fjöldi íhluta er
Þar sem þetta eykst, er auðvelt að margfalda þessar fimm sekúndur hundruð sinnum. Annað vandamál er staðsetningin á Stílhreinar einingar.

Sumir JS forritarar setja þau í sömu skrá og þær íhlutir sem þau tilheyra, en aðrir búa til sérstakar skrár fyrir þau. Báðar nálganirnar eru góðar af mörgum ástæðum. Það fer aðallega eftir flækjustigi íhlutarins. Að fylgja annarri þessara aðferða getur viðhaldið samheldni, en að sameina þær skapar nákvæmlega hið gagnstæða. Við hættum að nota CSS-in-JS-aðferðina og fluttumst yfir í SCSS. Það var ekki auðvelt né fljótlegt en með smá hjálp komumst við þangað. Við byrjuðum að stíla HTML-tagi í BEM-aðferðafræði og, auðvitað, settum stíla í aðskildar skrár, eina fyrir hvern þátt. Ég sagði að það að senda JS-eiginleika til Stílhreinar einingar er frábær eiginleiki, en í SCSS Það er ómögulegt. Ég held að við séum öll sammála um að setningafræði React til að kóða skilyrtar flokka sé hræðileg.

Jæja, það er ein ansi áhugaverð lausn. Ef þú tengir BEM-aðferðafræðina við flokk bókasafn, þú munt fá eitthvað svona (stórt hrós til vinar míns Przemeks Adamczyk fyrir að sýna mér þetta bókasafn)

Lítur mun hreinna út, finnst þér ekki?

Það besta er að þú þarft aðeins að slá inn skilyrðisbreytuna á íhlutastigi og
Ekki á stílstigi. Það sparar virkilega tíma. Því miður hefur slík lausn sín ókostina.
SCSS er einfalt og notendavænt en vertu varkár þegar þú notar það með Next.js. Þetta rammasett gerir það ekki
Leyfa að flytja inn stílskrár beint í íhlutisskrána (aðeins CSS-einingar).

Ef þú kýst eina skrá fyrir hvern íhlut, þarftu að búa til vísitala.scss sem inniheldur allt þitt SCSS skrár og
Flytja það inn í _app.tsx skrá. Eina vandamálið er að þú þarft að flytja inn hvern og einn handvirkt. SCSS skrána sem þú bjóst til. Í React er þetta vandamál hins vegar ekki til staðar og þú getur flutt inn SCSS Skrár hvar sem þú vilt. Ekki misskilja mig. Stílhreinar einingar eru virkilega góðar. Eins og ég sagði áður, er það ótrúlegt að geta sent JS-breytur sem og alþjóðlega þemað. Þegar þú býrð til stórt forrit þar sem hagræðing er mikilvæg, mun þessi bókasafn líklega uppfylla þarfir þínar. Í okkar tilfelli hins vegar, flutningur til SCSS Landaði stóru.

Ályktun

Að lokum, þó að gild rök séu fyrir báðum SCSS og Styled Components í vefþróun , endanleg ákvörðun ræðst af ýmsum þáttum. SCSS býður upp á kunnari málfar fyrir reynslumiklir forritarar í hefðbundnu CSS og býður upp á hnökralausa samþættingu við það sem fyrir er kóðagrunnar og íhlutabókasöfn .

Á hinn bóginn, Stílhreinar einingar bjóða upp á bætt upplifun forritara með getu sinni til að fanga stíla innan íhluta og einfalda stílsetningarferlið. Það stuðlar einnig að móduleiningu og endurnýtanleika kóða, sem gerir framanverðu viðmóti kleift verkfræðingar til að stjórna á skilvirkan hátt möguleikar stýringar og búa til samræmda notendaviðmótið um allt vefur forrit . Með hliðsjón af mikilvægi notandi gögn Varðandi öryggi og frammistöðu er mikilvægt að meta áhrif beggja nálgana á endanlega stærð pakkans og hleðslutíma. Að lokum er valið milli SCSS og Styled Components ætti að byggja á sértækum þörfum verkefnisins, færni setti af þróun team , og heildarmarkmiðin af vefforrit . Það er ráðlegt fyrir forritara að meta alla þætti og fylgjast með nýjustu þróuninni í gegnum bloggfærslur og iðnaðarræður, og taka upplýsta ákvörðun sem samræmist kröfum verkefnisins og eykur heildina framhlið þróunarferli .