CSS refactoring with new styling API

General
1

B"H
Hi,
using vaadin 25, with maintain massive css that based above Lumo.
I would like to refactor existing css code and rely on API as much as can in order to achieve better backward compatibility with next upgrades.
What are the suggested process for such effort?
I saw the skills for compose css, but refactor/recode of some existing, it way complex.
Thanks

2

Depends on what your current CSS is like.

Are you using pre-V24 shadow DOM styling, i.e. are your component styles in a themes/<yourtheme>/components folder, or imported via @CssImport using the themeFor parameter?

Those would indeed be good to refactor to regular stylesheets using the documented selectors, as it protects you from changes to component structure. And some day in the future the shadow DOM styling approach will probably no longer be supported.

If so, you could try to get a coding agent to refactor it for you, by specifying that it should use the selectors documented on the components’ Styling pages. I don’t think anybody has tried creating a skill for this.

Perhaps @Tatu2 has some thoughts on this?

Doing it manually can indeed be quite a project. Luckily you can do it piece by piece, e.g. one component at a time. Vaadin’s consulting services are also available to do this kind of work for you, of course.

3

Thanks Rolf,
indeed it is base on 24’s shadow dom except few layouts.
refactor the “themeFor” should be easy change.
I wonder will it be good approach trying and reduce the css code and base only on the --vaadin properties as much as can.
not sure it will give a benefit else totally align the styling to what comes ootb.
wdyt?

4

Yes, that is a good approach. As described here the recommended approach to styling in V25 is:

  • Theme: choose the theme that is the best match to your desired look and feel for components, or stick to the components’ base styles if neither theme is a good match;
  • Variant: check if the component provides a style variant that corresponds (at least partially) to what you’re after;
  • Style Properties: customize the component using theme and/or component style properties;
  • CSS style blocks: write your own CSS (using documented selectors) only once you can’t get further with the above approaches.

That way you reduce the amount of css selectors you need to figure out.