This time we will focus on debugging CSS styles when working with React. We will hunt down a few example bugs with browser Dev Tools Inspector and identify good ways how to fix them. Vertical alignment, flexbox, animations, responsive designs, CSS-in-JS, overwriting default library styles and other useful tips await.
Before workshop:
git clone https://github.com/msd-code-academy/react-workshop.git
cd react-workshop/03-css-debug/
npm iAt the workshop start:
git pull # because we might do last-minute fixes
npm startcd src/examples/- 00 Intro
- Using browser inspector (right click > Inspect)
- No step-by-step debug
- So good class names are more important
- Or at least React component names, including HOC
- Temporary background / outline also useful
- Know thy framework / use consistent code style to simplify search in code
- Choose a library that does not use !important rules
- CSS vs CSS-in-JS => hot reload vs cleaner code over time
- Using browser inspector (right click > Inspect)
- 01 Vertical alignment
- Parent height
vertical-alignis only for inline and table cells- Know thy flexbox (or trial & error)
- 02 Z-index
- Stacking context
staticcontent is for elements that keep to themselves- if they need to overlap in arbitrary ways, best to go
absolute - or
grid(order in HTML according to Z order, manual row+column for position)
- 03 Selector specificity
- CSS Cascade and Specificity
- Simplified model - do a sum of "values" for each part of the selector:
- 1 for
divor::before - 10 for
.classor:hover - 100 for
#id - 999 for inline
- 1000 for
!importantin the rule
- 1 for
- 04 Responsive design
- Always test, open multiple windows or connect devices
flex-wrap,grid-template-columns,<Col md={12} />,min-width, ... not just @media
- 05 Transitions
transitionproperty applied from the "after" / "new" selectorheight: autocannot be calculated, usemin/max-heightor fixed heights for transitions (or JS library)
- Q&A