Introduction to the CSS rule

Here is an example of a CSS rule:

body {
  margin: 2em;
}

body {
  margin: 2em;
}

Copy

The body in this example is called a CSS selector. margin is the CSS property and 2em is the CSS value.

Section from "Why Isn’t X a Hook?" article by Dan Abramov

function useWindowWidth() {
  const [width, setWidth] = useState(window.innerWidth);
  // ...
  return width;
}

function useTheme(isMobile) {
  // ...
}

function Comment() {
  const width = useWindowWidth();
  const isMobile = width < MOBILE_VIEWPORT;
  const theme = useTheme(isMobile);
  return (
    <section className={theme.comment}>
      {/* ... */}
    </section>
  );
}

function useWindowWidth() {
  const [width, setWidth] = useState(window.innerWidth);
  // ...
  return width;
}

function useTheme(isMobile) {
  // ...
}

function Comment() {
  const width = useWindowWidth();
  const isMobile = width < MOBILE_VIEWPORT;
  const theme = useTheme(isMobile);
  return (
    <section className={theme.comment}>
      {/* ... */}
    </section>
  );
}

Copy

But what if we make a mistake? What’s the debugging story?

Let’s say the CSS class we get from theme.comment is wrong. How would we debug this? We can set a breakpoint or a few logs in the body of our component.

Maybe we’d see that theme is wrong but width and isMobile are correct. That would tell us the problem is inside useTheme(). Or perhaps we’d see that width itself is wrong. That would tell us to look into useWindowWidth().