Document styling best practices in Hilla

[platosha]

The starter wizard generated application comes with some styling practices applied to Fusion views, that are currently not documented.

Add a Styling views article in Fusion / Creating Application section that tells about best practices for styling views:

• Using Light DOM for views and Shadow DOM for layouts
  • Suggest using View and Layout parent classes based on LitElement respectively, with code examples
  • Mention when to use applyTheme
  • Recommend using scoped styles over global styles for maintainability
  • Link to the Style Scopes article for more information
• Suggest creating custom web components for styles encapsulation
• Mention using the custom theme’s styles.css to define application-wide styles usable in both layouts and views
  • Link to Creating a Custom Theme
• Have an example of appending styles into document in a TS file (use case: lazy loading styles with the view)

[Haprog]

Recommend using scoped styles over global styles for maintainability

I think in this case the styles would still be global (for light DOM) so this should be something like: "Recommend using scoped selectors for view specific global styles for maintainability". Or maybe I misunderstood what exactly this is about.

Scoping can be done either with a shadow root or with selectors (convention). So for cases where we recommend light DOM (views) scoping of those global styles should be done with selectors since shadow root is not an option. In general "Recommend using scoped styles over global styles" doesn't make sense as it depends on what you are styling. You can also have global styles that are used in many views intentionally and should not be scoped (e.g. generic typography, common utilities like badges etc.).

[Haprog]

Suggest creating custom web components for styles encapsulation

This makes sense for cases when you're creating a component but not when you want to have a small utility (e.g. a class that adds some extra spacing, or maybe a class for text-align or float that you might want to use on any component/element). A component doesn't need to have behaviour though, it could be just layout and/or styles to make a block/section with a specific look (e.g. card, news-item). I guess it would be nice to have some example of a custom element like "card" or "badge" or something simple that only has a slot and some styles.

[jouni]

Description is partly outdated as content has been edited, and we are moving to ::part-based styling in general.