SlideShare a Scribd company logo

CSS Modules в React | Odessa Frontend Meetup #4

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

1 of 41
Download to read offline
Котерняк Сергей
Front-end dev. at Heartpace
Стили в React / CSS-Modules
Мы поговорим о:
1. Важности выбора подхода по написанию стилей
2. Самых популярных подходах и решениях
3. Css-modules. Почему они и как это работает
CSS Modules в React | Odessa Frontend Meetup #4
CSS Modules в React | Odessa Frontend Meetup #4
Стили - это вообще важно?

Recommended

Axure по для создания прототипов веб-сайтов
Axure   по для создания прототипов веб-сайтовAxure   по для создания прототипов веб-сайтов
Axure по для создания прототипов веб-сайтовSoftline
 
Разработка прототипов на Axure
Разработка прототипов на AxureРазработка прототипов на Axure
Разработка прототипов на AxureSoftline
 
Презентация по курсу «Проектирования в Axure»
Презентация по курсу  «Проектирования в Axure» Презентация по курсу  «Проектирования в Axure»
Презентация по курсу «Проектирования в Axure» Ekaterina Mironova
 
01 - Практика UML. Нужен ли UML?
01 - Практика UML. Нужен ли UML?01 - Практика UML. Нужен ли UML?
01 - Практика UML. Нужен ли UML?Roman Brovko
 
геймификация
геймификациягеймификация
геймификацияWebSoft
 
Вёрстка по методологии БЭМ
Вёрстка по методологии БЭМВёрстка по методологии БЭМ
Вёрстка по методологии БЭМversusbassz
 
модуль «геймификация» Webtutor
модуль «геймификация» Webtutorмодуль «геймификация» Webtutor
модуль «геймификация» WebtutorWebSoft
 
03 - Практика UML. Прецеденты
03 - Практика UML. Прецеденты03 - Практика UML. Прецеденты
03 - Практика UML. ПрецедентыRoman Brovko
 

More Related Content

What's hot

04 - Практика UML. Описание прецедентов
04 - Практика UML. Описание прецедентов04 - Практика UML. Описание прецедентов
04 - Практика UML. Описание прецедентовRoman Brovko
 
02 - Практика UML. Уровни приложения
02 - Практика UML. Уровни приложения02 - Практика UML. Уровни приложения
02 - Практика UML. Уровни приложенияRoman Brovko
 
Создание темы «с нуля»
Создание темы «с нуля»Создание темы «с нуля»
Создание темы «с нуля»Artem Shymko
 
12 - Практика UML. Создание wireframe
12 - Практика UML. Создание wireframe12 - Практика UML. Создание wireframe
12 - Практика UML. Создание wireframeRoman Brovko
 
Методологии верстки
Методологии версткиМетодологии верстки
Методологии версткиElizaveta Selivanova
 
Designing UI - past and future
Designing UI - past and futureDesigning UI - past and future
Designing UI - past and futureallileja
 
designing UI, workshop, first day
designing UI, workshop, first daydesigning UI, workshop, first day
designing UI, workshop, first dayallileja
 
Управление требованиями в Devprom ALM 3.2
Управление требованиями в Devprom ALM 3.2Управление требованиями в Devprom ALM 3.2
Управление требованиями в Devprom ALM 3.2Dmitry Lobasev
 

What's hot (8)

04 - Практика UML. Описание прецедентов
04 - Практика UML. Описание прецедентов04 - Практика UML. Описание прецедентов
04 - Практика UML. Описание прецедентов
 
02 - Практика UML. Уровни приложения
02 - Практика UML. Уровни приложения02 - Практика UML. Уровни приложения
02 - Практика UML. Уровни приложения
 
Создание темы «с нуля»
Создание темы «с нуля»Создание темы «с нуля»
Создание темы «с нуля»
 
12 - Практика UML. Создание wireframe
12 - Практика UML. Создание wireframe12 - Практика UML. Создание wireframe
12 - Практика UML. Создание wireframe
 
Методологии верстки
Методологии версткиМетодологии верстки
Методологии верстки
 
