Structuring CSS Stylesheets

[Daniel Glöckner]

Hi,

Thanks a lot for your comments, David.

> -----Original Message-----
> From: openjfx-dev [mailto:openjfx-dev-bounces at openjdk.java.net] On Behalf
> Of David Grieve
> Sent: Monday, August 15, 2016 4:35 PM
> To: openjfx-dev at openjdk.java.net
> Subject: Re: Structuring CSS Stylesheets
> 
> 
> 
> On 8/15/16 9:46 AM, Daniel Glöckner wrote:
> > Hi,
> >
> > We recently came across a number of performance issues which were caused
> by our poor CSS.
> >
> > Our stylesheet contained too many selectors, specifically too many generic
> selectors targeting "common" JavaFX controls (.text, .label etc.).
> Make the selectors as specific as possible. Avoid the universal selector '*' if you
> can.
> >
> > We found the culprits by patching the JRE, adding some statistics to
> > SimpleSelector and CompoundSelector. I was wondering whether there are
> > easier ways but anyway, it works ;)
> This sounds like some code that would be good to share with the community. :)
[DG] Sure thing. It's not too complicated and doesn't use external libs. Any hint where I could post it / paste it?
> >
> > We've meanwhile improved our CSS performance (by making a bunch of
> selectors more specific) but want to re-structure the stylesheets to be more
> future-proof (with even better performance ;)).
> >
> > Could you quickly comment on the following idea?
> >
> > Our CSS is already divided into several stylesheets (e.g. table.css, some-
> dialog.css etc.).
> > These stylesheets are all imported via @import into a global theme.css.
> theme.css is then added to the scene.
> >
> > We're thinking about adding the individual stylesheets only to nodes which
> need them, for example our UI component factory would add table.css to a
> TableView's list of stylesheets (tv. getStylesheets().add("/path/to/table.css").
> The global theme.css would be minimal and only define colors and fonts.
> >
> > What do you think about this approach? Will this work nicely with caching of
> CSS styles in JavaFX?
> I think if you are going to go this route, you might want to use
> Region#getUserAgentStylesheets() which adds the styles as user-agent styles.
> But I don't think it will buy you much in terms of CSS performance.
[DG] We also want to control / override the CSS of standard JavaFX controls like TreeTableView. Ideally we don't need to sub class them so we would need to use parent. getStylesheets().add(), right?
> 
> If you the biggest bang for your buck relative to JavaFX CSS performance, avoid
> style lookup and relative font sizes.

[DG] Could you explain what you mean by "avoid style lookups"?