Write semantic markup and styles,
as the soul wants

Artur Kenzhaev, Team Leader at Yandex

React Europe 2019, 23/05/2019

CSS Modules

styled-components

styled-components

but there are still some issues

styled-jsx

CSS Modules

CSS Modules

CSS Modules

CSS Modules

CSS Modules

reshadow ⛱️

Write semantic markup and styles,

as the soul wants

reshadow

/ semantic markup

reshadow

/ semantic markup

reshadow

/ semantic markup

reshadow

/ semantic markup

reshadow

/ semantic markup

reshadow

/ semantic markup

reshadow

/ semantic markup

reshadow

/ examples / css-modules

reshadow

/ examples / css-modules

reshadow

/ examples / css-in-js

reshadow

/ examples / css-in-js

reshadow

/ examples / dynamic values

reshadow

/ examples / composition

reshadow

/ examples / composition

reshadow

/ examples / styling

reshadow

/ examples / a11y

reshadow

/ as the soul wants

  • Semantics first of all

reshadow

/ as the soul wants

  • Semantics first of all

  • Start with native elements

reshadow

/ as the soul wants

  • Semantics first of all

  • Start with native elements

  • Start with native and aria attributes

reshadow

/ as the soul wants

  • Semantics first of all

  • Start with native elements

  • Start with native and aria attributes

  • Map component state to the markup

reshadow

/ as the soul wants

  • Semantics first of all

  • Start with native elements

  • Start with native and aria attributes

  • Map component state to the markup

  • Match styles on the markup state

reshadow

/ as the soul wants

  • Semantics first of all

  • Start with native elements

  • Start with native and aria attributes

  • Map component state to the markup

  • Match styles on the markup state

  • Compile-time styles processing and extraction

reshadow

/ as the soul wants

  • Semantics first of all

  • Start with native elements

  • Start with native and aria attributes

  • Map component state to the markup

  • Match styles on the markup state

  • Compile-time styles processing and extraction

  • Static styles analysis

reshadow

/ as the soul wants

  • Semantics first of all

  • Start with native elements

  • Start with native and aria attributes

  • Map component state to the markup

  • Match styles on the markup state

  • Compile-time styles processing and extraction

  • Static styles analysis

  • Combine css-modules and css-in-js ways, or choose which fits you better

reshadow

/ as the soul wants

  • Semantics first of all

  • Start with native elements

  • Start with native and aria attributes

  • Map component state to the markup

  • Match styles on the markup state

  • Compile-time styles processing and extraction

  • Static styles analysis

  • Combine css-modules and css-in-js ways, or choose which fits you better

  • All the benefits of the PostCSS ecosystem

reshadow

/ framework agnostic

React

Preact

Svelte

Vue

htm

Thank you!

Artur Kenzhaev, Team Leader at Yandex

Made with Slides.com