Что использовать для стайлинга React?

1. Пример методологии: БЭМ
2. Пример препроцессора: SCSS
3. Пример постпроцессора: Autoprefixer

Если вы используете React, то в какой-то момент вы подумали о том, как стилизовать ваши компоненты.

Вы, вероятно, с оптимизмом подходили к поиску идеального подхода ... и потом пришли в ужас, когда врезались в эту стену инструментов стиля:

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

Еще хуже: речь не идет о выборе одного. Многие из этих инструментов могут использоваться вместе.

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

Прежде чем вы сможете найти идеальный инструмент (ы), вам необходимо понять, что они все делают и какие из них работают вместе.

Сначала мы разберем эти инструменты на четыре типа . Затем я объясню, что на самом деле делает каждый из этих типов.

Затем мы пройдемся по дереву решений, чтобы вы могли решить, какие инструменты использовать. Я перечислю плюсы / минусы каждого решения в дереве.

В заключение я расскажу, как можно комбинировать инструменты, и перечислю некоторые популярные комбинации.

Когда вы закончите чтение, вы будете уверены, что выбрали лучшие инструменты для стилизации вашего проекта.

Вы можете быть удивлены - я не могу просто использовать CSS без каких-либо специальных инструментов?

Конечно, ответ - да. Вы могли бы сделать это. На самом деле, если ваш проект крошечный, это может быть правильным подходом для вас. Вы даже можете просто вставить тег <style> вверху вашего index.html и поместить туда свои стили.

Рано или поздно, вот несколько проблем, с которыми вы можете столкнуться:

• Вам нужна кросс-браузерная поддержка, и вам не нравится писать все префиксы поставщиков ,
• У вас возникают проблемы с поиском и удалением неиспользованного CSS с течением времени. (Мертвый код)
• Правила CSS применяются к элементам способами, которые вы не ожидали. (Глобальное пространство имен)
• Вы хотите переменные, вложенность или состав.

Все вышеперечисленные проблемы легко решаются с помощью правильных инструментов.

Помните эту стену инструментов стиля? Чтобы лучше это понять, я разбил его на 4 категории: методологии, препроцессоры, постпроцессоры и помощники встроенного стиля.

Методологии - это руководства / инструкции по использованию CSS.

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

Пример методологии: БЭМ

BEM предлагает использовать определенный формат для имен классов: «блок, элемент, модификатор». БЭМ предлагает никогда не использовать вложенные селекторы.

, форма. кнопка {background -color: blue; } form__button {background -color: blue; }

Препроцессоры CSS - это инструменты, которые используют не-CSS язык и конвертируют его в CSS.

Большинство препроцессоров используют язык, похожий на CSS или его расширение.

Целью препроцессора является предоставление синтаксиса, который имеет больше функций, является более читабельным или требует меньше ввода.

Пример препроцессора: SCSS

SCSS является расширением CSS. CSS является действительным SCSS, но не наоборот.

Этот пример демонстрирует 2 общих функции SCSS: переменные и вложенность.

$ мех: оранжевый; .cat {background-color: $ fur; .paws {цвет: белый; }} .cat {background-color: orange; } .cat .paws {цвет: белый; }

Постпроцессоры CSS или просто «процессоры CSS» модифицируют CSS.

CSS in и CSS out могут показаться бессмысленными, но процессоры могут быть наиболее полезным типом инструмента, упомянутым здесь. Они могут быть объединены в цепочку, накладывая функции поверх функций. Когда вы настроите свой проект таким образом, вы можете начать с простого, а затем добавить больше процессоров позже, если / когда они вам понадобятся.

PostCSS это инструмент, который помогает вам объединять процессоры в цепочку - в документах PostCSS каждый процессор называется «плагином PostCSS».

Пример постпроцессора: Autoprefixer

Autoprefixer невероятно полезный процессор Использовать его не составит труда, если вам нужна кросс-браузерная поддержка.

Авторефиксатор добавляет префиксы поставщиков к вашему CSS, так что вам не нужно. Его можно использовать отдельно или в качестве плагина PostCSS.

