Styling
Last updated
Last updated
In this guide, we'll walk through styling our newly created .
HSDS uses CSS-in-JS techniques for styling, powered by .
The .css.js
file extension is a convention HSDS uses to distinguish dedicated CSS-in-JS file types. They're still plain ol' .js
files though 🤓.
Add the starting styled component boilerplate for Strong.css.js
:
Whoa 😳! Lots of stuff! What is this stuff!
StrongUI
The design pattern we use to distinguish styled-components (SC) vs. regular React components is to add UI
to the end of the name.
is-superBold
This contains the modifier styles specified in our Strong
component. Similar to Sass, ampersand for className inheritance is supported.
We're making our StrongUI
available as the default export, but also as a named export. The reason for this is incase we need to use the isolated SC in another component.
And that's it 🙏! You've successfully styled our new Strong
component 💪.
HSDS's CSS-in-JS practices favour the use of conventional CSS modifier classes, rather than . From experience, this keeps the code much cleaner and easier to read. It also avoids clashing, which sometimes happens with dynamic styling.
Let's to see this thing in a browser!