Shared CSS classes

I’m completely new to Webflow, but I have coding experience.

While building a website, I always try to abstract CSS classes as much as possible in order increase reusability. So, for example, if I would need to style each item in an unordered list I would use something like:

ul li {
    code here...
}

…instead of putting the CSS code directly on the LI tag.

Is something like that possible in Webflow?

Hi @Zlate :smile:

You can do this via the custom code area - Custom code in head and body tags | Webflow University

But, to do this within the Webflow designer tool is not yet possible. It is something we are working on for a future release.

Hope this helps

Great, thanks. It’s my second day with Webflow and it’s my favourite so far, even surprising Macaw, which was my ex-favorite.

2 Likes

I’m also trying to come up with general classes that can be used in more situations.

For example, I want to have a class “Section” for defining general attributes, and then each section will have specific class. After watching some tutorials I came up with the attached screenshot, and it works well.

There is one thing that I can’t achieve. Half of my sections will need to share common attributes. Therefore, besides the general “Section” class, I would need another general class that will apply to half of my sections. I don’t know how to achieve that via Webflow.

OK, I think I’m starting to understand. It’s theoretically possible, but not very intuitive.

For example, once I’ve defined a general “Section” class, and I want to add a second one, I’m forced to nest it (see attached).

What I wanted to do is create another class, which will not be nested within the general “Section” class.

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.