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.

of

CSS Modules в React | Odessa Frontend Meetup #4 Slide 1 CSS Modules в React | Odessa Frontend Meetup #4 Slide 2 CSS Modules в React | Odessa Frontend Meetup #4 Slide 3 CSS Modules в React | Odessa Frontend Meetup #4 Slide 4 CSS Modules в React | Odessa Frontend Meetup #4 Slide 5 CSS Modules в React | Odessa Frontend Meetup #4 Slide 6 CSS Modules в React | Odessa Frontend Meetup #4 Slide 7 CSS Modules в React | Odessa Frontend Meetup #4 Slide 8 CSS Modules в React | Odessa Frontend Meetup #4 Slide 9 CSS Modules в React | Odessa Frontend Meetup #4 Slide 10 CSS Modules в React | Odessa Frontend Meetup #4 Slide 11 CSS Modules в React | Odessa Frontend Meetup #4 Slide 12 CSS Modules в React | Odessa Frontend Meetup #4 Slide 13 CSS Modules в React | Odessa Frontend Meetup #4 Slide 14 CSS Modules в React | Odessa Frontend Meetup #4 Slide 15 CSS Modules в React | Odessa Frontend Meetup #4 Slide 16 CSS Modules в React | Odessa Frontend Meetup #4 Slide 17 CSS Modules в React | Odessa Frontend Meetup #4 Slide 18 CSS Modules в React | Odessa Frontend Meetup #4 Slide 19 CSS Modules в React | Odessa Frontend Meetup #4 Slide 20 CSS Modules в React | Odessa Frontend Meetup #4 Slide 21 CSS Modules в React | Odessa Frontend Meetup #4 Slide 22 CSS Modules в React | Odessa Frontend Meetup #4 Slide 23 CSS Modules в React | Odessa Frontend Meetup #4 Slide 24 CSS Modules в React | Odessa Frontend Meetup #4 Slide 25 CSS Modules в React | Odessa Frontend Meetup #4 Slide 26 CSS Modules в React | Odessa Frontend Meetup #4 Slide 27 CSS Modules в React | Odessa Frontend Meetup #4 Slide 28 CSS Modules в React | Odessa Frontend Meetup #4 Slide 29 CSS Modules в React | Odessa Frontend Meetup #4 Slide 30 CSS Modules в React | Odessa Frontend Meetup #4 Slide 31 CSS Modules в React | Odessa Frontend Meetup #4 Slide 32 CSS Modules в React | Odessa Frontend Meetup #4 Slide 33 CSS Modules в React | Odessa Frontend Meetup #4 Slide 34 CSS Modules в React | Odessa Frontend Meetup #4 Slide 35 CSS Modules в React | Odessa Frontend Meetup #4 Slide 36 CSS Modules в React | Odessa Frontend Meetup #4 Slide 37 CSS Modules в React | Odessa Frontend Meetup #4 Slide 38 CSS Modules в React | Odessa Frontend Meetup #4 Slide 39 CSS Modules в React | Odessa Frontend Meetup #4 Slide 40 CSS Modules в React | Odessa Frontend Meetup #4 Slide 41
Upcoming SlideShare
What to Upload to SlideShare
Next
Download to read offline and view in fullscreen.

0 Likes

Share

Download to read offline

CSS Modules в React | Odessa Frontend Meetup #4

Download to read offline

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

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all
  • Be the first to like this

CSS Modules в React | Odessa Frontend 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. Спасибо

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

Views

Total views

173

On Slideshare

0

From embeds

0

Number of embeds

0

Actions

Downloads

3

Shares

0

Comments

0

Likes

0

×