Exposing CSS Hidden Complexities
Accompanying blog post outlining the development of this repo: http://ryanogles.by/css/javascript/react/2017/11/17/exposing-css-hidden-complexities-with-react.html
This repo is an exploration of shifting complexity out of CSS and into JavaScript, using React as the core view library.
I use a "simple" button as the example and focus on 3 common CSS complexity hot-spots:
- Pseudo-classes (specifically
:hover
) - Media queries
- Animations (specifically
transition
)
jest
for testingreact-styleguidist
for a live component showcase/playground
"src/components" contains the explorations. Each component builds on the previous ones. By the time I get to AnimatedButton
, the CSS properties are nothing more than a simple description of the static styles of the component.
CssButton
is the plain CSS implementation. Just a React component and a style sheet.HoverButton
moves the hover pseudo-class into JavaScript using theonMouseEnter
andonMouseLeave
events paired with React's built-in state management,setState
.ResponsiveButton
moves the media query into JavaScript using the react-media package, which uses the matchMedia DOM API under the hood.AnimatedButton
moves the transition animation into JavaScript using the react-transition-group package, which lets you describe a transition from one component state to another over time with a simple declarative API.
yarn install
# Run tests
yarn test
# Run the live showcase/playground in dev server mode
yarn styleguide
open localhost:6060