Best Practice For Naming Classes

One of the challenges I frequently encounter using WebFlow is with naming classes.

I am wondering if there are any best practice guides to naming conventions etc. when creating class names? Just like in coding, a minimal list of names would likely be a better finished product where names are re-used efficiently and are easy to read and follow.

Thanks for any suggestions.

1 Like

Hello @mmediaman, I hope that I can help answer that.

In my mind, you have two ways to name classes. Minimalist or Detailed.

Simply put, Minimalist would “navbar” while Detailed would be “Navigation Bar.”

I personally use the Detailed way, because I like to easily tell different classes apart.

I can see now that I wasn’t really clear in my post.

I was looking for best practices to use the least number of classes throughout a site.

Oh I see now. Well my recommendations for that are:

  • Clean Up classes every time you exit the Designer view or when you are completely finished with a site.

As you can see, my list is limited. :joy:

Hopefully someone else can provide a little more insight on the matter.

Well, I can share my experience too. :smiley:

I came to the point when I am trying “to think twice” before create new class.

  • When I know what kind of font I will mostly use I am going to apply it to body tag, without adding class. In this way paragraphs and text will already have font that I need and sometimes do not need class for it.
  • If I will have few elements same size/margin/padding but different background (color) I create 1 class for keep form and few classes for colors. Usually that “color-classes” I can use for style something else too.
  • Sometimes I do not use classes at all (rows, some text blocks, headers etc.), if you create div and have to style it anyway, and inside that div will be header or paragraph, just style div’s font color, font size, font aligning so you will not have to add class to paragraph.

So, just “think out of box” sometimes :wink:

Cheers,
Anna

7 Likes

Thank you very much for your reply @sabanna! Your suggestions are VERY helpful!

*we have a great community here :yum:

2 Likes

There are several really detailed and well written posts you can search in the forums. Sergie (@thesergie) wrote a good post on CSS best practice that includes methodology and syntax and many people have written about how to manage and create global classes which I think are essentially what you are after for reusability.

Webflow does not implicitly use your class names as entered, so it is a good idea to adapt to the methods it uses especially if you intend to customize or edit code outside of Webflow or use Javascript that calls classes by name.

Webflow converts all class names to all lowercase and replaces spaces and underscores with dashes (hyphens). Dashes are the recommended syntax for CSS (many JS libraries use camelCase). It also uses dot notation so your-class shows up in the CSS as .your-name

If you have a personal account or above, try exporting the code and looking at the published html and CSS - it will open your mind up to a great deal more to see how Webflow produces clean code and the methods and structure they use. If you are on a free account, you can still learn by using the chrome inspector on a published page.

Hope it helps. Remember to search the forums - tons of great posts on just about every subject - instantly.

2 Likes

Tremendously good advice @sabanna! It took me a long time to realize how much you can leverage the cascade to simplify styling from top down.

1 Like

:slight_smile: Yeah our community is really great.

Thank you, @mmediaman and @vlogic, will be glad if my experience will help :blush:

2 Likes

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