How do you name classes?

Does anyone have any advice or lessons on some common class naming rules? Is there any particular nomenclature anyone uses in particular?

1 Like

I will sometimes use a name that relates to the section the element resides in, or use a name that relates to a group of elements in a specific area of the website. This makes it easy to find them and also keeps classes organized.

Good luck :slight_smile:

1 Like

Just don’t use things such as big or small or red and what not.

If at a later date you want to change say the colour of a box then if you change the colour to blue yet the name is red then that’s going to be very confusing. Instead use a name which describes what it is not what it looks like as the name of what it is very likely isn’t going to ever change.

Best wishes,

Mark

Hey @Michael_Messina - our designer @nate did a workshop with Nelson on class naming conventions last year that might be helpful, and our recent Medium post about building our own site in Webflow has some interesting notes about using a BEM model for class naming.

Hope this helps!

@Mark_Bowen I agree with you in the sense that you should be thinking/planning ahead as much as you can when naming your classes. However, Webflow allows you to rename classes should you need to do so in the future. You can simply go to the class selector bar in the Style panel and then hover over the class name you’d like to edit. From there you’ll see a pop-up that lets you rename the class (see the image below). This can also be done from the Style Manager panel as well. Hope that’s helpful! =]

Does this change the styles, or keep the styles after a class name change?

Yep you’re absolutely right but even still I was just thinking that it’s always best to get into the habit of naming things appropriately to start off with otherwise you might come to the code away from Webflow (if you’re hosting elsewhere for example) and then not even know what your own CSS classes are for :wink:

Always best to start as you mean to go on I was always told. Can’t say I always do that though :wink: :joy:

@anonmusic the styles remain the same.

Can’t say I always practice what I preach either. LOL

Sweet! Gotta get crackin’ on my website then, and adjust… my brother told me that most folks do not use capitalization in CSS class names…

i always try to use this: BEM 101 | CSS-Tricks - CSS-Tricks

2 Likes

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