Pauan / rust-dominator

Zero-cost ultra-high-performance declarative DOM library using FRP signals for Rust!
MIT License
960 stars 62 forks source link

Adds a small method to set the class name in a ClassBuilder #60

Closed JomerDev closed 2 years ago

JomerDev commented 2 years ago

This allows a user to use existing class names that are used by javascript as well.

I'm unsure if class_name is a good name for that method or if name might be better

Pauan commented 2 years ago

Why not just use stylesheet instead (which supports every CSS selector)?

stylesheet!(".foo", {
    .style("background-color", "red")
});

Then you can just use .class as usual to apply it:

html!("div", {
    .class("foo")
})
JomerDev commented 2 years ago

Does stylesheet create a new stylesheet for every class? It's name suggests it does But maybe that's just me not understanding it

Pauan commented 2 years ago

I don't fully understand your question.

The class! macro creates a new stylesheet with an auto-generated class name:

class! { ... } will create a .__class_0__ { ... } CSS stylesheet.


The stylesheet! macro is the same, it also creates a new stylesheet, except you can choose the CSS selector instead of using an auto-generated one:

stylesheet!(".foo", { ... }) will create a .foo { ... } CSS stylesheet.

Aside from being able to choose the CSS selector, there are no other differences between them.

Internally, class! just uses stylesheet! with an auto-generated name.

JomerDev commented 2 years ago

Ah, my mistake, I thought that class! always reused the same stylseheet and just added classes to it

Pauan commented 2 years ago

That's correct, it reuses a single CSS <style> and adds new CSS stylesheet rules to it.

However, that behavior is from stylesheet!, not class!, so it applies to both of them. They both reuse the same <style>.

Also, it's an internal implementation detail which you shouldn't rely on, and it doesn't make much difference in practice.

JomerDev commented 2 years ago

Ah ok, my fault then. I thought that stylesheet! would create a new stylesheet and class! would reuse a single one for each call.

In that case I agree that it is easiest to just use stylesheet! instead