Designing UI - past and future
Designing UI - past and futureDesigning UI - past and future
Designing UI - past and future
 
designing UI, workshop, first day
designing UI, workshop, first daydesigning UI, workshop, first day
designing UI, workshop, first day
 
Управление требованиями в Devprom ALM 3.2
Управление требованиями в Devprom ALM 3.2Управление требованиями в Devprom ALM 3.2
Управление требованиями в Devprom ALM 3.2
 

Similar to CSS Modules в React | Odessa Frontend Meetup #4

A вы верите в систематизацию
A вы верите в систематизацию A вы верите в систематизацию
A вы верите в систематизацию Irina Levina
 
Современная верстка с адекватными трудозатратами Максим Тимохин, технолог, И...
 Современная верстка с адекватными трудозатратами Максим Тимохин, технолог, И... Современная верстка с адекватными трудозатратами Максим Тимохин, технолог, И...
Современная верстка с адекватными трудозатратами Максим Тимохин, технолог, И...Тарасов Константин
 
Drupal theming
Drupal themingDrupal theming
Drupal themingGleb K
 
Создание веб-сайта. Курс молодого бойца
Создание веб-сайта. Курс молодого бойцаСоздание веб-сайта. Курс молодого бойца
Создание веб-сайта. Курс молодого бойцаAnton Cherepov
 
Виталий Харисов "История создания БЭМ. Кратко, сбивчиво и неполно"
Виталий Харисов "История создания БЭМ. Кратко, сбивчиво и неполно"Виталий Харисов "История создания БЭМ. Кратко, сбивчиво и неполно"
Виталий Харисов "История создания БЭМ. Кратко, сбивчиво и неполно"Yandex
 
Adn@it'summer - Как ленивые фронтенды себе жизнь упрощают
Adn@it'summer - Как ленивые фронтенды себе жизнь упрощают Adn@it'summer - Как ленивые фронтенды себе жизнь упрощают
Adn@it'summer - Как ленивые фронтенды себе жизнь упрощают ADN Digital Studio
 
Спецкурс 2014, занятие 9 (2 часть). Code conventions and best practices
Спецкурс 2014, занятие 9 (2 часть). Code conventions and best practicesСпецкурс 2014, занятие 9 (2 часть). Code conventions and best practices
Спецкурс 2014, занятие 9 (2 часть). Code conventions and best practices7bits
 
Презентация Игоря Сазонова на IT Global Meetup #5
Презентация Игоря Сазонова на IT Global Meetup #5Презентация Игоря Сазонова на IT Global Meetup #5
Презентация Игоря Сазонова на IT Global Meetup #5Lilia Smirnova
 
Moodle с точки зрения пользователя и программиста
Moodle с точки зрения пользователя и программистаMoodle с точки зрения пользователя и программиста
Moodle с точки зрения пользователя и программистаIgor Sazonov
 
Презентация модуля BrandMaker web2print
Презентация модуля BrandMaker web2printПрезентация модуля BrandMaker web2print
Презентация модуля BrandMaker web2printBrandMaker Russia
 
Accessibility meets structure
Accessibility meets structureAccessibility meets structure
Accessibility meets structureLara Simonova
 
как стать хорошим веб технологом. нарек мкртчян. зал 4
как стать хорошим веб технологом. нарек мкртчян. зал 4как стать хорошим веб технологом. нарек мкртчян. зал 4
как стать хорошим веб технологом. нарек мкртчян. зал 4rit2011
 
Зачем нужны постпроцессоры при живых препроцессорах — Алексей Иванов, JetStyle
Зачем нужны постпроцессоры при живых препроцессорах — Алексей Иванов, JetStyleЗачем нужны постпроцессоры при живых препроцессорах — Алексей Иванов, JetStyle
Зачем нужны постпроцессоры при живых препроцессорах — Алексей Иванов, JetStyleYandex
 
Eleanor CMS
Eleanor CMSEleanor CMS
Eleanor CMSSC3402
 
Bullshit on rails
Bullshit on railsBullshit on rails
Bullshit on railszykin-ilya
 
