Kodėl turėtumėte naudoti SCSS vietoj stilizuotų komponentų?

Palyginę populiarius sprendimus, tokius kaip paprastas CSS, Emotion, SCSS ir Stilizuoti komponentai, galiausiai pasirinkau paskutinį. Viskas atrodė gerai. Šiuo metu ji turi labai populiarią biblioteką, o tai reiškia, kad
jau yra didelė bendruomenė, todėl jei susidurčiau su kokiomis nors problemomis, tikriausiai rasiu sprendimą kur nors Stack Overflow arba GitHub. Be to, Stilizuoti komponentai turi tam tikrų optimizavimo funkcijų, o tai reiškia, kad jie atvaizduojami tik tada, kai jų reikia. Svetainė projektas buvo tikimasi, kad jis bus sukurtas naudojant React ir Mašinraštis. Ši biblioteka puikiai palaiko abi technologijas. Skamba nuostabiai, tiesa?

Tada pradėjau programuoti. Po mėnesio, kai programėlė išaugo, priekinė dalis komanda ir aš sutelkėme dėmesį į funkcijų teikimą, sužinojome, kad nuostabus Stilizuoti komponentai biblioteka turėjo savo tikslą ir aš jums pasakysiu, kodėl.

Visų pirma, pavadinimų suteikimo tvarka. Norint atskirti Stilizuoti komponentai iš React komponentai, turėjau naudoti Stilizuota priešdėlis, kuris sumažėjo kodas skaitomumas. Tada (kas gali būti keista), Typescript palaikymas. Stilizuoti komponentai, kaip tikriausiai žinote, yra pagrįsti CSS-in-JS metodu. Tai reiškia, kad jiems galite perduoti bet kokį rekvizitą ir pagal jį pakeisti įvesties stilių, t. y. įvesties stilių, ir aš asmeniškai manau, kad ši funkcija yra nuostabi. Typescript, taip pat turėtumėte įgyvendinti šio rekvizito tipą daro jį kodas ilgiau bet Stilizuota sudedamoji dalis. “Bet tai užtruktų dar 5 sekundes, tad kokia jūsų problema?” - galite pasakyti. Esate teisus, nors kai programa greitai plečiasi ir komponentų skaičius yra
padidėjus, šias 5 sekundes galima lengvai padauginti šimtus kartų. Kita problema yra ta, kad Stilizuoti komponentai.

Kai kurie JS kūrėjai juos talpina į tą patį failą kartu su komponentu, kuriam jie priklauso, o kiti jiems sukuria atskirus failus. Abu būdai yra geri dėl daugelio priežasčių. Tai labiausiai priklauso nuo komponento sudėtingumo. Laikantis vieno iš šių metodų galima išlaikyti sanglaudą, tačiau juos sujungus gaunama visiškai priešinga nauda. Atsisakėme CSS-in-JS metodo ir perėjome prie SCSS. Nebuvo lengva ir greita, bet su nedidele pagalba mums pavyko. Pradėjome stiliuoti html žymas pagal BEM metodiką ir, žinoma, stilius sudėjome į atskirus failus, po vieną kiekvienam komponentui. Sakiau, kad perduodant JS rekvizitus Stilizuoti komponentai yra nuostabi funkcija, tačiau SCSS tai neįmanoma. Taip pat manau, kad visi sutinkame, jog sintaksė, kuria React nori koduoti sąlygines klases, yra siaubinga.

Na, yra vienas gana įdomus sprendimas. Jei BEM metodiką sujungsite su clsx biblioteką, gausite kažką panašaus į tai (didelis ačiū mano draugui Przemekui Adamczykui už tai, kad parodė man šią biblioteką)

Atrodo daug švariau, ar ne?

Geriausia tai, kad komponento lygmenyje tereikia įvesti sąlygos kintamąjį ir
ne stiliaus lygiu. Tai tikrai taupo laiką. Deja, toks sprendimas turi ir trūkumų.
SCSS yra paprasta ir patogi, tačiau būkite atsargūs ją naudodami su Next.js. Šis karkasas neturi
leidžia importuoti stiliaus failus tiesiai į komponento failą (tik CSS modulius).

Jei pageidaujate vieno failo kiekvienam komponentui, turite sukurti index.scss kuriame yra visi jūsų SCSS failus ir
importuoti jį į _app.tsx failas. Vienintelė problema yra ta, kad turite rankiniu būdu importuoti kiekvieną SCSS sukurtą failą. Tačiau React sistemoje šios problemos nėra ir galite importuoti SCSS failus, kur tik norite. Nesupraskite manęs neteisingai. Stilizuoti komponentai yra tikrai geri. Kaip jau minėjau, JS kintamųjų perdavimas ir globali tema yra nuostabios funkcijos. Kai kuriate didelę programėlę, kurioje labai svarbu optimizuoti, ši biblioteka tikriausiai patenkins jūsų poreikius. Tačiau mūsų atveju perėjimas prie SCSS laimėti aukso puodą.

Apibendrinimas

Apibendrinant galima teigti, kad nors yra pagrįstų argumentų ir už SCSS ir stilizuoti komponentai svetainėje žiniatinklio kūrimas , galutinis sprendimas priklauso nuo įvairių veiksnių. SCSS siūloma geriau pažįstama sintaksė patyrę kūrėjai tradicinių CSS ir užtikrina sklandžią integraciją su esamais kodų bazės ir komponentų bibliotekos .

Kita vertus, Stilizuoti komponentai pasiūlyti patobulintą kūrėjo patirtis gebėjimu įkomponuoti stilius į komponentus ir supaprastinti stiliaus kūrimo procesą. Jis taip pat skatina kodo moduliaciją ir pakartotinį panaudojimą, todėl priekinės dalies inžinieriai efektyviai valdyti komponentų katalogas ir sukurti nuoseklią vartotojo sąsają visoje žiniatinklio svetainė programa . Atsižvelgiant į svarbą naudotojas duomenys saugumą ir našumą, labai svarbu įvertinti abiejų metodų poveikį galutiniam paketo dydžiui ir įkėlimo laikui. Galiausiai reikia pasirinkti tarp SCSS ir stilizuoti komponentai turėtų būti grindžiamas konkrečiais projekto poreikiais, darbuotojų įgūdžiais ir jų kompetencija. kūrimo komanda , ir bendri tikslai žiniatinklio programa . Kūrėjams patartina įvertinti visus veiksnius, nuolat atnaujinti tinklaraščio įrašai ir pramonės diskusijų ir priimti pagrįstą sprendimą, kuris atitiktų jų projekto reikalavimus ir pagerintų bendrą projekto kokybę. Front-end kūrimo procesas .