CSS Modules в React | Odessa Frontend Meetup #4
0 likes197 views
Документ обсуждает стили в React с акцентом на css-modules и популярные подходы к их написанию. Рассматриваются плюсы и минусы различных методов, таких как BEM, inline styles и css-in-js. Основное внимание уделяется важности архитектуры приложения и удобству разработки при использовании компонентов.
CSS Modules в React | Odessa Frontend Meetup #4
- 1. Котерняк Сергей Front-end dev. at Heartpace
- 2. Стили в React / CSS-Modules
- 3. Мы поговорим о: 1. Важности выбора подхода по написанию стилей 2. Самых популярных подходах и решениях 3. Css-modules. Почему они и как это работает
- 6. Стили - это вообще важно?
- 7. 1. Архитектура приложения 2. Выбор инструментов для разработки 3. Удобство разработки 4. Скорость решения задач
- 8. Самые популярные подходы и решения
- 10. CSS - доступны все нативные свойства - легко использовать пре/постпроцессоры - удобно подключать autoprefixer - легко начать пользоваться - противоречит компонентному подходу - глобальная область видимости - проблемы с названием классов
- 12. - структурированное наименования элементов - доступны все плюсы CSS - низкий порог входа новых или неопытных сотрудников (для стилей) BEM - глобальная область видимости - монструозные классы
- 15. Inline Styles - независимые компоненты - локальная область видимости - поддержка Facebook? - отсутствие нормальной возможности работать с псевдоклассами, псевдоэлементами и медиазапросами - проблемы с autoprefixer - невозможность переопределять стили по более сложным селекторам - возможность влиять на глобальные стили
- 17. CSS in JS - независимые компоненты - локальная область видимости - нет ограничений по использованию стилей - высокий порог входа - назад в будущее (все в одном файле) - очень много решений - веб-стандарты более надежны
- 18. Radium
- 21. Aphrodite
- 24. CSS Modules
- 25. CSS Modules - что ты такое?(с)
- 26. Кратко это звучит так: css-файлы, в которых все классы и анимации по умолчанию находятся в локальной области видимости.
- 27. Локальная и глобальная область видимости
- 30. Удобная структура для написания компонентов
- 33. Это также просто, как если бы мы писали на Angular
- 37. Возможность использовать пре/постпроцессоров, автопрефиксера, анимаций, псевдо*
- 41. Спасибо