React компоненттерін стильдеу әдістері

React компоненттерін стильдеудің әртүрлі көптеген әдістері бар. Мұнда біз олардың кейбір негізгілерін қарастырамыз.

Біз қолдана алатын стандартты тәсіл - бұл кәдімгі веб-беттерді стильдеу сияқты - жалпы CSS пайдалану. Мұнда біз стильдері бар бір сыртқы ортақ CSS файлын жасаймыз. Бұл тәсілде, барлық класс атаулары жалпы көрінетін аймақта болады, бұл олардың арасында қақтығыстарға әкелуі мүмкін. Сондай-ақ көптеген кішкене CSS файлдарын жасауға болады. Бұл тәсіл үлкен масштабталатын қолданбаларды жасау кезінде тиімсіз болып саналады.

Келесі тәсіл - ішкі стильдеу, оны пайдалана отырып, біз CSS стильдерін инлайн түрде қоса аламыз, дәл кәдімгі HTML-де жасалғандай. Бұл жағдайда біз style атрибутымен жұмыс істейміз, оған қажетті CSS қасиеттерін беріп. Мұндай стильдеуді қолдану нашар әдет саналады және тек рендеринг кезінде динамикалық есептелетін стильдерді қосу үшін ұсынылады. Бұл әдіс жеке компонент интерфейсін жылдам прототиптеу үшін жақсы.

Біз қарастыратын келесі бірнеше әдіс - заманауи, өсудегі, тиімді стильдеу әдістері. Дәл осы әдістер үлкен масштабталатын React қолданбаларын стильдеу үшін қолдануға ұсынылады.

Олардың біріншісі - Styled Components кітапханасын қолдану, ол стильдеу үшін қалыпты жолдарды пайдаланады. Бұл әдіс бізге JS кодында кәдімгі CSS жазуға мүмкіндік береді, оның барлық функционалын пайдалана отырып.

Екінші әдіс - CSS модульдерін қолдану. Бұл жағдайда, CSS модулі - бұл әдепкі бойынша барлық класс атаулары мен анимациялар жергілікті көрінетін аймақта болатын CSS файлы, яғни олар тек оны пайдаланатын компоненттің ішінде қол жетімді.

Соңғы осы екі әдісте біз класс атаулары арасындағы қақтығыстардан қорқуымыз қажет емес, себебі олар бірегей - жергілікті көрінетін аймақ тұжырымдамасы пайдаланылады. Сондай-ақ оларды пайдаланған кезде BEM методологиясына қажеттілік жойылады.

Келесі сабақтарда біз мұнда келтірілген барлық әдістерді егжей-тегжейлі қарастырамыз.