DEV Community

Cover image for Write plain CSS while reaping the benefits of CSS-in-JS
Sasha Koss
Sasha Koss

Posted on

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:

A page in a browser with large "Welcome Nyan CSS" and moving italic "Please, welcome Nyan CSS!"

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 ;-)

Top comments (12)

Collapse
 
nodeicode profile image
Lohit Aryan

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

Collapse
 
kossnocorp profile image
Sasha Koss

Amazing, I glad you liked it!

Collapse
 
arberbr profile image
Arber Braja

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.

Collapse
 
kossnocorp profile image
Sasha Koss

Thank you for the feedback! 👍

Collapse
 
iskin profile image
Andrey Sitnik

Used this library and like it a lot. Great performance and nice API.

Collapse
 
kossnocorp profile image
Sasha Koss

Thank you so much for your kind words! May I quote you on the website? 🤗

Collapse
 
iskin profile image
Andrey Sitnik

Of course 😸🏳️‍🌈

Collapse
 
seanmclem profile image
Seanmclem

Can it use media queries, key-frames, and avoid fouc?

Collapse
 
kossnocorp profile image
Sasha Koss

Sure, you can do anything you can do with regular CSS.

Collapse
 
squidbe profile image
squidbe

Just an FYI: it's "reaping the benefits".

Collapse
 
kossnocorp profile image
Sasha Koss

Oh gosh, thank you!

Collapse
 
adam_cyclones profile image
Adam Crockett 🌀 • Edited

You might like my series on JavaScript enhanced scss? It's related but you don't need a framework.