Writing a CSS-in-JS library to rapidly create reusable designs
Tags: css, javascript, typescript, showdev
Published: 2021-04-13 16:02:16

Hello, today I'm going to talk about my CSS-in-JS library called [NiftyCSS](https://github.com/QuiiBz/niftycss). I developed few very cool ideas and wanted to get some **feedback and thoughts** from the community.

## Why writing CSS in JS?
Good question. If you never tried any CSS-in-JS library, you might be wondering why and how you can write your CSS in your JavaScript (or TypeScript of course).

### No class name conflicts
Since the class name is generated automatically by the library, you don't have to think about it.

### Dead-code elimination
If a class is not used, the CSS will not be injected (or server-side renderer for the libraries which support it) and you will never have extra CSS.

### Use JS in your CSS
It seems logical, but you can actually use ANY feature from your JavaScript code, like:
- Variables
- Calling functions to get code
- Reusing styles

And there are much more pros to use CSS-in-JS. Of course, there are also some [draw-backs](https://www.freecodecamp.org/news/you-dont-need-css-in-js-why-i-use-stylesheets/).

## NiftyCSS cool features

First of all, let me show you what an example code looks like:
![](https://i.imgur.com/GtDXQur.png)
As you can see, I wrote the CSS in a JavaScript file (actually it was TypeScript), and used some strange techniques. The `css` function returns me a unique class name, so I can include it everywhere I want.
At the right, you can see the generated and injected CSS. Let's go more in-depth about few features used:

### Directives for automatic code generation
Writing media queries declaration is boring, isn't it? To solve this, I created something called **Directives**. They are simple properties in the `css` object, which can hold anything.
For instance, NiftyCSS contains **breakpoints** to replace the fastidious `@media (min-width...)` declarations. Here, I used the `$sm` directive, which tells that all the CSS rules inside this directive will be inside a pre-defined breakpoint. The best is that it's automatically transformed by Nifty! (and you can also define custom breakpoints and custom directives via plugins, but that will be for the next time)

### CSS Utilities
You might notice that I used some functions and variables called `flexCenter` and `paddingX`. Since we are in a JavaScript file, we can use the spread operator. These functions and variables are coming from the `@niftycss/css` package and return many CSS rules from one single property.
For instance, the `flexCenter` variable returns an object with these 3 rules:
```css
display: flex;
justify-content: center;
align-items: center;
```
Whenever I want to create an element with these properties, I only need to spread this variable, instead of writing everything myself!
The `paddingX` works the same but returns the `padding-left` and `padding-right` with the passed value.

### Theming
Did you notice that in the code above, I used a custom theme object? That allows implementing a white and dark theme in seconds, by just calling `setTheme` later on. And the best is that you automatically get auto-completion from your theme keys!

That's it for this first article about [NiftyCSS](https://github.com/QuiiBz/niftycss), thanks for reading it.
Feel free to comment below your thoughts on these features, and to visit (maybe star if you enjoyed) the GitHub repo: [https://github.com/QuiiBz/niftycss](https://github.com/QuiiBz/niftycss)