Создание сайтов в Мариуполе, ДНР. Стиль компонентов React: 7 способов сравнения

 
 

Я работал с парой разработчиков в своем офисе над проектами React, у которых разный уровень опыта в React. Эта статья возникла из-за вопроса, который один из них задал о том, как лучше всего стилизовать компоненты React.

Существует несколько способов стилизации компонентов React. Выбор правильного метода стилизации компонентов не является абсолютным совершенством. Это конкретное решение, которое должно служить вашему конкретному варианту использования, личным предпочтениям и, прежде всего, архитектурным целям вашей работы. Например, я использую уведомления в React JS с помощью Noty, и стиль также должен поддерживать работу с плагинами.

Некоторые из моих целей при ответе на вопрос включали следующее:

глобальное пространство имен

зависимости

возможность повторного использования

масштабируемость

устранение мертвого кода

Кажется, существует несколько способов стилизации компонентов React, которые широко используются в отрасли для работы на производственном уровне:

встроенный CSS

обычный CSS

CSS в библиотеках JS

CSS-модули

Sass и SCSS

Меньше

стильный

Для каждого метода я рассмотрю потребность в зависимостях, уровень сложности и действительно ли подход хорош или нет.

Встроенный CSS

Зависимости: Нет

Сложность: Легко

Подход: Худший

Я не думаю, что кому-то нужно знакомство со встроенным CSS. Это стиль CSS, отправленный элементу напрямую с помощью HTML или JSX. Вы можете включить объект JavaScript для CSS в компоненты React, хотя есть несколько ограничений, таких как верблюд, обрамляющий любые имена свойств, которые содержат дефис. Вы можете стилизовать компоненты React двумя способами, используя объекты JavaScript, как показано в примере.

Пример

import React from «react»;

const spanStyles = {

color: «#fff»,

borderColor: «#00f»

};

const Button = props => (

<button style={{

color: «#fff»,

borderColor: «#00f»

}}>

Button Name

 

) ;

Обычный CSS

Зависимости: Нет

Сложность: Легко

Подход: хорошо

Обычный CSS — распространенный подход, возможно, на один шаг лучше, чем встроенный CSS. Стили можно импортировать на любое количество страниц и элементов, в отличие от встроенного CSS, который применяется непосредственно к конкретному элементу. Обычный CSS имеет несколько преимуществ, таких как встроенная поддержка браузера (он не требует зависимостей), нет дополнительных инструментов для изучения и нет опасности привязки к поставщику.

Вы можете поддерживать любое количество таблиц стилей, и при необходимости проще изменить или настроить стили. Но обычный CSS может стать серьезной проблемой, если вы работаете над большим проектом, в котором задействовано много людей, особенно без согласованного руководства по стилю для написания CSS.

Пример

/* styles.css */

a: link {

color: gray;

}

a: visited {

color: green;

}

a: hover {

color: rebeccapurple;

}

a: active {

color: teal;

}

import React from «react»;

import «styles.css»;

const Footer = () => (

 

 

© 2023

Find me on Twitter

 

 

) ;

export default Footer;

Дополнительная информация

Вы можете узнать больше о регулярном использовании CSS на странице W3C Learning CSS. Существует множество игровых площадок, таких как JS Bin, JSFiddle, CodePen и Repl.it, где вы можете опробовать его вживую и получить результаты в режиме реального времени.

CSS-в-JS

