Skip to content

An exploration of exposing CSS complexity with JavaScript and React.

Notifications You must be signed in to change notification settings

ryanoglesby08/exposing-css-hidden-complexities

Repository files navigation

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

Motivation

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

About

An exploration of exposing CSS complexity with JavaScript and React.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published