How are you organizing your UI files?

I’m bumping into some issues just with keeping my project organization in order.

Any moderately complicated UI elements end up needing 3 different files:
The Visual Tree Asset / uxml
The USS file (because you cant inline things like “children of the list need to be a 20% width”)
Some C# file extending VisualElement to stick into the UXML file to add any logic

I find this really tends to pollute the project, especially since all 3 of these files generally want to have the same name but with a different file ending as they are essentially 100% coupled.

For a concrete example, lets look at a mouse over tooltip for an Item in an RPG:
You probably want to use the tooltip by referencing an Item ScriptableObject, so you need a VisualElement file to map the SO to the labels in the UXML, you’ll have to pop this into the UXM. This file will never be used for any other UI Documents, but it will always add clutter in the Editor as a custom control.
The list of item stats is probably not going to be uniform, so you’re going to need to be able to handle 0-n stats on the item. Making sure all the labels format correctly in the stat list will likely end up needing a “#list > Label” selector, so we cant do that inline & will have to make a USS file.

In this example we have 3 files, probably ItemTooltip.uss, ItemTooltip.cs, and ItemTooltip.uxml
All of them entirely coupled with the other, and now if we have a folder with game UI elements, every one is going to be 1-3files of the same name which really makes navigating the folder more frustrating when you end up with 20+ unique elements.

Is there a better way I could be organizing the UI elements? I mostly cobbled this setup together from the Example Clash Royle Clone project, and it seems messy.

I come from a web development background so I tend to think of UI in terms of views and components. Here’s an example of how I organize UI:

Assets/UI/
├─ Components/
│  ├─ Tooltip/
│  │  ├─ Tooltip.cs
│  │  ├─ Tooltip.uss
│  │  ├─ Tooltip.uxml
│  ├─ Panel/
│  │  ├─ Panel.cs
│  │  ├─ Panel.uss
│  │  ├─ Panel.uxml
├─ Views/
│  ├─ TitleScreen/
│  │  ├─ TitleScreen.uxml
│  │  ├─ TitleScreen.cs
│  ├─ OptionsScreen/
│  │  ├─ OptionsScreen.uxml
│  │  ├─ OptionsScreen.cs
├─ Settings/
│  ├─ PanelSettings.asset
│  ├─ PanelTextSettings.asset

Components represent modular chunks of UI that can exist independent from a view. My components are typically comprised of three files: UXML (markup), USS (styling), and CS (functionality).

Views represent a destination in which a user could be routed (e.g. a Title screen, an Options screen, etc.). My UXML views compose multiple components together to form an entire screen. Views may contain a CS file for wiring up functionality between multiple components. Typically views do not require custom styles of their own since most of the styling should happen at the component level.

Settings include Panel Settings and Panel Text Settings required for use with a UI Document during runtime.

2 Likes

We store uxml and uss in the resources folder, and the scripts are separately in different assemblies

Thanks, sounds like we’re all in a similar boat.

1 Like