CSS Specificity in Webflow? DRY Combo Classes? Element agnostic styles?

Design help General
1

Hello, I am brand new to Webflow, I come from a HTML/CSS by hand in a code editor background and I am wondering how is specificity handled in Webflow? I’m not even sure what to call what I’m asking…

Example:
.shifted-right {
margin-left: 30px;
}

I’m used to being able to declare simple styles like above and then if I want to shift any element – I just add shifted-right to the html tag for any element. A heading here, an image here, a div there.

From what I’m seeing with combo classes in Webflow I would define a class for each element and then create another new combo class of shifted-right per element. I’m trying to be more DRY than that for obvious reasons.

Is there a way to do what I’m asking in Webflow? Without writing a new combo class for every element I need to shift?

UPDATE: I just figured out how to create a global combo class. Is this best practice? I also see where I could use an html embed to add my styles and see them live in the WF designer, but I’m a freebie account so no embeds for me. :confused:

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

2

hi @SpaceTiger.design WF have its own rules compare to standard developing for bad or good. WF is more like component based. So there is no way to create one class .red and use it on any element. You have to create new combo class element.red for each element you need, so WF doesn’t follow DRY . Instead you can create a component and use this component as many time you need. You can add custom style in project setting or in page settings or in in HTML embed.

I will recommend to visit Webflow University to learn how to work with this platform. Feel free to use search input field of this forum to find answers before you place request as most of your future questions have most probably solution.