Виталий Харисов "Настоящее и будущее БЭМ"
Виталий Харисов "Настоящее и будущее БЭМ"Виталий Харисов "Настоящее и будущее БЭМ"
Виталий Харисов "Настоящее и будущее БЭМ"Yandex
 
Подходы к вертске
Подходы к вертскеПодходы к вертске
Подходы к вертскеAndrew Vdovichenko
 
Лекция #4. Каскадные таблицы стилей
Лекция #4. Каскадные таблицы стилейЛекция #4. Каскадные таблицы стилей
Лекция #4. Каскадные таблицы стилейЯковенко Кирилл
 
Жизнь в изоляции / Роман Дворнов (Avito)
Жизнь в изоляции / Роман Дворнов (Avito)Жизнь в изоляции / Роман Дворнов (Avito)
Жизнь в изоляции / Роман Дворнов (Avito)Ontico
 

Similar to CSS Modules в React | Odessa Frontend Meetup #4 (20)

A вы верите в систематизацию
A вы верите в систематизацию A вы верите в систематизацию
A вы верите в систематизацию
 
Современная верстка с адекватными трудозатратами Максим Тимохин, технолог, И...
 Современная верстка с адекватными трудозатратами Максим Тимохин, технолог, И... Современная верстка с адекватными трудозатратами Максим Тимохин, технолог, И...
Современная верстка с адекватными трудозатратами Максим Тимохин, технолог, И...
 
Drupal theming
Drupal themingDrupal theming
Drupal theming
 
Создание веб-сайта. Курс молодого бойца
Создание веб-сайта. Курс молодого бойцаСоздание веб-сайта. Курс молодого бойца
Создание веб-сайта. Курс молодого бойца
 
Виталий Харисов "История создания БЭМ. Кратко, сбивчиво и неполно"
Виталий Харисов "История создания БЭМ. Кратко, сбивчиво и неполно"Виталий Харисов "История создания БЭМ. Кратко, сбивчиво и неполно"
Виталий Харисов "История создания БЭМ. Кратко, сбивчиво и неполно"
 
Adn@it'summer - Как ленивые фронтенды себе жизнь упрощают
Adn@it'summer - Как ленивые фронтенды себе жизнь упрощают Adn@it'summer - Как ленивые фронтенды себе жизнь упрощают
Adn@it'summer - Как ленивые фронтенды себе жизнь упрощают
 
Спецкурс 2014, занятие 9 (2 часть). Code conventions and best practices
Спецкурс 2014, занятие 9 (2 часть). Code conventions and best practicesСпецкурс 2014, занятие 9 (2 часть). Code conventions and best practices
Спецкурс 2014, занятие 9 (2 часть). Code conventions and best practices
 
Презентация Игоря Сазонова на IT Global Meetup #5
Презентация Игоря Сазонова на IT Global Meetup #5Презентация Игоря Сазонова на IT Global Meetup #5
Презентация Игоря Сазонова на IT Global Meetup #5
 
Moodle с точки зрения пользователя и программиста
Moodle с точки зрения пользователя и программистаMoodle с точки зрения пользователя и программиста
Moodle с точки зрения пользователя и программиста
 
Презентация модуля BrandMaker web2print
Презентация модуля BrandMaker web2printПрезентация модуля BrandMaker web2print
Презентация модуля BrandMaker web2print
 
Accessibility meets structure
Accessibility meets structureAccessibility meets structure
Accessibility meets structure
 
Саммит2011_Коновалов
Саммит2011_КоноваловСаммит2011_Коновалов
Саммит2011_Коновалов
 
как стать хорошим веб технологом. нарек мкртчян. зал 4
как стать хорошим веб технологом. нарек мкртчян. зал 4как стать хорошим веб технологом. нарек мкртчян. зал 4
как стать хорошим веб технологом. нарек мкртчян. зал 4
 
Зачем нужны постпроцессоры при живых препроцессорах — Алексей Иванов, JetStyle
Зачем нужны постпроцессоры при живых препроцессорах — Алексей Иванов, JetStyleЗачем нужны постпроцессоры при живых препроцессорах — Алексей Иванов, JetStyle
Зачем нужны постпроцессоры при живых препроцессорах — Алексей Иванов, JetStyle
 