.box {display: -webkit-box; дисплей: -webkit-flex; дисплей: -ms-flexbox; display: flex}

Inline style - это подход к стилю, который полностью избегает CSS. Для тех, кто считает, что форму и функцию следует указывать вместе как единое целое.

Хотя использование встроенных стилей имеет некоторые преимущества, оно также сразу же отбрасывает вас назад в других областях. Медиа-запросы а также псевдоклассы например, больше не доступны для вас.

Вот тут-то и вступают помощники встроенного стиля . Это инструменты, которые добавляют те функции, которые вам не хватало. радий В настоящее время самый популярный из таких инструментов.

Теперь, когда вы знаете, что такое все инструменты, вы можете начать думать о том, какие из них вы будете использовать.

Следуйте за деревом и собирайте инструменты, как вы идете. Ниже приводится дополнительная дискуссия, чтобы помочь вам принять решение.

Продолжайте читать для обсуждения на каждой вилке в дереве:

Встроенные стили?
Если вы выбираете YES для встроенных стилей, выберите помощника встроенного стиля, и все готово. Подход «встроенного стиля» не работает ни с какими препроцессорами, постпроцессорами или методологиями.

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

Постпроцессор?
Autoprefixer легкая задача для кросс-браузерной совместимости. cssnext Это хорошо, если вы решили не использовать препроцессор, потому что он предоставляет некоторые из тех же функций. использование PostCSS связать вместе ваши постпроцессоры. Слишком много PostCSS плагины для меня, чтобы перечислить их всех здесь.

Методология?
Мои исследования показывают, что BEM это самая популярная методология, поэтому сначала посмотрите на нее. Не используйте методологию, если вы используете CSS Модули , Методологии предлагают соглашения об именах классов, а CSS-модули выбирают имена классов за вас.

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

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

Вот несколько комбинаций, которые имеют смысл, а также причины, по которым вы можете выбрать эту комбинацию.

1. SCSS + Autoprefixer : Вам нужны зрелые, стабильные инструменты. Глобальные стили в порядке.
2. SCSS + Autoprefixer + BEM : То же, что и выше, плюс вы хотите соблюдать соглашение для имен классов и организации.
3. PostCSS w / Autoprefixer & cssnext : Вам нужны современные инструменты. Вы хотите написать «чистый» CSS, но с функциями, которые еще не поддерживаются всеми браузерами. Глобальные правила CSS в порядке.
4. Модули CSS + PostCSS с автоматическим исправлением : Вам нужны современные инструменты. Вы хотите написать «чистый» CSS без каких-либо дополнительных функций, но правила CSS должны быть локальными.
5. Модули CSS + PostCSS w / Autoprefixer & cssnext : То же, что и выше, но вы также хотите иметь возможность использовать новые функции CSS, прежде чем они будут хорошо поддерживаться всеми вашими браузерами.
6. Встроенные стили + Radium : вы хотите написать свои стили в JavaScript, в том же файле, что и ваши компоненты React.

В некоторых комбинациях выше я упоминаю, что «правила CSS локальны». Это то, что делают CSS-модули. Чтобы узнать, что я имею в виду, прочитайте визуальное введение в модули CSS статья.

Вот некоторые из самых популярных инструментов, основанных на звездах GitHub. Этот график также показывает, сколько лет каждому инструменту.

Меньше имеет больше звезд - но PostCSS быстро растет.

Примечание. В своем исследовании я обнаружил, что многие разработчики React рекомендуют SCSS, Stylus или PostCSS, но ни один из них не рекомендует Less. Несмотря на свою общую популярность, Less не кажется популярным среди разработчиков React.

Я не написал бы обо всех этих различных инструментах, если бы думал, что есть один, лучший способ.

Некоторые люди предпочитают придерживаться проверенных, зрелых инструментов . Если это так, вы всегда можете использовать Less или SCSS и двигаться дальше. Многим разработчикам нравится использовать один инструмент и их не волнуют глобальные стили.

Я лично более взволнован новыми, более современными инструментами , которые набирают силу: PostCSS , cssnext и CSS Модули .

Похожие

Комментарии