Exposing CSS Hidden Complexities
I use a "simple" button as the example and focus on 3 common CSS complexity hot-spots:
- Pseudo-classes (specifically
- Media queries
- Animations (specifically
The inner workings
react-styleguidistfor 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.
CssButtonis the plain CSS implementation. Just a React component and a style sheet.
onMouseLeaveevents paired with React's built-in state management,
yarn install # Run tests yarn test # Run the live showcase/playground in dev server mode yarn styleguide open localhost:6060