Skip to content
Go to file

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time

Exposing CSS Hidden Complexities

Accompanying blog post outlining the development of this repo:


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:

  1. Pseudo-classes (specifically :hover)
  2. Media queries
  3. Animations (specifically transition)

The inner workings

"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.

  1. CssButton is the plain CSS implementation. Just a React component and a style sheet.
  2. HoverButton moves the hover pseudo-class into JavaScript using the onMouseEnter and onMouseLeave events paired with React's built-in state management, setState.
  3. ResponsiveButton moves the media query into JavaScript using the react-media package, which uses the matchMedia DOM API under the hood.
  4. 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.

Getting Started

yarn install

# Run tests
yarn test

# Run the live showcase/playground in dev server mode
yarn styleguide

open localhost:6060


An exploration of exposing CSS complexity with JavaScript and React.



No releases published


No packages published
You can’t perform that action at this time.