React компоненттерин стилдөө ыкмалары

React компоненттерин стилдөө үчүн көптөгөн ар кандай ыкмалар бар. Бул жерде биз алардын кээ бир негизгилерин карап чыгабыз.

Колдонсо боло турган стандарттуу мамиле - бул кадимки веб-барактарды стилдөөдө колдонгондой эле глобалдык CSS колдонуу. Бул жерде биз сырткы жалпы CSS файлын стилдер менен түзөбүз. Бул мамиледе, бардык класс аталыштары глобалдык көрүү аймагында болот, бул алардын ортосунда карама-каршылыктарга алып келиши мүмкүн. Ошондой эле бир топ кичинекей CSS файлдарын түзсө болот. Бул мамиле чоң масштабдагы колдонмолорду түзүүдө натыйжасыз болуп саналат.

Кийинки мамиле - инлайн стилдөө, аны колдонуп, биз инлайн түрдө CSS стилдерин кошсо болот, кадимки HTML'де жасалгандай. Бул учурда биз атрибут менен иштейбиз style, ага керектүү CSS касиеттерин берүү менен. Мындай стилдөөнү колдонуу жаман адап саналган жана сунушталат динамикалык түрдө эсептелген стилдерди кошуу үчүн гана. Бул ыкма жеке компоненттин интерфейсин тез прототиптеп көрүү үчүн жакшы.

Биз карап чыга турган кийинки бир нече ыкма - заманбап, популярдуулугу өсүп жаткан, натыйжалуу стилдөө ыкмалары. Так ушул ыкмалар, алар чоң масштабдагы React колдонмолорун стилдөө үчүн колдонуу сунушталат.

Алардын биринчиси - китепкананы колдонуу Styled Components, ал стилдөө үчүн шаблондуу саптарды колдонот. Бул метод бизге кадимки CSS'ти JS кодунда жазууга мүмкүндүк берет, анын бардык функционалдыгын колдонуу менен.

Экинчи ыкма - CSS модулдарын колдонуу. Бул учурда, CSS модулу - мындай CSS файлы, анда демейки боюнча бардык класс жана анимация аталыштары локалдык көрүү аймагында, башкача айтканда, алар компоненттин ичинде гана колжетимдүү, ал аны колдонгон.

Бул акыркы эки ыкмада биз класс аталыштарынын ортосундагы карама-каршылыктардан коркпой алабыз, анткени алар уникалдуу - локалдык көрүү аймагы түшүнүгү колдонулат. Ошондой эле аларды колдонуу менен БЭМ методологиясына муктаждык калбайт.

Кийинки сабактарда биз бул жерде келтирилген бардык ыкмаларды деталдуу карап чыгабыз.