Miksi sinun pitäisi käyttää SCSS:ää tyyliteltyjen komponenttien sijaan?

Vertailtuamme suosittuja ratkaisuja, kuten tavallista CSS:ää, Emotion, SCSS ja Tyylitellyt komponentit, valitsin lopulta viimeisen. Kaikki näytti olevan kunnossa. Se on nykyään hyvin suosittu kirjasto, mikä tarkoittaa, että -
on jo suuri yhteisö, joten jos kohtaisin ongelmia, löydän todennäköisesti ratkaisun jostain Stack Overflow'sta tai GitHubista. Sen lisäksi, Tyylitellyt komponentit on joitakin optimointiominaisuuksia, mikä tarkoittaa, että ne renderöivät vain silloin, kun niitä tarvitaan. Osoitteessa projekti odotettiin rakennettavan käyttäen React:tä ja Typescriptiä. Tämä kirjasto tukee erinomaisesti molempia tekniikoita. Kuulostaa mahtavalta, eikö?

Aloitin koodaamisen silloin. Kuukauden kuluttua, kun sovellus on kasvanut, etusivun joukkue ja minä keskityin ominaisuuksien toimittamiseen, huomasimme, että hämmästyttävästi toimiva Tyylitellyt komponentit kirjastolla oli oma maalinsa, ja kerron teille miksi.

Ensinnäkin, nimeämiskäytäntö. Erottamaan toisistaan Tyylitellyt komponentit React-komponenteista, jouduin käyttämään Tyylitelty etuliite, joka väheni koodi luettavuus. Sitten (mikä saattaa olla outoa), Typescript-tuki. Tyylitellyt komponentitperustuvat CSS-in-JS-lähestymistapaan, kuten ehkä tiedätkin. Tämä tarkoittaa, että voit siirtää niille minkä tahansa propin ja muuttaa syötteen tyyliä tämän propin perusteella, ja henkilökohtaisesti pidän tätä ominaisuutta mahtavana. Typescriptissä sinun pitäisi myös toteuttaa tämän propin tyyppi tekee siitä koodia pidemmän minkä tahansa Tyylitelty komponentti. "Mutta se kestäisi vielä 5 sekuntia, joten mikä on ongelmasi?" - saatat sanoa. Olet oikeassa, vaikka kun sovellus skaalautuu nopeasti ja komponenttien määrä on
lisääntyy, nämä 5 sekuntia voidaan helposti moninkertaistaa satoihin kertoihin. Toinen ongelma on sijoitus Tyylitellyt komponentit.

Jotkut JS-kehittäjät sijoittavat ne samaan tiedostoon sen komponentin kanssa, johon ne kuuluvat, ja toiset luovat niille erilliset tiedostot. Molemmat lähestymistavat ovat hyviä monista syistä. Se riippuu lähinnä komponentin monimutkaisuudesta. Jompaakumpaa tekniikkaa noudattamalla voidaan säilyttää koheesio, mutta niiden yhdistämisellä saavutetaan juuri päinvastainen tulos. Luovuimme CSS-in-JS -lähestymistavasta ja siirryimme käyttämään SCSS. Se ei ollut helppoa ja nopeaa, mutta pienen avun avulla selvisimme siitä. Aloitimme html-tunnisteiden muotoilun BEM-menetelmällä ja laitoimme tietenkin tyylit erillisiin tiedostoihin, yksi per komponentti. Sanoin, että JS-tukien välittäminen Tyylitellyt komponentit on mahtava ominaisuus, mutta SCSS se on mahdotonta. Luulen, että olemme myös kaikki samaa mieltä siitä, että syntaksi, jolla React haluaa koodata ehdollisia luokkia, on kauhea.

No, on olemassa yksi varsin mielenkiintoinen ratkaisu. Jos yhdistät BEM-menetelmän ja clsx kirjasto, saat jotain tällaista (iso huuto ystävälleni Przemek Adamczykille, joka näytti minulle tämän kirjaston).

Näyttää paljon siistimmältä, eikö vain?

Parasta on se, että sinun tarvitsee vain kirjoittaa olosuhdemuuttuja komponenttitasolla ja
ei muotoilun tasolla. Se todella säästää aikaa. Valitettavasti tällaisella ratkaisulla on haittapuolensa.
SCSS on helppo ja ystävällinen, mutta ole varovainen, kun käytät sitä Next.js:n kanssa. Tämä kehys ei
sallii tyylitiedostojen tuonnin suoraan komponenttitiedostoon (vain CSS-moduulit).

Jos haluat yhden tiedoston komponenttia kohti, sinun on luotava seuraavat tiedostot index.scss joka sisältää kaikki SCSS tiedostot ja
tuo se _app.tsx tiedosto. Ainoa ongelma on se, että sinun on tuotava manuaalisesti jokainen SCSS luotu tiedosto. React:ssä tätä ongelmaa ei kuitenkaan ole, ja voit tuoda SCSS tiedostoja minne haluat. Älä ymmärrä minua väärin. Tyylitellyt komponentit ovat todella hyviä. Kuten sanoin aiemmin, JS-muuttujien siirtäminen sekä globaali teema ovat hämmästyttäviä ominaisuuksia. Kun rakennat isoa sovellusta, jossa optimointi on ratkaisevaa, tämä kirjasto todennäköisesti täyttää tarpeesi. Meidän tapauksessamme kuitenkin siirtyminen SCSS osui jättipottiin.

Yhteenveto

Lopuksi voidaan todeta, että vaikka on olemassa päteviä perusteluja molemmille. SCSS ja tyylitellyt komponentit osoitteessa web-kehitys , lopullinen päätös riippuu useista tekijöistä. SCSS tarjoaa tutumman syntaksin kokeneet kehittäjät perinteisessä CSS:ssä ja tarjoaa saumattoman integraation olemassa oleviin koodipohjat ja komponenttikirjastot .

Toisaalta, Tyylitellyt komponentit tarjota parannettu kehittäjäkokemus sen kyky kapseloida tyylejä komponenttien sisällä ja yksinkertaistaa muotoiluprosessia. Se edistää myös koodin modulaarisuutta ja uudelleenkäytettävyyttä, minkä ansiosta front-end-suunnittelijat voivat tehokkaasti hallinnoida komponenttien hakemisto ja luoda johdonmukainen käyttöliittymä koko verkkosovellus . Ottaen huomioon käyttäjätiedot turvallisuuden ja suorituskyvyn kannalta on ratkaisevan tärkeää arvioida molempien lähestymistapojen vaikutusta lopulliseen paketin kokoon ja latausaikoihin. Viime kädessä valinta seuraavien vaihtoehtojen välillä SCSS ja tyylitellyt komponentit tulisi perustua hankkeen erityistarpeisiin, hankkeen toteuttajan osaamiseen ja osaamiseen. kehitystiimi ja ohjelman yleiset tavoitteet verkkosovellus . Kehittäjien on suositeltavaa arvioida kaikki tekijät, pysyä ajan tasalla läpi blogikirjoitukset ja alan keskusteluista ja tehdä tietoon perustuva päätös, joka vastaa heidän projektivaatimuksiaan ja parantaa yleistä kokonaisuutta. front-end-kehitysprosessi .