Это будет довольно короткая статья с некоторыми мыслями о полемике вокруг CSS в JS. Марк Далглиш отлично поработал, написав пару дней назад на эту тему: Единый язык стилей . Если вы еще не читали эту статью, прочтите ее, это отличный обзор плюсов и минусов (в основном плюсов) написания CSS внутри кода JavaScript. Мои опасения по поводу CSS в JS Марк Далглиш проделал большую работу, подчеркнув множество преимуществ использования CSS в подходе JS, поэтому я пользуюсь случаем, чтобы..

Я пишу приложения и компоненты React уже около 4 лет, и я использовал несколько «решений» стилей: CSS-модули, Glamorous, Glamour, Emotion, Styled-Components, встроенные style атрибуты и нестандартные -box import './styles.css' метод. Все они отстой. Отладка - отстой Откуда, черт возьми, взялось это хешированное имя класса / атрибут данных? В некоторых библиотеках есть конфигурации или плагины веб-пакетов, которые (немного) проясняют эти имена, но вам лучше настроить их..

Введение в единицы измерения CSS - vh, vw, em, rem,%, px и другие! Мне всегда было сложно найти правильные единицы для использования при стилизации CSS, а также то, как они соотносятся друг с другом. Надеюсь, эта статья поможет вам немного лучше понять это. 1. Процент -% Когда вы определяете значение элемента CSS в процентах, он изменяет его размер до процента, определенного относительно его родительского элемента. Итак, если я определю поле как 50% Теперь, если я..

Там! Было ли когда-нибудь в вашей карьере время, когда вы пытались перезаписать стили Bootstrap / Foundation / что-то еще по мере необходимости? Здесь, в Brightcove 📹, мы в настоящее время используем Emotion 👩‍🎤 CSS-in-JS, CSS Grid, React и т. Д. Для восстановления одного из наших модулей. Неожиданно и странно, что только в производственной среде стили Emotion не перезаписывали стили нашей библиотеки компонентов (построенные с использованием модулей CSS и flexbox) по мере необходимости...

Styler - это утилита с нулевой зависимостью стиля в javascript. Styler включает в себя несколько полезных и удобных для разработчиков инструментов. Этот инструмент позволяет как разрабатывать вложенные стилевые объекты, так и взламывать для создания новых стилевых инструментов. Перед этим руководством вам необходимо прочитать о Styler: Styler - это новый способ стилизации Javascript! Пример сложного styleObject: { "#calendar":{ "&_line2":{..

Одна из самых больших проблем, с которыми я сталкиваюсь при работе с React, - это стилизация. Тенденции менялись снова и снова, но у меня никогда не было ощущения, что библиотеки действительно решают проблему стилизации. Давайте посмотрим на очень популярную библиотеку css-in-js, styled-components. const Button = styled.a` border-radius: 3px; ${props => props.primary && css` background: ${theme.primary}; `} ${props => props.size === 'small' && css`..