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

#nyancss #cssinjs #javascript #css

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:

.Button is a CSS class which represents a component (other examples are .ListItem , .UI , etc.) and can be used as <Button>Content</Button>.
.Button-disabled generates a component with a boolean prop (e.g. .Button-fullWidth, .Window-inactive) and can be used as <Button disabled />.
.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 ;-)

Top comments (12)

Lohit Aryan • Aug 8 '19

Damm the concept sounds good and its true that the reason for using CSS in JS is due to its compatibility but this IS actually Faster.I know from experience with ReactJS and styled Components Thanks man! gonna definitely try this out

Sasha Koss • Aug 8 '19

Amazing, I glad you liked it!

Arber Braja • Aug 8 '19

Im sure this works as all other libraries that help with this. Each library has its own way of dealing with CSS but personaly will not use this on my projects.

Still IMO using sass or CSS with vars and styled components is better.

The thing with these libraries is that most of them add their own syntax on top of CSS. As if CSS's syntax is not hard enough as it is.

So yeah, writing code in pure CSS or SASS, for me personaly is still the right choice.

Thank you for the contribution and dont take it as im saying this library is worthless. Im noone to say that.