Prefixing Utility Classes

Prefixes in ZoboUI offer a way to namespace utility classes, helping to avoid naming conflicts with existing styles or scripts. By default, ZoboUI does not apply a prefix, but you can add one if it suits your project's needs.

Applying a Custom Prefix

You can apply a custom prefix to all ZoboUI-generated utility classes to ensure they don't conflict with any existing USS in your project. This is particularly useful in larger projects or when integrating ZoboUI into an existing codebase.

How to Set a Prefix

To add a prefix to your utility classes in ZoboUI:

1. Open the Theme Config Asset: This can be found within your Unity project's assets.
2. Navigate to the 'Core' Section: Look for the Core section where the global settings for ZoboUI are located.
3. Specify Your Prefix: Enter your desired prefix in the prefix field. This will be prepended to all generated utility classes.

For instance, adding "zb-" as a prefix would result in the following transformation:

/* Original utility class */
.bg-red {
  background-color: #e3342f;
}

/* With "zb-" prefix applied */
.zb-bg-red {
  background-color: #e3342f;
}

Modifier Prefixes

Modifier prefixes, such as those for pseudo-class styles, are applied with an underscore (_) by default. When combined with a global prefix, the modifier appears before the prefix, so the final class might look like this:

<ui:VisualElement class="zb-bg-red hover_zb-bg-blue">
  <!-- Content goes here -->
</ui:VisualElement>

Best Practices for Prefixing

• Consistency: If you decide to use a prefix, apply it consistently across your entire project to avoid confusion.
• Clarity: Choose a prefix that is short and clearly related to your project or organization to maintain readability.
• Documentation: Ensure that any custom prefix used is well documented for team members or future reference.

Remember, prefixes are entirely optional in ZoboUI. Whether you need to add them depends on the specific requirements of your project and whether you foresee any naming conflicts.