Atomic Design & CSS-in-JS

Занятие 17

6 May 2018

skill-branch.ru/backend-middle

Профессия
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

github.com/tuchk4/awesome-css-in-js

JSS

github.com/cssinjs/jss​

  • 3500 stars
  • 200 forks
  • 12 Oct 2014

JSS

github.com/cssinjs/jss​

3

Styled Components

Styled Components

github.com/styled-components/styled-components

  • 16k stars
  • 900 forks
  • 16 Aug 2016

Как использовать?

 

Как использовать?

 

Как использовать?

 

Как использовать?

 

Как использовать?

 

Как использовать?

 

4

Emotion JS

Emotion JS

github.com/emotion-js/emotion

  • 3500 stars
  • 200 forks
  • 27 May 2017

Как использовать?

Как использовать?

Как использовать?

Как использовать?

Как использовать?

5

Atomic Design Methodology

Атомарный дизайн | Брэд Фрост

Суть Atomic Design - разбить интерфейсы на фундаментальные блоки и комбинировать их, постепенно наращивая сложность

Методологии

 

  • CSS → OOCSS, SMACSS, BEM
  • React → Flux, Redux

Составные элементы

  1. Atoms
  2. Molecules
  3. Organisms
  4. Templates
  5. Pages

Нейминг

На примере Instagram

Что почитать

Игорь Суворов

→   telegram.me/isuvorov

→   vk.com/igor.suvorov

→   github.com/isuvorov

Thanks!

any questions?

программист-предприниматель

Made with Slides.com