MHF CSS Guide
CSS in JS
Avoid the
inline style
attribute.
Avoid
css modules
unless you are working on a whole page.
Use the
styled jsx
library and follow these conventions.
Styled JSX
Styled JSX is a small library built into Next.js. It's built and maintained by Vercel and therefor integrates nicely. There's a small learning curve to using it. Here are some basics.
Using the library
Implementing a styled jsx element is simple. You simply insert this block:
into your React Component in your return area, like so.
You don't have to import the library, you can just use it out of the box.
Note the back ticks. Styled JSX uses something called template strings. Similar to what you would see in a GraphQL call if you've ever used that. So similarly, there's a handy VScode extension to help see your CSS in the style JSX block with color and linting enabled.
Writing CSS
So now we can simply insert class names and in the styled JSX element we write our CSS the way we would in any CSS file. Again, the VScode extension does wonders here and I would highly recommend you use it.
Scoping CSS
Styled JSX is scoped, so you can be more free with your class naming, just make sure it stays scoped in the case of sub components or a wrapper component.
Last updated