--- title: Write plain CSS while reaping the benefits of CSS-in-JS published: true description: Is there a common ground between CSS-in-JS and plain CSS? tags: Nyan CSS, CSS-in-JS, JavaScript, CSS cover_image: https://thepracticaldev.s3.amazonaws.com/i/75jhdw913mw030qkp5t5.png --- 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](https://github.com/nyancss/nyancss) 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: ```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: ```jsx import React from 'react' import { Header, Text } from './style.css' function Announcement() { return ( <>

Welcome Nyan CSS!

Please, welcome Nyan CSS! ) } ``` And so you get: ![A page in a browser with large "Welcome Nyan CSS" and moving italic "Please, welcome Nyan CSS!"](https://raw.githubusercontent.com/nyancss/nyancss/c928384e8878e492c24f330b1ce49d66a89808bd/docs/demo.gif) 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 ``. 2. `.Button-disabled` generates a component with a boolean prop (e.g. `.Button-fullWidth`, `.Window-inactive`) and can be used as `

nyancss

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

Join Our Newsletter. No Spam, Only the good stuff.