React կոմպոնենտների ոճավորման եղանակներ
Գոյություն ունեն React կոմպոնենտների ոճավորման բազմաթիվ տարբեր եղանակներ։ Այստեղ մենք կդիտարկենք դրանցից որոշ հիմնականները։
Ստանդարտ մոտեցումը, որը մենք կարող ենք կիրառել, ինչպես և սովորական վեբ-էջերի ոճավորման դեպքում, դա գլոբալ CSS-ի օգտագործումն է։ Այստեղ մենք ստեղծում ենք մեկ արտաքին ընդհանուր CSS ֆայլ ոճերով։ Այս մոտեցման դեպքում, բոլոր դասերի անունները գտնվում են գլոբալ տեսանելիության տիրույթում, ինչը կարող է հանգեցնել դրանց միջև կոնֆլիկտների։ Նաև հնարավոր է ստեղծել բազմաթիվ փոքր CSS ֆայլեր։ Այս մոտեցումը քիչ արդյունավետ է մեծ մասշտաբայնություն ունեցող հավելվածներ ստեղծելիս։
Հաջորդ մոտեցումը - ինլայն ոճավորում,
օգտագործելով այն, մենք կարող ենք ավելացնել CSS ոճեր ինլայն,
նման այնպես, ինչպես դա արվում է սովորական HTML-ում։ Այս
դեպքում մենք կաշխատենք
style ատրիբուտի հետ, փոխանցելով դրան անհրաժեշտ
CSS հատկություններ։ Նման ոճավորման կիրառումը
համարվում է վատ ոճ և խորհուրդ է տրվում
միայն դինամիկ կերպով
հաշվարկվող ոճեր ավելացնելու համար՝ 렌դերिंգի ժամանակ։ Այս
եղանակը լավ է առանձին կոմպոնենտի ինտերֆեյսի արագ
պրոտոտիպավորման համար։
Հաջորդ զույգ եղանակները, որոնք մենք կդիտարկենք - ժամանակակից, հանրաճանաչություն ձեռք բերող, արդյունավետ ոճավորման եղանակներ են։ Սրանք հենց այն եղանակներն են, որոնք խորհուրդ է տրվում կիրառել մեծ մասշտաբայնություն ունեցող React հավելվածների ոճավորման համար։
Դրանցից առաջինը - Styled Components գրադարանայի կիրառումը, որն օգտագործում է ոճավորման համար տեմպլատային տողեր։ Այս մեթոդը թույլ է տալիս մեզ գրել սովորական CSS JS կոդում, օգտագործելով դրա ամբողջ ֆունկցիոնալությունը։
Երկրորդ եղանակը - CSS մոդուլների կիրառումը։ Այս դեպքում, CSS մոդուլը դա այնպիսի CSS ֆայլ է, որում լռելյայնորեն բոլոր դասերի և անիմացիաների անունները գտնվում են լոկալ տեսանելիության տիրույթում, այսինքն հասանելի են միայն այն կոմպոնենտի ներսում, որը այն օգտագործում է։
Վերջին երկու եղանակների դեպքում մենք կարող ենք չվախենալ դասերի անունների միջև կոնֆլիկտներից, քանի որ դրանք ունիկալ են - օգտագործվում է լոկալ տեսանելիության տիրույթի հայեցակարգը։ Նաև դրանց օգտագործման դեպքում անհրաժեշտություն չկա BEM մեթոդաբանությանը։
Հաջորդ դասերում մենք մանրամասն կդիտարկենք բոլոր այստեղ բերված եղանակները։
