https://www.youtube.com/watch?v=B-AAyZQps9U

The Problem with Conventional Webflow Utility Classes

<aside> <img src="/icons/checkmark_purple.svg" alt="/icons/checkmark_purple.svg" width="40px" /> Must add & remove utilities for each instance of an element to change style

</aside>

<aside> <img src="/icons/checkmark_purple.svg" alt="/icons/checkmark_purple.svg" width="40px" /> Must temporarily remove utilities to style the base class across breakpoints

</aside>

<aside> <img src="/icons/checkmark_purple.svg" alt="/icons/checkmark_purple.svg" width="40px" /> Must remove last utility to modify the one before it

</aside>

The Solution of Nested Utility Class Approach in Lumos

<aside> <img src="/icons/checkmark_purple.svg" alt="/icons/checkmark_purple.svg" width="40px" /> Create a class

</aside>

<aside> <img src="/icons/checkmark_purple.svg" alt="/icons/checkmark_purple.svg" width="40px" /> Add utilities to end of class name after double dashes Double dashes recommend to visually separate utilities from the rest of the class name.

</aside>

<aside> <img src="/icons/checkmark_purple.svg" alt="/icons/checkmark_purple.svg" width="40px" /> Rename the class to automatically update all elements using that class

</aside>

<aside> <img src="/icons/checkmark_purple.svg" alt="/icons/checkmark_purple.svg" width="40px" /> Copy utilities from one class to another if needed

</aside>

<aside> <img src="/icons/checkmark_purple.svg" alt="/icons/checkmark_purple.svg" width="40px" /> Modify or remove any utility without affecting the others

</aside>