Что использовать для стайлинга 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 Модули .

Похожие

Как настроить среду разработки Python в Windows
... примерах я загружаю Python 3.2.3. Запустите установщик и дайте ему установить
Недостаточно просто хотеть. Какова мотивация, чтобы похудеть? • Блог Диеты OXY365
Эти вопросы звучат знакомо? Наизусть вы также знаете самые популярные, мотивационные советы в стиле «просто хотите» или «хотите иметь возможность», которые должны быть универсально применимы даже в отношении потери веса. Вы пытались обратиться к ним, но в конечном итоге это подорвало вашу веру в свои способности и понизило самооценку, когда вы через некоторое время отпустили. Но вы видите, что другие преуспевают и задаются вопросом, в чем секрет их успеха? Вы приходите к выводу, что
Clickbait - что это? Сейчас объясняю
Это тенденция в польском интернете, а именно пользователи Интернета заново открыли слово «кликбэйт». Слово «клик-приманка» как термин для практики онлайн-порталов функционирует в космосе в течение длительного времени, но лишь недавно оно стало предметом массового автоэротизма, комментирующего практически в каждом месте сети. Мое чувство паука обычно не разочаровывает меня, но, чтобы быть уверенным, что я проверил и согласился, очевидно, что-то уместно.
Как создавать реалистичные текстовые сообщения на экране
За последние несколько лет зрители воспринимали на экране текстовые сообщения, которые всплывали над кадром персонажа, держащего телефон. Прежде чем сообщения стали появляться на экране в одиночку, создатели фильма рассчитывали показать кадры телефона . Техника была громоздкой и визуально не интересной. Прежде чем идти дальше, вот отличный взгляд на историю текстового сообщения на экране от
Основы браузера Brave - что он делает, чем он отличается от конкурентов
Браузерные браузеры пытаются вычеркнуть из жизни, вычеркивая нишу, которой не пользуются обычные подозреваемые. Храбрый является одним из тех браузеров. Brave привлекли больше внимания, чем большинство новых браузеров, отчасти потому, что соучредитель был одним из тех, кто запустил Firefox в Mozilla, отчасти из-за его очень необычной - некоторые говорят, паразитической - бизнес-модели. Эта модель, которая основывается на вскрытии каждого сайта каждой рекламы, а затем заменяет
Дешевый строящийся дом или квартира от застройщика?
Многие люди сталкиваются с дилеммой: выбрать строящийся дешевый дом или купить квартиру у застройщика. Конечно, оба варианта имеют свои плюсы и минусы. Стоимость строительства дома зависит от многих факторов. Однако, как правило, с сопоставимой площадью, это более дешевый вариант. Главный вопрос, есть ли у нас так много времени, чтобы с этим столкнуться. Как снизить стоимость строительства дома?
КАК ПОДПИСАТЬ ВЕЩИ РЕБЕНКА ДЛЯ ДОШКОЛЬНИКА И ЧТО?
Как подписать вещи вашего ребенка в детский сад, детскую кроватку или школу? Многие родители уже нашли ответ на этот сложный вопрос. В конце концов, сентябрь давно закончился. Однако сегодня я хотел бы представить вам интересное и совершенно инновационное решение, которое наверняка оценят многие родители, потому что у него много применений, но это момент. Подписание вещей ребенка часто является необходимостью для родителей , и это обязательное требование, которым ребенок
Криптовалютный эфир взлетел на 9% после того, как чиновник SEC заявил, что это не безопасность
Вторая по величине криптовалюта в мире выросла в четверг после ключевого чиновника Комиссии по ценным бумагам и биржам дал понять что в глазах агентства это не безопасность. Цифровая валюта эфир вырос на 8,8 процента до максимума в 520,68 доллара, сообщает CoinDesk. Его цена боролась
Youtube Music и YouTube Premium прибывают в Италию. Что они и как они работают
Музыка Youtube прибыла в Италию. Мы находимся перед сервисом потоковой передачи музыки, который Google предлагает в качестве альтернативы Spotify и Apple Music, но одно отличие очевидно: есть также видео и контент, который можно найти только на Youtube, например, ремиксы, выступления. жить и чехлы. Сегодня многие люди слушают музыку на Youtube, но приложение и смартфон должны оставаться активными, чтобы разрешить воспроизведение: появление Youtube Music превратит приложение
Что такое диаграмма профиля в UML?
Как язык моделирования общего назначения, UML обеспечивает стабильную основу для широкого спектра требований. Он не определен для конкретных областей применения или для какой-либо конкретной технологии. Однако в некоторых случаях UML является слишком общим, и его использование требует значительных усилий. В таких случаях выгодно использовать язык, оптимизированный для данной области и, следовательно, предлагающий специальные концепции. Профильная диаграмма, своего рода структурная диаграмма
TIM SA Мы отправляем продукцию в течение 24 часов
предлагают 198 тысяч продукты расширенная клиентская панель индивидуальные условия ценообразования Смотрите детали предложить 75 тысяч продукты отслеживание груза история заказов и счета Смотрите детали Что вы получаете, делая покупки в TIM SA? Самый широкий

Комментарии

