Сравнение 8 способов стилизации компонентов React

пример

 import React from "react"; import style from "./panel.css"; const Panel = () => ( <div className={style.panelDefault}> <div className={style.panelBody}>A Basic Panel</div> </div> ); export default Panel; 

 .panelDefault { border-color: #ddd; } .panelBody { padding: 15px; } 

Sass & SCSS

• Зависимости: node-sass
• Сложность: Легко
• Подход: лучший

Sass утверждает, что это самый зрелый, стабильный и мощный язык расширений CSS профессионального уровня в мире. Это препроцессор CSS, который добавляет специальные функции, такие как переменные, вложенные правила и миксины (иногда их называют «синтаксический сахар») в обычный CSS. Цель состоит в том, чтобы сделать процесс кодирования более простым и эффективным. Как и другие языки программирования, Sass позволяет использовать переменные, вложенность, частичные значения, импорт и функции, которые добавляют сверхспособности к обычному CSS.

пример

 $font-stack: 'Open Sans', sans-serif; $primary-color: #333; body { font: 100% $font-stack; color: $primary-color; } 

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

Узнайте больше об использовании и установке Sass с различными языками программирования из их официальной документации на Sass: Syntaxically Awesome Style Sheets . Если вы хотите что-то попробовать, есть сервис под названием SassMeister — The Sass Playground! где вы можете поиграть с различными функциями Sass и SCSS.

Меньше

• Зависимости: less , less-loader
• Сложность: Легко
• Подход: хорошо

Less (Leaner Style Sheets) — это язык динамических препроцессоров с открытым исходным кодом, который можно компилировать в CSS и запускать на стороне клиента или на стороне сервера. Он основан на CSS и Sass и похож на SCSS. Несколько заметных отличий включают переменные, начинающиеся со знака @ в Less и $ в Sass.

пример

 @pale-green-color: #4D926F; #header { color: @pale-green-color; } h2 { color: @pale-green-color; } 

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

Вы можете начать с Less из официальной документации, и есть LESSTESTER, песочница Less, которая преобразует ваш код Less в CSS.

допускающее применение стиль

• Зависимости: @stylable/core , @stylable/runtime , @stylable/optimizer , @stylable/module-utils , @stylable/custom-valu
• Сложность: Сложная
• Подход: лучше

Stylable — еще один препроцессор, объединяющий Sass, SCSS и Less. Если есть проблема с удобством использования стилизованных компонентов — так как их синтаксис немного отличается от обычного CSS — это поможет. Stylable похож на CSS, но предлагает больше возможностей сделать каждый компонент незаметным. Это может сделать то, что CSS-модулям будет сложнее, например, стилизация внутренних частей пользовательского интерфейса. Помимо других свойств CSS, Stylable также предлагает пользовательские псевдо-классы и псевдо-элементы. Это свойство Stylable автоматически позволяет нам создавать собственные классы CSS, что позволяет нам делать стили для внутренних частей компонентов.

пример

 @namespace "Page"; :import { -st-from: './video-player.st.css'; -st-default: VideoPlayer; } .mainVideo { -st-extends: VideoPlayer; /* define mainVideo as VideoPlayer */ } .mainVideo::playButton { /* override mainVideo playButton */ background: green; color: purple; } 

 /* CSS output*/ .Page__mainVideo.VideoPlayer__root {} .Page__mainVideo.VideoPlayer__root .VideoPlayer__playButton { background: green; color: purple; } 

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

Stylable может предложить гораздо больше. Официальная документация по началу работы содержит подробное объяснение. Существует отдельная документация по интеграции React для ручной интеграции Stylable с компонентом React.

Грязные руки

Имея так много доступных вариантов, я испачкал руки и попробовал их один за другим. Благодаря Git я смог контролировать версию и сравнить все, чтобы увидеть, какой вариант является победителем. Я смог получить некоторую ясность относительно того, сколько зависимостей я использовал и как работал мой рабочий процесс при работе со сложными стилями. У меня была небольшая борьба со всем, кроме обычного CSS, CSS-модулей и SCSS.

Работа в офисе

Модули CSS помогают с импортом и другими вещами, но когда я попытался использовать его, не было особой поддержки для его расширения. Модули CSS имели проблемы, когда я использовал несколько классов и иерархий CSS. Единственная хорошая вещь — это то, что вы не получаете никаких конфликтов CSS, но недостатком является то, что ваш код CSS очень большой. Это немного похоже на методологию БЭМ.

К тому же, работа с псевдоэлементами и состояниями была адом. Иногда модули CSS даже не компилируются, когда я пытаюсь импортировать содержимое другого класса из другого файла. Я бы предпочел использовать для этого миксины в SCSS, но, к сожалению, CSS-модули все еще очень просты в этой области. Ключевое слово composes здесь почти никогда не работает для меня. Это огромный недостаток, с которым я лично столкнулся. Это может быть только моя вина за то, что я не использовал его правильно, но это не сработало даже для настоящего случая.

Персональный проект

Я использовал SCSS в качестве своей следующей попытки поработать со стилями для React. К счастью, это сработало. Сравнение SCSS с модулями CSS дало мне хорошее понимание. Есть так много общего между ними. Здесь есть одна загвоздка в том, что я уже использовал SCSS, и мне это очень удобно, так как он похож на CSS, но обладает суперспособностями. Единственное, что мне нужно сделать вместе с Create React App, это то, что мне просто нужно установить еще одну зависимость, node-sass и ничего больше. Не трогайте конфиги веб-пакетов и не удаляйте приложение React JS из CRA.

Рассматривая возможности модулей CSS, я провел небольшое сравнение между модулями SCSS и CSS и обнаружил, что у меня больше всего возможностей в SCSS. Говоря о компоновке, которая является основной причиной, по которой моя команда выбрала модули CSS, мы можем использовать @mixin и @include в SCSS, и они работают очень хорошо. Я не видел, чтобы модули CSS взаимодействовали с JavaScript, поэтому то же самое с SCSS — никакого взаимодействия с частью JavaScript. Циклы и включения с функциями являются уникальными для SCSS, поэтому я подумал о том, чтобы продолжить работу с SCSS для моего личного проекта и нового проекта в моем офисе.

Мощный?

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

SCSS Wins: углубленный анализ

Я люблю SCSS из-за функций, которые он предлагает. Во-первых, он очень похож на CSS. Вам не нужно изучать что-то новое, чтобы понять SCSS. Если вы знаете CSS, вы, вероятно, знаете Sass. Sass имеет два разных синтаксиса: сам Sass и SCSS, который используется чаще. Синтаксис SCSS совместим с CSS, поэтому вам просто нужно переименовать файл .css в .scss . Конечно, делая это, вы не используете ни одну из сверхспособностей и способностей, которые предоставляет Sass, но, по крайней мере, вы понимаете, что вам не нужно тратить часы и часы, чтобы начать использовать Sass. С этой отправной точки вы сможете изучать синтаксис Sass по ходу работы.

 $blue: #004BB4; $ubuntu-font: 'Ubuntu', 'Arial', 'Helvetica', sans-serif; $nunito-font: 'Nunito', 'Arial', 'Helvetica', sans-serif; 

 h1 { font: $ubuntu-font; color: $blue; } a { font: $nunito-font; background-color: $blue; padding: 6px; } 

 <ul class="navbar"> <li><a href="">Item <span>1</span></a></li> <li><a href="">Item <span>2</span></a></li> <li><a href="">Item <span>3</span></a></li> <li><a href="">Item <span>4</span></a></li> <li><a href="">Item <span>5</span></a></li> </ul> 

 .navbar { font: $ubuntu-font; color: $blue; li { margin-left: 1rem; a { padding: 5px; font-size: 1.5rem; span { font-weight: 600; } } } }