Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

stylefy should take a list of objects as first parameter to optimize css class creation #27

Open
dantheobserver opened this issue Jun 16, 2018 · 3 comments

Comments

@dantheobserver
Copy link

For example If you are merging styles, once there is one unique change from the common components you're merging, say in a a parameterized style, it will generate another class. When doing things like creating similar items in a list, you create multiple styles which have a lot of overlap

[:div (use-style container-style)
 [:div (use-style (merge (background-color "blue") panel-style))]
 [:div (use-style (merge (background-color "red") panel-style))]
 [:div (use-style (merge (background-color "black") panel-style))]]```

So in this case, each div will have one completely unique class.  I propose that the api accepts a sequence in this way

```clojure
[:div (use-style container-style)
 [:div (use-style [(background-color "blue") panel-style])]
 [:div (use-style [(background-color "red") panel-style])]
 [:div (use-style [(background-color "black") panel-style])]]

so that the div will each contain two classes, one for the common panel class and one for the "unique" part of the class.
Maybe there's something I'm missing with an idiomatic way to do this in a similar fashion.

@dantheobserver dantheobserver changed the title stylefy should take a list of objects as first parameter to optimize object creationf stylefy should take a list of objects as first parameter to optimize object creation Jun 16, 2018
@dantheobserver dantheobserver changed the title stylefy should take a list of objects as first parameter to optimize object creation stylefy should take a list of objects as first parameter to optimize css class creation Jun 16, 2018
@Jarzka
Copy link
Owner

Jarzka commented Jun 17, 2018

In the examples project, there is a similar case where clock hands are rotated using CSS. I did not want to generate a unique CSS class for every possible angle, so I used inline style in this case. See example here:

https://github.com/Jarzka/stylefy/blob/master/examples/src/stylefy/examples/full_page.cljs
line 102

Basically your API suggestion should be possible to implement. Panel style would generate one CSS class for the "base" style, and one for the variant. Both classes should be returned to the caller. However, I'm not sure if this is worth the implementation effort. It makes the API a bit more complicated if you need to know when to pass styles as vector to avoid generating too much overlapping CSS. Also, personally I have never experienced any CSS perf hit by having simply too many classes with overlapping properties.

@dantheobserver
Copy link
Author

Thanks for the example, but it makes sense, I guess if css naively supported inheritance this would be a non-issue. It would be helpful to emphasize the class creation as if I wasn't curious I would have not stumbled upon the detail.

@Jarzka
Copy link
Owner

Jarzka commented Jun 18, 2018

I will keep your API suggestion in mind but I'm not going to implement it until there is more pressure from the community, indicating that this is a feature that people need.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants