Streaming live at 10am (PST)

Class names in Workflow


#1

Hey guys, I am just startring using webflow and I have a few questions about classes.
Should every interface icon have a unique class name? I mean those icons that are reused in many places. For example, if I have a small avatar next to an article, should this avatar has a unique class name, something like “avatar”?
What if next to it there is a username. Should it has another name “username”? Perhaps there is more information about classes (except for the videos I watched) you could suggest?

Thx!


#2

Hey again!

The answer to this questions is pretty much the same as the one you asked about the images in the div blocks. You don’t have to create custom class names for each element since Webflow will automatically name it for you. But it can get a little confusing when, for example, you want to add some custom code and you don’t know if you need to target the class Div Block 12 and Div Block 13. And it really helps with organization and keeping yourself sane :crazy_face:


#3

Josef, I completely agree with Ryan here. You don’t have to create a custom class name for each element in Webflow, but it makes your life so much easier! If you want to apply the same class to several objects, it’s much easier to type (and remember) a proper class name than ‘div block 25’. Also, if you’re exporting your code, your Developer will by happy to have logical class names! For class names I often use something like “heroWrapper” or “navLink”, so it can be read easily and describes its content well!


#4

Are you guys using BEM naming? I am working on this at the moment as I want a solid convention for cross site copy pasting of modules, working with others and I don’t see a better alternative. Hello @lauraniebel from up the coast


#5

Here’s a nice blog post by @mistercreate

BEM really changed my workflow! I highly recommend it :slight_smile: