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
Support for global styles without relying on css classname literals #451
Comments
Here's an example class that I use to both define and turn on and off css classes. It'd be awesome if this could be made cleaner (without the strings).
|
But you don't have to rely on class selectors, because they are generally auto-generated. So instead of: val cardStyle = Style(".card") {
fontSize = 2.em
}
div {
addCssClass("card")
+"Some large text"
} you should do: val cardStyle = Style {
fontSize = 2.em
}
div {
addCssStyle(cardStyle)
+"Some large text"
}
or even: div {
style {
fontSize = 2.em
}
+"Some large text"
} |
Yes I think that's right, though these styles need to be declared outside of the class, otherwise they get a new classname per instance of the class. Check this out: Left arrow is me taking a hit by loading some global styles. Middle three arrows is the app on initialization creating three help dialogs (which are initially hidden). They each contain the same boilerplate UI; however, as you can see below, each of them gets their own version of the Style for the X button, because it's created on class initialization. I also had this problem on initialization of some buttons, shown at the right of first screenshot in this comment. Each of the buttons has their own style class too. The above is following the pattern:
If I instead change to:
... then initialization instead looks like this: The three arrows on the right are the three different help templates, now using all of the common style objects. The arrow at the left is the initialization of the global styles for HelpTemplates. So, doing just this cut down rendering time by around 40ms. Incidentally I can't put these into a companion object, because I need to initialize them with the selected theme; and tangentially when the user changes theme, I force a full reload of the app, to reinitialize all of the global styles. |
One way to avoid recalculating styles on the fly (and yet keep styling in code) is to have a global styles class (or series of classes/objects) which is initialized.
For example:
This gets "imported" as follows:
...and now styles don't need to be regenerated each time components are rerendered. However, it's a bit messy, since it relies on the css classname to "link" the style to the component; i.e. to use it, of course, I have to have a widget that does:
I can't even break out "card" fully to a constant, because the css rule wants a dot in front of it, so I'd need to prepend with a dot when initializing the style (which is...ok, but still smelly.)
Can you come up with a cleaner way of "linking" the component to the global style? (This may be the same solution as #450, but I thought I would file separately in case there are two separate ways of tackling this.)
One possibility, though I don't know if inline/reifying/etc will work with the js compiler:
Of course, people would eventually want to replicate CSS selectors in code, so you could imagine craziness like:
...but maybe this isn't so bad, as it's more readable than css selectors for somebody who isn't a browser developer.
Another simpler possibility:
The text was updated successfully, but these errors were encountered: