Introduction to the CSS rule
Here is an example of a CSS rule:
The body
in this example is called a CSS selector. margin
is the CSS property and 2em
is the CSS value.
Here is an example of a CSS rule:
The body
in this example is called a CSS selector. margin
is the CSS property and 2em
is the CSS value.
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>
);
}
CopyBut 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()
.