Eleanor CMS
Eleanor CMSEleanor CMS
Eleanor CMS
 
Bullshit on rails
Bullshit on railsBullshit on rails
Bullshit on rails
 
Виталий Харисов "Настоящее и будущее БЭМ"
Виталий Харисов "Настоящее и будущее БЭМ"Виталий Харисов "Настоящее и будущее БЭМ"
Виталий Харисов "Настоящее и будущее БЭМ"
 
Подходы к вертске
Подходы к вертскеПодходы к вертске
Подходы к вертске
 
Лекция #4. Каскадные таблицы стилей
Лекция #4. Каскадные таблицы стилейЛекция #4. Каскадные таблицы стилей
Лекция #4. Каскадные таблицы стилей
 
Жизнь в изоляции / Роман Дворнов (Avito)
Жизнь в изоляции / Роман Дворнов (Avito)Жизнь в изоляции / Роман Дворнов (Avito)
Жизнь в изоляции / Роман Дворнов (Avito)
 

More from OdessaFrontend

Викторина | Odessa Frontend Meetup #19
Викторина | Odessa Frontend Meetup #19Викторина | Odessa Frontend Meetup #19
Викторина | Odessa Frontend Meetup #19OdessaFrontend
 
Использование Recoil в React и React Native приложениях | Odessa Frontend Mee...
Использование Recoil в React и React Native приложениях | Odessa Frontend Mee...Использование Recoil в React и React Native приложениях | Odessa Frontend Mee...
Использование Recoil в React и React Native приложениях | Odessa Frontend Mee...OdessaFrontend
 
Великолепный Gatsby.js | Odessa Frontend Meetup #19
Великолепный Gatsby.js | Odessa Frontend Meetup #19Великолепный Gatsby.js | Odessa Frontend Meetup #19
Великолепный Gatsby.js | Odessa Frontend Meetup #19OdessaFrontend
 
Функциональное программирование с использованием библиотеки fp-ts | Odessa Fr...
Функциональное программирование с использованием библиотеки fp-ts | Odessa Fr...Функциональное программирование с использованием библиотеки fp-ts | Odessa Fr...
Функциональное программирование с использованием библиотеки fp-ts | Odessa Fr...OdessaFrontend
 
Canvas API как инструмент для работы с графикой | Odessa Frontend Meetup #18
Canvas API как инструмент для работы с графикой | Odessa Frontend Meetup #18Canvas API как инструмент для работы с графикой | Odessa Frontend Meetup #18
Canvas API как инструмент для работы с графикой | Odessa Frontend Meetup #18OdessaFrontend
 
Викторина | Odessa Frontend Meetup #17
Викторина | Odessa Frontend Meetup #17Викторина | Odessa Frontend Meetup #17
Викторина | Odessa Frontend Meetup #17OdessaFrontend
 
Антихрупкий TypeScript | Odessa Frontend Meetup #17
Антихрупкий TypeScript | Odessa Frontend Meetup #17Антихрупкий TypeScript | Odessa Frontend Meetup #17
Антихрупкий TypeScript | Odessa Frontend Meetup #17OdessaFrontend
 
Частые ошибки при разработке фронтенда | Odessa Frontend Meetup #17
Частые ошибки при разработке фронтенда | Odessa Frontend Meetup #17Частые ошибки при разработке фронтенда | Odessa Frontend Meetup #17
Частые ошибки при разработке фронтенда | Odessa Frontend Meetup #17OdessaFrontend
 
OAuth2 и OpenID Connect простым языком | Odessa Frontend Meetup #17
OAuth2 и OpenID Connect простым языком | Odessa Frontend Meetup #17OAuth2 и OpenID Connect простым языком | Odessa Frontend Meetup #17
OAuth2 и OpenID Connect простым языком | Odessa Frontend Meetup #17OdessaFrontend
 
Объекты в ECMAScript | Odessa Frontend Meetup #16
Объекты в ECMAScript | Odessa Frontend Meetup #16Объекты в ECMAScript | Odessa Frontend Meetup #16
Объекты в ECMAScript | Odessa Frontend Meetup #16OdessaFrontend
 
