Igor Suvorov
Программист-предприниматель
Atomic Design & CSS-in-JS
Занятие 17
6 May 2018
Профессия
Node.js & React.js developer
продвинутый курс
- CSS-in-JS
- Styled Components
- Emotion
- Atomic Design Methodology
План
1
2
CSS-in-JS
Inline styles in React
Classic CSS vs React inline styles
Classic CSS
+ Browser optimization
+ Cascades
+:hover, :first-child, :before
+ отладка через браузер
React inline styles
+ Realtime variables
+ JS extends
+ No any dependency
? (ReactNative)
CSS-in-JS
+ BOTH
Libs Zoo
JSS
- 3500 stars
- 200 forks
- 12 Oct 2014
JSS
3
Styled Components
Styled Components
- 16k stars
- 900 forks
- 16 Aug 2016
Как использовать?
Как использовать?
Как использовать?
Как использовать?
Как использовать?
Как использовать?
4
Emotion JS
Emotion JS
- 3500 stars
- 200 forks
- 27 May 2017
Как использовать?
Как использовать?
Как использовать?
Как использовать?
Как использовать?
5
Atomic Design Methodology
Атомарный дизайн | Брэд Фрост
Суть Atomic Design - разбить интерфейсы на фундаментальные блоки и комбинировать их, постепенно наращивая сложность
Методологии
- CSS → OOCSS, SMACSS, BEM
- React → Flux, Redux
Составные элементы
- Atoms
- Molecules
- Organisms
- Templates
- Pages
Нейминг
На примере Instagram
Что почитать
Игорь Суворов
Thanks!
any questions?
программист-предприниматель
Atomic Design & CSS-in-JS
By Igor Suvorov
