loading...
Cover image for Write plain CSS while reaping the benefits of CSS-in-JS

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

kossnocorp profile image Sasha Koss ・3 min read

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

Discussion

markdown guide
 

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.

 

Thank you for the feedback! πŸ‘

 

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

 

Amazing, I glad you liked it!

 

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

 

Thank you so much for your kind words! May I quote you on the website? πŸ€—

 

Of course πŸ˜ΈπŸ³οΈβ€πŸŒˆ

 

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

 
 

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

 

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

 

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

 

How does this differ from css modules? You can define those and import them as JS, no?