Write plain CSS while reaping the benefits of CSS-in-JS

Modern CSS land is divided into CSS-in-JS followers and plain CSS adherents with an ongoing controversy about which approach is superior. Despite the fight, it benefits us by advancing the ecosystem and making it more vibrant.

While plain CSS users get established tooling, simplicity, performance, and portability, the CSS-in-JS users enjoy the reliability and tight integration with the app code.

Why don't we have both?

Nyan CSS is a convention that allows to write good ol' CSS and import the styles as components (React/Preact/Vue.js).

Here's how it works. First, you define CSS:

.Header,
.Text {
  font-family: monospace;
}

.Header {
  font-size: 2rem;
}

.Header-size-large {
  font-size: 2.2rem;
}

.Text-italic {
  font-style: italic;
}

Then you import it as components:

import React from 'react'
import { Header, Text } from './style.css'

function Announcement() {
  return (
    <>
      <Header tag="h1" size="large">
        Welcome Nyan CSS!
      </Header>
      <Text tag="marquee" italic>
        Please, welcome Nyan CSS!
      </Text>
    </>
  )
}

And so you get:

Essentially Nyan CSS is a convention plus family of libraries that provides tight integration with frameworks (React, Preact, Vue.js, class names). You don't need to install anything to use Nyan CSS with HTML.

The convention

The convention is simplisitic and consist just of three rules:

1. .Button is a CSS class which represents a component (other examples are .ListItem , .UI , etc.) and can be used as <Button>Content</Button>.
2. .Button-disabled generates a component with a boolean prop (e.g. .Button-fullWidth, .Window-inactive) and can be used as <Button disabled />.
3. .Button-color-red represents a component with an enum prop (e.g. .Spacing-direction-column, .Window-mode-alert) and can be used as <Button color='red' />.

Why?

Universal design system

Because Nyan CSS is just CSS, it can be used across different projects built using different technologies with no code changes. Use the same styles for a static landing page with no JS as for React SPA.

Web technologies envolve, fashion and passion changes, and just a few things remain HTML, CSS, and JS. CoffeeScript made our lives better with its legacy, but the language itself became history.

Zero overhead

With no runtime that manipulates CSS in a browser, Nyan CSS ensures maximum performance by reducing JavaScript build size and leaving CSS management to the browser.

I was inspired by Styled Components myself, but I was working on a widget and didn't want to add extra 15Kb, so I created Nyan CSS that is not 5x size of the framework I use.

You don't need to install plugins for your editor, transpile before use or parse it anyhow. It's just CSS.

Battle-tested

I incrementally improve the approach for the last two years. I developed 6 different applications (demo: Diary Email) using Nyan CSS and confident that it just works.

Let's talk

What do you think? Give it a try. And then you can tell me if it's good or not ;-)