Фриланс как профессиональная деградация | Odessa Frontend Meetup #16
Фриланс как профессиональная деградация | Odessa Frontend Meetup #16Фриланс как профессиональная деградация | Odessa Frontend Meetup #16
Фриланс как профессиональная деградация | Odessa Frontend Meetup #16OdessaFrontend
 
Cлайдер на CSS | Odessa Frontend Meetup #16
Cлайдер на CSS | Odessa Frontend Meetup #16Cлайдер на CSS | Odessa Frontend Meetup #16
Cлайдер на CSS | Odessa Frontend Meetup #16OdessaFrontend
 
Современный станок верстальщика
Современный станок верстальщикаСовременный станок верстальщика
Современный станок верстальщикаOdessaFrontend
 
Викторина | Odessa Frontend Meetup #15
Викторина | Odessa Frontend Meetup #15Викторина | Odessa Frontend Meetup #15
Викторина | Odessa Frontend Meetup #15OdessaFrontend
 
DRY’им Vuex | Odessa Frontend Meetup #15
DRY’им Vuex | Odessa Frontend Meetup #15DRY’им Vuex | Odessa Frontend Meetup #15
DRY’им Vuex | Odessa Frontend Meetup #15OdessaFrontend
 
А/Б тестирование: Что? Как? Зачем? | Odessa Frontend Meetup #15
А/Б тестирование: Что? Как? Зачем? | Odessa Frontend Meetup #15А/Б тестирование: Что? Как? Зачем? | Odessa Frontend Meetup #15
А/Б тестирование: Что? Как? Зачем? | Odessa Frontend Meetup #15OdessaFrontend
 
Пощупать 3д в браузере | Odessa Frontend Meetup #15
Пощупать 3д в браузере | Odessa Frontend Meetup #15Пощупать 3д в браузере | Odessa Frontend Meetup #15
Пощупать 3д в браузере | Odessa Frontend Meetup #15OdessaFrontend
 
Викторина | Odessa Frontend Meetup #14
Викторина | Odessa Frontend Meetup #14Викторина | Odessa Frontend Meetup #14
Викторина | Odessa Frontend Meetup #14OdessaFrontend
 
Викторина | Odessa Frontend Meetup #13
Викторина | Odessa Frontend Meetup #13Викторина | Odessa Frontend Meetup #13
Викторина | Odessa Frontend Meetup #13OdessaFrontend
 
Структуры данных в JavaScript | Odessa Frontend Meetup #13
Структуры данных в JavaScript | Odessa Frontend Meetup #13Структуры данных в JavaScript | Odessa Frontend Meetup #13
Структуры данных в JavaScript | Odessa Frontend Meetup #13OdessaFrontend
 

More from OdessaFrontend (20)

Викторина | Odessa Frontend Meetup #19
Викторина | Odessa Frontend Meetup #19Викторина | Odessa Frontend Meetup #19
Викторина | Odessa Frontend Meetup #19
 
Использование Recoil в React и React Native приложениях | Odessa Frontend Mee...
Использование Recoil в React и React Native приложениях | Odessa Frontend Mee...Использование Recoil в React и React Native приложениях | Odessa Frontend Mee...
Использование Recoil в React и React Native приложениях | Odessa Frontend Mee...
 
Великолепный Gatsby.js | Odessa Frontend Meetup #19
Великолепный Gatsby.js | Odessa Frontend Meetup #19Великолепный Gatsby.js | Odessa Frontend Meetup #19
Великолепный Gatsby.js | Odessa Frontend Meetup #19
 
Функциональное программирование с использованием библиотеки fp-ts | Odessa Fr...
Функциональное программирование с использованием библиотеки fp-ts | Odessa Fr...Функциональное программирование с использованием библиотеки fp-ts | Odessa Fr...
Функциональное программирование с использованием библиотеки fp-ts | Odessa Fr...
 
Canvas API как инструмент для работы с графикой | Odessa Frontend Meetup #18
Canvas API как инструмент для работы с графикой | Odessa Frontend Meetup #18Canvas API как инструмент для работы с графикой | Odessa Frontend Meetup #18
Canvas API как инструмент для работы с графикой | Odessa Frontend Meetup #18
 
