Hello, today I'm going to talk about my CSS-in-JS library called NiftyCSS. I developed few very cool ideas and wanted to get some feedback and thoughts from the community.
Why writing CSS in JS?
No class name conflicts
Since the class name is generated automatically by the library, you don't have to think about it.
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
- 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.
NiftyCSS cool features
First of all, let me show you what an example code looks like:
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)
You might notice that I used some functions and variables called
@niftycss/css package and return many CSS rules from one single property.
For instance, the
flexCenter variable returns an object with these 3 rules:
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!
paddingX works the same but returns the
padding-right with the passed value.
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, 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
Top comments (0)