Kaip organizuoti „React.js“ CSS

Tinklaraštis

Kaip organizuoti „React.js“ CSS

Ar jūsų „React“ projekto CSS yra sumaišytas į vieną index.css failą be jokios struktūros? Ar turite krūvą senų CSS modifikatorių ir nesate tikri, ar jie naudojami?



Kitaip tariant, ar jūsų CSS yra netvarka ir jums reikia būdo organizuoti CSS „React“? Neziurek i prieki! Čia yra mano „React CSS“ organizavimo sistema.

Aš tikrai nesu ekspertas, bet pažiūrėjęs keletą kitų patyrusių „React“ kūrėjų „Youtube“ vaizdo įrašų ir perskaitęs BEM, tai yra keletas patarimų, kuriuos aš pasirinkau.



Visada naudokite classNames

Pirmiausia naudokite classNames, kad pakeistumėte VISUS komponentus, o ne ID dėl „React“ pobūdžio.

Kurį laiką naudoju ir ID, ir classNames, nes žinojau, kad kai kuriuos komponentus naudosiu tik vieną kartą, o kitus - kelis kartus. Nors ši logika yra prasminga rašant įprastus HTML elementus, „React“ yra skirta kurti daugkartinio naudojimo komponentai. Todėl prasminga naudojant „React to“ visada naudoti „classNames“ savo komponento apibrėžtyje, nesvarbu, ar jie bus naudojami vieną ar du kartus.



Sąžiningai, tikrai nėra per daug svarbu, ar naudojate ID, ar classNames, bet asmeniškai manau, kad naudojant classNames yra prasmingiau suprasti, kas yra „React“ komponentai. Be to, dėl konsistencijos jis atrodo daug švaresnis.


GERAI

BEM (blokas, elementas, modifikatorius) yra populiari CSS modifikatorių pavadinimų konvencija. Tai suteikia jūsų elementų „className“ kontekstą ir susiejimą.

Patikrinkite mano seną komponentą be BEM.

#organizacija #reakcija #žiniatinklio kūrimas #programinės įrangos kūrimas #css

medium.com

Kaip organizuoti „React.js“ CSS

Ar jūsų „React“ projekto CSS yra sumaišytas į vieną index.css failą be jokios struktūros? Ar turite krūvą senų CSS modifikatorių ir nesate tikri, ar jie naudojami?