Викторина | Odessa Frontend Meetup #17
Викторина | Odessa Frontend Meetup #17Викторина | Odessa Frontend Meetup #17
Викторина | Odessa Frontend Meetup #17
 
Антихрупкий TypeScript | Odessa Frontend Meetup #17
Антихрупкий TypeScript | Odessa Frontend Meetup #17Антихрупкий TypeScript | Odessa Frontend Meetup #17
Антихрупкий TypeScript | Odessa Frontend Meetup #17
 
Частые ошибки при разработке фронтенда | Odessa Frontend Meetup #17
Частые ошибки при разработке фронтенда | Odessa Frontend Meetup #17Частые ошибки при разработке фронтенда | Odessa Frontend Meetup #17
Частые ошибки при разработке фронтенда | Odessa Frontend Meetup #17
 
OAuth2 и OpenID Connect простым языком | Odessa Frontend Meetup #17
OAuth2 и OpenID Connect простым языком | Odessa Frontend Meetup #17OAuth2 и OpenID Connect простым языком | Odessa Frontend Meetup #17
OAuth2 и OpenID Connect простым языком | Odessa Frontend Meetup #17
 
Объекты в ECMAScript | Odessa Frontend Meetup #16
Объекты в ECMAScript | Odessa Frontend Meetup #16Объекты в ECMAScript | Odessa Frontend Meetup #16
Объекты в ECMAScript | Odessa Frontend Meetup #16
 
Фриланс как профессиональная деградация | Odessa Frontend Meetup #16
Фриланс как профессиональная деградация | Odessa Frontend Meetup #16Фриланс как профессиональная деградация | Odessa Frontend Meetup #16
Фриланс как профессиональная деградация | Odessa Frontend Meetup #16
 
Cлайдер на CSS | Odessa Frontend Meetup #16
Cлайдер на CSS | Odessa Frontend Meetup #16Cлайдер на CSS | Odessa Frontend Meetup #16
Cлайдер на CSS | Odessa Frontend Meetup #16
 
Современный станок верстальщика
Современный станок верстальщикаСовременный станок верстальщика
Современный станок верстальщика
 
Викторина | Odessa Frontend Meetup #15
Викторина | Odessa Frontend Meetup #15Викторина | Odessa Frontend Meetup #15
Викторина | Odessa Frontend Meetup #15
 
DRY’им Vuex | Odessa Frontend Meetup #15
DRY’им Vuex | Odessa Frontend Meetup #15DRY’им Vuex | Odessa Frontend Meetup #15
DRY’им Vuex | Odessa Frontend Meetup #15
 
А/Б тестирование: Что? Как? Зачем? | Odessa Frontend Meetup #15
А/Б тестирование: Что? Как? Зачем? | Odessa Frontend Meetup #15А/Б тестирование: Что? Как? Зачем? | Odessa Frontend Meetup #15
А/Б тестирование: Что? Как? Зачем? | Odessa Frontend Meetup #15
 
Пощупать 3д в браузере | Odessa Frontend Meetup #15
Пощупать 3д в браузере | Odessa Frontend Meetup #15Пощупать 3д в браузере | Odessa Frontend Meetup #15
Пощупать 3д в браузере | Odessa Frontend Meetup #15
 
Викторина | Odessa Frontend Meetup #14
Викторина | Odessa Frontend Meetup #14Викторина | Odessa Frontend Meetup #14
Викторина | Odessa Frontend Meetup #14
 
Викторина | Odessa Frontend Meetup #13
Викторина | Odessa Frontend Meetup #13Викторина | Odessa Frontend Meetup #13
Викторина | Odessa Frontend Meetup #13
 
Структуры данных в JavaScript | Odessa Frontend Meetup #13
Структуры данных в JavaScript | Odessa Frontend Meetup #13Структуры данных в JavaScript | Odessa Frontend Meetup #13
Структуры данных в JavaScript | Odessa Frontend Meetup #13
 

CSS Modules в React | Odessa Frontend Meetup #4