CSS-in-JS — это техника, позволяющая использовать JavaScript для стилизации компонентов. Когда этот JavaScript анализируется, создается CSS (обычно как

  • Item 1
  • Item 2
  • Item 3
  • Item 4
  • Item 5
  • .navbar {

    font: $ubuntu-font;

    color: $blue;

    li {

    margin-left: 1rem;

    a {

    padding: 5px;

    font-size: 1.5rem;

    span {

    font-weight: 600;

    }

    }

    }

    }

    Однако имейте в виду, что слишком глубокая вложенность не является хорошей практикой. Чем глубже вы вкладываете, тем более подробным становится файл Sass и тем больше потенциально может быть скомпилированный CSS, поскольку при компиляции вложение сглаживается. Таким образом, чрезмерное использование вложенности может создать чрезмерно специфичные правила CSS, которые трудно поддерживать. Есть шанс, что селекторы нельзя будет использовать повторно, а также есть проблемы с производительностью. Вложенные селекторы создадут длинную строку селектора CSS, которая в конечном итоге создаст файл CSS большего размера.

    Подведение итогов

    В этой статье я рассмотрел несколько способов стилизации компонентов в приложении React. Затем я сравнил и сопоставил эти методы, изучив их преимущества и недостатки. Наконец, я продемонстрировал, как использовать Sass (мой предпочтительный метод стилизации приложения React) в проекте Create React App.

    Sass — это препроцессор CSS, а препроцессоры CSS никуда не денутся. Они расширяют базовые функции CSS, предоставляя вам набор мощных функций, которые сразу же повысят вашу производительность. Я упомянул несколько преимуществ, но их гораздо больше, таких как наследование, функции, управляющие директивы и выражения, такие как if (), for () или while (), типы данных, интерполяция и т. д.

    Чтобы стать гуру Sass, может потребоваться некоторое время; все, что вам нужно сделать, это заглянуть в файлы Bootstrap Sass, чтобы увидеть, как Sass может превратиться в сложную вещь. Но изучение основ и настройка его для вашего проекта — это то, что вы можете начать уже сегодня.

    3D-печать5GABC-анализAndroidAppleAppStoreAsusCall-центрChatGPTCRMDellDNSDrupalExcelFacebookFMCGGoogleHuaweiInstagramiPhoneLinkedInLinuxMagentoMicrosoftNvidiaOpenCartPlayStationPOS материалPPC-специалистRuTubeSamsungSEO-услугиSMMSnapchatSonyStarlinkTikTokTwitterUbuntuUp-saleViasatVPNWhatsAppWindowsWordPressXiaomiYouTubeZoomАвдеевкаАктивные продажиАкцияАлександровск ЛНРАлмазнаяАлчевскАмвросиевкаАнализ конкурентовАнализ продажАнтимерчандайзингАнтрацитАртемовскАртемовск ЛНРАссортиментная политикаБелгородБелицкоеБелозерскоеБердянскБизнес-идеи (стартапы)БрендБрянкаБукингВахрушевоВендорВидеоВикипедияВирусная рекламаВирусный маркетингВладивостокВнутренние продажиВнутренний маркетингВолгоградВолновахаВоронежГорловкаГорнякГорскоеДебальцевоДебиторкаДебиторская задолженностьДезинтермедитацияДзержинскДивизионная система управленияДизайнДимитровДирект-маркетингДисконтДистрибьюторДистрибьюцияДобропольеДокучаевскДоменДружковкаЕкатеринбургЕнакиевоЖдановкаЗапорожьеЗимогорьеЗолотоеЗоринскЗугрэсИжевскИловайскИрминоКазаньКалининградКировскКировскоеКомсомольскоеКонстантиновкаКонтент-маркетингКонтент-планКопирайтингКраматорскКрасноармейскКрасногоровкаКраснодарКраснодонКраснопартизанскКрасный ЛиманКрасный ЛучКременнаяКураховоКурскЛисичанскЛуганскЛутугиноМакеевкаМариупольМаркетингМаркетинговая информацияМаркетинговые исследованияМаркетинговый каналМаркетинг услугМаркетологМарьинкаМедиаМелекиноМелитопольМенеджментМерчандайзерМерчандайзингМиусинскМолодогвардейскМоскваМоспиноНижний НовгородНиколаевНиколаевкаНишевой маркетингНовоазовскНовогродовкаНоводружескНовосибирскНумерическая дистрибьюцияОдессаОмскОтдел маркетингаПартизанский маркетингПервомайскПеревальскПетровскоеПлата за кликПоисковая оптимизацияПопаснаяПравило ПаретоПривольеПрогнозирование продажПродвижение сайтов в ДонецкеПроизводство видеоПромоПромоушнПрямой маркетингРабота для маркетологаРабота для студентаРазработка приложенийРаспродажаРегиональные продажиРекламаРеклама на асфальтеРемаркетингРетро-бонусРибейтРитейлРовенькиРодинскоеРостов-на-ДонуРубежноеСамараСанкт-ПетербургСаратовСватовоСвердловскСветлодарскСвятогорскСевастопольСеверодонецкСеверскСедовоСейлз промоушнСелидовоСимферопольСинергияСколковоСлавянскСнежноеСоздание сайтов в ДонецкеСоледарСоциальные сетиСочиСтаробельскСтаробешевоСтахановСтимулирование сбытаСуходольскСчастьеТелемаркетингТельмановоТираспольТорговый представительТорезТрейд маркетингТрейд промоушнТюменьУглегорскУгледарУкраинскХабаровскХарцызскХерсонХостингЦелевая аудиторияЦифровой маркетингЧасов ЯрЧелябинскШахтерскЮжно-СахалинскЮнокоммунаровскЯндексЯсиноватая