Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

CSS Modules в React | OdessaFrontend Meetup #4

74 views

Published on

Что такое CSS Modules, для чего они нужны и чем могут помочь при разработке приложений на React. Сергей Котерняк объясняет, почему выбор подхода по написанию стилей — это важно и какие существуют альтернативные подходы — BEM, Inline Styles, CSS in JS.

Published in: Technology
  • Be the first to comment

  • Be the first to like this

CSS Modules в React | OdessaFrontend Meetup #4

  1. 1. Котерняк Сергей Front-end dev. at Heartpace
  2. 2. Стили в React / CSS-Modules
  3. 3. Мы поговорим о: 1. Важности выбора подхода по написанию стилей 2. Самых популярных подходах и решениях 3. Css-modules. Почему они и как это работает
  4. 4. Стили - это вообще важно?
  5. 5. 1. Архитектура приложения 2. Выбор инструментов для разработки 3. Удобство разработки 4. Скорость решения задач
  6. 6. Самые популярные подходы и решения
  7. 7. CSS - доступны все нативные свойства - легко использовать пре/постпроцессоры - удобно подключать autoprefixer - легко начать пользоваться - противоречит компонентному подходу - глобальная область видимости - проблемы с названием классов
  8. 8. - структурированное наименования элементов - доступны все плюсы CSS - низкий порог входа новых или неопытных сотрудников (для стилей) BEM - глобальная область видимости - монструозные классы
  9. 9. Inline Styles - независимые компоненты - локальная область видимости - поддержка Facebook? - отсутствие нормальной возможности работать с псевдоклассами, псевдоэлементами и медиазапросами - проблемы с autoprefixer - невозможность переопределять стили по более сложным селекторам - возможность влиять на глобальные стили
  10. 10. CSS in JS - независимые компоненты - локальная область видимости - нет ограничений по использованию стилей - высокий порог входа - назад в будущее (все в одном файле) - очень много решений - веб-стандарты более надежны
  11. 11. Radium
  12. 12. Aphrodite
  13. 13. CSS Modules
  14. 14. CSS Modules - что ты такое?(с)
  15. 15. Кратко это звучит так: css-файлы, в которых все классы и анимации по умолчанию находятся в локальной области видимости.
  16. 16. Локальная и глобальная область видимости
  17. 17. Удобная структура для написания компонентов
  18. 18. Это также просто, как если бы мы писали на Angular
  19. 19. Возможность использовать пре/постпроцессоров, автопрефиксера, анимаций, псевдо*
  20. 20. Спасибо

×