Способы стылізацыі React кампанентаў

Існуе мноства розных спосабаў стылізацыі React кампанентаў. Тут мы разгледзім некаторыя асноўныя з іх.

Стандартны падыход, які мы можам ужыць, як і пры звычайнай стылізацыі вэб-старонак - гэта выкарыстанне глабальнага CSS. Тут мы ствараем адзін вонкавы агульны CSS файл са стылямі. Пры такім падыходзе, усе назвы класаў знаходзяцца ў глабальнай прасторы назваў, што можа прыводзіць да канфліктаў паміж імі. Таксама можна зрабіць мноства маленькіх CSS файлаў. Гэты падыход малаэфектыўны пры стварэнні буйных маштабавальных дадаткаў.

Наступны падыход - інлайнавая стылізацыя, выкарыстоўваючы яго, мы можам дадаць CSS стылі інлайн, падобна да таго, як гэта робіцца ў звычайным HTML. У гэтым выпадку мы будзем працаваць з атрыбутам style, перадаючы яму неабходныя CSS уласцівасці. Ужыванне такой стылізацыі лічыцца дрэнным тонам і рэкамендуецца толькі для дадання дынамічна вылічальных падчас рэндэрынгу стыляў. Гэты спосаб добры для хуткага прататыпавання інтэрфейсу асобнага кампанента.

Наступная пара спосабаў, якія мы разгледзім - сучасныя, якія набіраюць папулярнасць, эфектыўныя спосабы стылізацыі. Гэта менавіта тыя спосабы, якія рэкамендуецца ўжываць для стылізацыі буйных маштабавальных React дадаткаў.

Першы з іх - ужыванне бібліятэкі Styled Components, якая выкарыстоўвае для стылізацыі шаблонныя радкі. Гэты метад дазваляе нам пісаць звычайны CSS у JS кодзе, выкарыстоўваючы ўвесь яго функцыянал.

Другі спосаб - ужыванне CSS модуляў. У даным выпадку, CSS модуль - гэта такі CSS файл, у якім па змаўчанні ўсе назвы класаў і анімацый знаходзяцца ў лакальнай прасторы назваў, гэта значыць даступныя толькі ўнутры кампанента, які яго выкарыстоўвае.

У гэтых двух апошніх спосабах мы можам не баяцца канфліктаў паміж назвамі класаў, бо яны ўнікальныя - выкарыстоўваецца канцэпцыя лакальнай прасторы назваў. Таксама пры іх выкарыстанні адпадае неабходнасць у метадалогіі БЭМ.

У наступных уроках мы разгледзім усе прыведзеныя тут спосабы падрабязней.