DEV Community


Discussion on: Introducing nanostyled: CSS-in-JS without CSS-in-JS

chrisfrank profile image
chrisfrank Author

With inline styles, the keys are literally the names of the CSS properties React understands: listStyle, background, etc. And the values are actual CSS rules.

With what Nanostyled calls "style props", the keys can be named whatever you like, and they're mapping to CSS class names from your functional CSS framework, not to CSS rules.

// inline, with actual CSS rules
<button style={{ background: 'black', color: 'white', borderRadius: '4px' }}>Inline</button>

// nanostyled, with CSS class names from tachyons.css
<Button bg="bg-black" radius="br3" color="white">Nanostyled</Button>
// `bg` and `radius` are not CSS properties
// `bg-black` and `br3` are not CSS rules
// `color` and `white` happen to be valid CSS, but only by chance

You're seeing kebab-case in the browser debugging tools because the actual styling is being applied by whatever CSS framework you're using with nanostyled, which probably uses kebab-case for its class names.

The advantages Nanostyled has over inline styles are:

(1) You get all the power of whatever CSS framework you pair it with — media queries, hover effects, a design system, etc — but with a CSS-in-JS-like API.

(2) It's easier to keep your design consistent. Inline styles make you specify raw CSS properties in your styles, e.g. 12px font and #010101 color. Nanostyled has you use class names from your CSS framework instead, which means dark-gray ends up being the same color everywhere, instead of #010101 sometimes and #020202 other times, which is what tends to happen when an app lives for a long time or has multiple people working on it.