Top speed up dev time and also maintain consistency within your design it's good to have a collection of go-to layout/utility classes.
I am yet to find a perfect balance between these classes and the standard use of classes in css but by using no utility classes you end up with a bunch of extra css that is just repeating the same task. Also, using too many of these classes just doesn't work with webflow as you can only remove classes in the same order you added them.
Use utility & layout classes for the stuff you keep repeating.
Using % as widths with each responsive classnames allows you to quickly add an additional class without having to worry that you might break a layout somewhere else in your project.
Want to make a row full-width on small screens but keep it as it is on larger one, just add "Width 100 SM".
Shadows can be more than just a flashy effect — used thoughtfully, they let you position elements on a virtual z-axis to create a meaningful sense of depth.
Small shadows with a tight blur radius make an element feel only slightly raised off of the background, while larger shadows with a higher blur radius make an element feel much closer to the user.
You might use a smaller shadow for something like a button, where you want the user to notice it but don’t want it to dominate the page.
Medium shadows are useful for things like dropdowns; elements that need to sit a bit further above the rest of the UI.
Large shadows are great for modal dialogs, where you really want to capture the user’s attention.
Establishing an elevation system
Just like with color, typography, spacing, and sizing, defining a fixed set of shadows will speed up your workflow and help maintain consistency in your designs.
You don’t need a ton of different shadows — five options is usually plenty.
Start by defining your smallest shadow and your largest shadow, then fill in the middle with shadows that increase in size pretty linearly.
Combining shadows with interaction
Shadows aren’t only useful for positioning elements on the z-axis statically; they’re a great way to provide visual cues to the user as they interact with elements, too.
For example, say you had a list of items where the user could click and drag each item to sort them. Adding a shadow to an item when a user clicks it makes it feel like it pops forward above the other items in the list, and makes it clear to the user that they can drag it.
Similarly, you can make a button feel like it’s being pressed into the page when a user clicks it by switching to a smaller shadow, or perhaps removing the shadow altogether.
Using shadows in a meaningful way like this is a great way to hack the process of choosing what sort of shadow an element should have. Don’t think about the shadow itself, think about where you want the element to sit on the z-axis and assign it a shadow accordingly.