Потому что кто сказал, что ты должен сдуть только один раз?
Потому что кто сказал, что ты должен сдуть только один раз? Так что время уникальное, единственное в своем роде, и о нем стоит помнить. Мы рекомендуем закрыть воспоминания в книге. Во-первых. На день рождения! Наша персонализированная книга - подарок к первому дню рождения Яши (напечатан
В AppStore доступно приложение Legimi - означает ли отсутствие информации на сайте, что его нельзя использовать для свободного чтения?
В AppStore доступно приложение Legimi - означает ли отсутствие информации на сайте, что его нельзя использовать для свободного чтения? И все же это не телефон или планшет, это естественное средство для чтения электронных книг, только читатель. Не все с Легими поддерживает. Короче говоря, у вас есть Kindle - у вас есть проблемы .
Большинство пользователей склонны использовать один браузер и придерживаться его в качестве привычного вида игровой площадки, но не упускают ли они лучшее из того, что может предложить Интернет?
Большинство пользователей склонны использовать один браузер и придерживаться его в качестве привычного вида игровой площадки, но не упускают ли они лучшее из того, что может предложить Интернет? Мы уже прошли тот момент, когда вам приходится платить за браузер, и, за исключением Internet Explorer, все, на что мы смотрим, работает на разных вычислительных платформах. Это не тесты или обзоры как таковые; мы просто используем самые современные на данный момент браузеры, чтобы указать,
Скажи пару слов о себе - что ты делаешь, что ты делаешь?
Скажи пару слов о себе - что ты делаешь, что ты делаешь? Сначала я начну с одного « Привет! Да, ты за монитором! Поздравляем с выбором сайта, который вы сделали! " Самое неприятное - это писать (рассказывать) о себе. Я верю, что один человек - то, что другие видят в этом. Некоторые говорят, что я один из лучших профессионалов в сфере SEO / SEM в Болгарии. Я думаю, что другие ненавистники - бессердечный, недобросовестный
Что вы думаете о новом предложении Plus?
Что вы думаете о новом предложении Plus? Правила проведения акции «Стартеры в Тарифе Плюс Гибкая на Карте» Мы также рекомендуем: Большие изменения в плюше на карту - бесплатный
Принимая решение о такой процедуре, вы должны спросить себя - поймет ли наш гость, что означает наша иконка и к какому контенту она приводит?
Принимая решение о такой процедуре, вы должны спросить себя - поймет ли наш гость, что означает наша иконка и к какому контенту она приводит? Если у нас есть сомнения, лучше отказаться от такого изменения. Хорошей практикой является объединение значка с названием ссылки. Благодаря этому мы не оставим Пользователю сомнения в том, куда он пойдет после нажатия на ссылку. Кроме того - на крупных веб-сайтах пользователи часто используют системный поиск содержимого на веб-сайте (CTRL + F в Windows)
Что такое страница высокого качества?
Что такое страница высокого качества? Это визуально привлекательно и в то же время очень полезно; Имеет ценную информацию и дает ответы на потребности клиента; Это внушает доверие клиента и генерирует «продажи»; Он технически совершенен, безопасен и оптимизирован. Как вы получаете качественный сайт? Прежде всего, работа с опытными специалистами; Проверьте портфолио подрядчика, его рекомендации
Что вы должны сделать, чтобы обеспечить безопасность в Интернете?
Что вы должны сделать, чтобы обеспечить безопасность в Интернете? В этом случае лучший способ защитить себя от вредоносных сайтов - это проверить строку местоположения вашего веб-браузера и прочитать полное имя хоста веб-сайта, которое там отображается. Посмотрите на адресную строку выше. Вы должны увидеть «https://www.wordfence.com/….». При посещении любого веб-сайта, с которым вы планируете обмениваться конфиденциальными данными, проверьте полное имя хоста после «https:
«Сама суть письма заключается в том, что это выразительный и личный выход, так стоит ли нам вообще его ограничивать?
«Сама суть письма заключается в том, что это выразительный и личный выход, так стоит ли нам вообще его ограничивать?» - говорит Элла Слейтер в другом кусок для Хранителя. «Некоторые утверждают, что творческий потенциал ребенка стимулируется изучением продвинутого словарного запаса, но на самом деле есть разница в том, что ему позволяют углубляться в мир фантастических слов
Что такое вспышка невидимого текста (FOIT)?
Что такое вспышка невидимого текста (FOIT)? Наиболее распространенный способ использования настраиваемого веб-шрифта - указать шрифты, используемые в объявлении CSS @ font-face, и оставить браузер по умолчанию. Это не идеально. Поскольку информация о шрифтах находится в CSS, браузеры по умолчанию откладывают загрузку шрифтов до тех пор, пока CSS не будет проанализирован. Это не все. Как Зак Кожевник совершенно ясно
Строящийся дешевый дом - что это?
Строящийся дешевый дом - что это? Здесь стоит вспомнить, что они характеризуют проекты дешевых строящихся домов , Предполагая, что мы уже приобрели участок и произвели соответствующие измерения, мы должны выбрать технологию строительства и команду, которая будет выполнять работу. Самый дешевый вариант - построить каркасный дом. Есть несколько систем на выбор: скандинавская, канадская и немецкая, которые

Вы можете быть удивлены - я не могу просто использовать CSS без каких-либо специальных инструментов?
Препроцессор?
Постпроцессор?
Методология?
Какова мотивация, чтобы похудеть?
Но вы видите, что другие преуспевают и задаются вопросом, в чем секрет их успеха?
Как снизить стоимость строительства дома?
КАК ПОДПИСАТЬ ВЕЩИ РЕБЕНКА ДЛЯ ДОШКОЛЬНИКА И ЧТО?
Как подписать вещи вашего ребенка в детский сад, детскую кроватку или школу?
Потому что кто сказал, что ты должен сдуть только один раз?