Utility Classes - ZoboUI Docs

Utility classes form the backbone of ZoboUI, offering a more efficient and intuitive approach to styling UI elements in Unity. These classes are pre-generated based on your theme configuration, providing a wide range of styling options out of the box.

ZoboUI's Approach to Generated Classes

ZoboUI generates utility classes that encapsulate specific style properties. This approach differs from traditional USS, where styles are often grouped by component or context. ZoboUI's utility-first methodology fosters reusability and reduces the need for custom styling, streamlining the UI development process.

Examples of Generated Classes

.bg-blue-200 {
    background-color: #BFDBFE;
}

.hover_bg-blue-200:hover {
    background-color: #BFDBFE;
}

.rounded-sm {
    border-radius: 2px;
}

.mt-minus-3 {
    margin-top: -12px;
}

Traditional USS vs. ZoboUI Approach

Traditional Approach Using USS

In a typical USS setup, styles are often grouped by components. For example, a button might have a dedicated style sheet:

/* Traditional USS for a button */
.my-button {
    background-color: #BFDBFE;
    border-radius: 4px;
    margin-top: 12px;
}

<!-- UXML using traditional USS -->
<ui:Button class="my-button" />

ZoboUI Approach

With ZoboUI, the same button can be styled using utility classes:

/* Using the ZoboUI utility classes defined above */

<!-- UXML using ZoboUI utility classes -->
<ui:Button class="bg-blue-200 rounded mt-3" />

In ZoboUI's approach, each utility class usually represents a single USS property, making it clear and concise what each class does. This method is particularly beneficial for new developers, as it simplifies understanding and modifying the UI.

Benefits Over Inline Styles

According to Unity's documentation, you should:

Avoid inline styles. Use USS files instead of inline styles when you can for more efficient memory usage. Inline styles are per element and can cause memory overhead. When you use inline styles in a C# script or a UXML file on many elements, the memory usage becomes high quickly.

Inline styles, while providing a straightforward way to apply styles directly to elements, have several drawbacks:

Memory Overhead: Each element with an inline style carries its own set of styling rules, increasing memory usage. This can become problematic in projects with numerous UI elements.
Maintainability: Inline styles scattered across multiple files or scripts make it challenging to maintain and update the UI. Changes need to be made in multiple places, increasing the risk of inconsistencies.
Reusability: Unlike utility classes, inline styles don't promote reusability. The same styling needs to be repeated for each element, leading to redundancy.
Pseudo-classes: If you wanted to add pseudo-classes such as :hover and :active with inline styles, you would need to use C# scripts. This can be cumbersome and unintuitive, especially for new developers.

ZoboUI's Solution

ZoboUI addresses these concerns by advocating the use of pre-generated utility classes:

Efficient Memory Usage: By using USS files with predefined classes, ZoboUI minimizes memory overhead. The same class can be applied to multiple elements without duplicating style information.
Ease of Maintenance: Changes to the appearance of elements can be made by simply modifying or swapping utility classes in one place. This centralized approach to styling ensures consistency across your project.
Enhanced Reusability: The utility-first approach means that styles are not tied to specific components or contexts. This makes it easy to reuse styles across different parts of your UI, fostering a more efficient and modular design.
No Need for Naming Classes: An additional benefit of using ZoboUI's utility classes is the elimination of the need to figure out names for your classes. This reduces the cognitive load involved in naming conventions and focuses on what the classes do, rather than what they are called.

In summary, ZoboUI's utility classes offer an efficient, maintainable, and scalable approach to styling in Unity's UI Toolkit. By abstracting common styling properties into reusable classes, ZoboUI streamlines the UI development process, making it more accessible and efficient, especially for projects with complex UI requirements.