Я работал с парой разработчиков в своем офисе над проектами React, у которых разный уровень опыта в React. Эта статья возникла
Существует несколько способов стилизации компонентов React. Выбор правильного метода стилизации компонентов не является абсолютным совершенством. Это конкретное решение, которое должно служить вашему конкретному варианту использования, личным предпочтениям и, прежде всего, архитектурным целям вашей работы. Например, я использую уведомления в React JS с помощью Noty, и стиль также должен поддерживать работу с плагинами.
Некоторые из моих целей при ответе на вопрос включали следующее:
глобальное пространство имен
зависимости
возможность повторного использования
масштабируемость
устранение мертвого кода
Кажется, существует несколько способов стилизации компонентов React, которые широко используются в отрасли для работы на производственном уровне:
встроенный CSS
обычный CSS
CSS в библиотеках JS
Sass и SCSS
Меньше
стильный
Для каждого метода я рассмотрю потребность в зависимостях, уровень сложности и действительно ли подход хорош или нет.
Встроенный CSS
Зависимости: Нет
Сложность: Легко
Подход: Худший
Я не думаю, что
Пример
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 = () => (
) ;
export default Footer;
Дополнительная информация
Вы можете узнать больше о регулярном использовании CSS на странице W3C Learning CSS. Существует множество игровых площадок, таких как JS Bin, JSFiddle, CodePen и Repl.it, где вы можете опробовать его вживую и получить результаты в режиме реального времени.
.navbar {
font: $
color: $blue;
li {
a {
padding: 5px;
span {
}
}
}
}
Однако имейте в виду, что слишком глубокая вложенность не является хорошей практикой. Чем глубже вы вкладываете, тем более подробным становится файл Sass и тем больше потенциально может быть скомпилированный CSS, поскольку при компиляции вложение сглаживается. Таким образом, чрезмерное использование вложенности может создать чрезмерно специфичные правила CSS, которые трудно поддерживать. Есть шанс, что селекторы нельзя будет использовать повторно, а также есть проблемы с производительностью. Вложенные селекторы создадут длинную строку селектора CSS, которая в конечном итоге создаст файл CSS большего размера.
Подведение итогов
В этой статье я рассмотрел несколько способов стилизации компонентов в приложении React. Затем я сравнил и сопоставил эти методы, изучив их преимущества и недостатки. Наконец, я продемонстрировал, как использовать Sass (мой предпочтительный метод стилизации приложения React) в проекте Create React App.
Sass — это препроцессор CSS, а препроцессоры CSS никуда не денутся. Они расширяют базовые функции CSS, предоставляя вам набор мощных функций, которые сразу же повысят вашу производительность. Я упомянул несколько преимуществ, но их гораздо больше, таких как наследование, функции, управляющие директивы и выражения, такие как if (), for () или while (), типы данных, интерполяция и т. д.
Чтобы стать гуру Sass, может потребоваться некоторое время; все, что вам нужно сделать, это заглянуть в файлы Bootstrap Sass, чтобы увидеть, как Sass может превратиться в сложную вещь. Но изучение основ и настройка его для вашего проекта — это то, что вы можете начать уже сегодня.