An exploration of exposing CSS complexity with JavaScript and React.
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
config
src
.babelrc
.editorconfig
.gitignore
README.md
jest.config.js
package.json
styleguide.config.js
yarn.lock

README.md

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