Nue CSS: A scaleable alternative to Tailwind, BEM, and CSS-in-JS

[tipiirai]

Please check it out. Some major improvements over the current ways of doing CSS:

https://nuejs.org/blog/introducing-nue-css/

[joshamaju]

Not a user of Nue but I've been following the project, very excited about what you're doing.

But I don't see anything new (no pun intended) outlined in the post about writing CSS. Can you clarify a bit?

[tipiirai]

Two key points from the article on writing CSS:

1. Write CSS. Don't write JavaScript, when you need styling. CSS is the styling language of the web. Stay away from Tailwind if you value performance, clarity, and code that stands the test of time. Ditch all redundant CSS-in-JS layers: there are no benefits — only disadvantages. As shown in the article.

2. Minimalism. Practise CSS: it's a beautiful language. Don't add class names just for the sake of styling. Think reusability. Naming is the most important thing in reusable CSS. Check out the demos. Only 2-3 classes in use. Ultimately you end up in a situation where one TW button weighs more than three websites. That's something I'd say.

Nue website is missing best practices on writing minimalistic, maintainable, and scaleable CSS. I'm working on it.

Thanks!

[joshamaju]

I think I get it now, you're saying that scoping styling with class names is one overheads that developers try to fill with tailwindcss.

The key idea to leave out all class names that relate to styling and let external CSS take care of the element and/or component look and feel.

Naming things and minimalism go hand-in-hand. The more names you have, the more complex your design system API. In most cases, the component name is all the naming you need

So you're saying devs should instead reach for tag names based on their design system. Is that correct?

Are the styles scoped to the file/component and how does that work with global styling on all pages?

[tipiirai]

I suggest you look for one of the templates mentioned on the article and see how the CSS is structured. Then start editing the files and see how the site morphs live in front of you.

[tipiirai]

Either tag names like table or component names like .gallery, where the component name is the class name on the root element of the component. Styles are "scoped" natively with CSS selectors so that everything under table { /* here */ } relates to table and it's descendants. Same with the root class names.

The global CSS rules can be overridden/extended on area and page level CSS files.

[seneca]

Thank you. Another small step forward to better web.

[siduck]

isnt that just plain css?

[tipiirai]

CSS is the beast when it comes to styling. Please point me to a better one. I'm all ears. Haven't heard of a better one yet!

[siduck]

@tipiirai that was the reason many moved to tailwind!

very short class names and its very faster to just write the styling in the markup file itself & the amount of work it eases for responsive stuff is astounding too imo. but with tailwind it gets easy to make the code look messier

Unocss solves most of those issues and provides a cleaner syntax!

[tipiirai]

I'm aware. Personally, I prefer to write less code with the same results no matter what the language. In case of Tailwind specifically, it seems I can accomplish the same with 10-50x less code, which is kind of crazy. I also prefer to stick to standards as they stand the test of time.

[sqlraft]

I am not sure why it need to be "Nue CSS", or what is "Nue CSS".

Is the design system base on a collection of stand components ? and design system allow you custom styles for them ?

If every one has to write they own components and then add design styles, I am not sure how this will work for team or long term project.

If I want to use https://daisyui.com/components/ with nue, I must use it with CDN ?

[tipiirai]

I agree. I have started to think the same way. I'm going to stop using the name "Nue CSS", because the upcoming system is close to Brad Frost's ideas of the global design system coupled with CSS best practices.

However, one of the key best practises is the use of external styling and avoid defining the look & feel inside the component, so anything close to Tailwind (like Daisy UI) is not recommended. External staying is the key recipe for writing functional/custom design systems.

[felix-bohlin]

Some corrections:

Nue Best Practise

✅Practice

❔The motherfuckingwebsite image has two accessibility charts. Not sure if that's correct.

[tipiirai]

Thank you @felix-bohlin ! Both fixed now

[Dugnist]

I read the article and looked at the examples, but I still can't understand how the concept works: "No CSS-in-JS layer needed".
If, for example, I need to render different "color" values of my button depending on the JS data - how can I implement this with Nue CSS?

[tipiirai]

With Nue, your buttons are compliant with your design system. So if your design system defines a style for, say "primary", "secondary", and "alert" buttons — you should stick to them to keep your design consistent. Overriding your button with a custom color locally goes against the system.

Another option is to add a new button style to the system, however, keeping in mind that "Less is More".

[Dugnist]

That's true, but what if I have a button that should dynamically change its class when it is re-redirected, for example, from class="ds-button-primary" to class="ds-button-primary-pressed" or to class="ds-button-primary pressed" - I still don't understand how this should happen with Nue CSS? How to solve this case with Nue?

[tipiirai]

You can use Nue JS for all the reactive stuff. Speaking of CSS, all button states like :hover, :active, and [disabled] should also be part of the design system.

[Dugnist]

That is, in order to change a button with one style to the same button with another style with click (and then possibly back), I need to make both buttons separately with different classes and show them using the "if else" construction?
This doesn't seem like "Less is More".
":active" doesn't meet my requirements because I need to leave the button in this state for a while after it's clicked.

[tipiirai]

You can do something like this:

<button @mousedown="clicked = true" @mouseup="clicked = false" class="{ is-clicked: clicked }">

Haven't tested that code, but you should get the idea.

[calvin2021y]

hi @tipiirai

Can you share your comments about https://unocss.dev/ ?

[Dugnist]

Isn't this the same "tailwind"?

[tipiirai]

As you've probably noticed, I'm an advocate of external, standards-based CSS. UNO uses the Tailwind inline-styling approach, which goes against the separation of concerns, and many other pillars Nue shoots for.