Hello designers!
On the next Webflow Workshop, we’ll be talking with @nate , our Product designer. We’ll be talking about Best practices for site structure and class naming convention.
Be sure to add a calendar reminder for every Tuesday morning at 10am (PST).
See you there! 
====
Here is the recording:
Great! Looking forward to Tuesday.
Updated the topic!
Bring an open mind and your Notepad.exe 
awesome! thank you! you rock!
Bumping this thread as a friendly reminder to join us for today’s Workshop at 10am (PST). 
I roll with Notepad++
and yaaay. It will be 8PM in South Africa, perfect timing after din dins
Here is the call in link if you want to be part of the recording:
We start in an hour.
Time for me to get ready…
thanks for this workshop. @nate your insight was awesome. wish we had more time to ask you questions though. seems we went into site critiques pretty quickly. there were a couple of questions about naming conventions that were asked in the chatbox but were not answered. regardless…really appreciate your time.
Sorry we couldn’t get all questions answered. I’ll ping Nate to see if he could continue the conversation on this thread
all good 
it just would have been cool if there was one more call for naming convention questions before going into the critique portion…that way more questions related to the topic could have been asked before nate left…
i’ll make sure to do that from now on. great suggestion
BTW - what question do you have for Nate?
coolio…thanks! as for the question both myself and @Anna_Kelian were interested in his thoughts on atomic css as well as his thoughts/strategies on dealing with inheritance issues with classes since we can’t rearrange them in webflow.
Great webinar!
About the classes, i think re-naming classes once you’ve defined every element in your site is a great way to handle classes.
Hey @dapitts08 thanks for reaching out. I’m assuming you’re referring to Brad Frost’s project here: http://patternlab.io? I think it was renamed to Pattern Lab sometime last year. Conceptually, I think this is a great method to break up a site into it’s functional pieces and an interesting way to think about web design in general. I like that it ensures aesthetic and functional consistency because you’re using a common set of pieces to build up unique components.
As far as inheritance goes, can you give me an example of an issue you’re running into?
thanks! yep brad frost’s pattern lab is what i was referring to. i am also interested in harry roberts’ BEMIT. i said inheritance originally but i guess cascading would be the better word. for instance i ran into this issue when trying to use some of these principles in webflow (albeit i am a newbie when it comes to it) when i want to add utilities classes like - no padding…depending where it was created in my project…would determine how universally it could be used since we can’t rearrange classes. i also ran into an issue with stacked classes and not being able to remove inner classes without deleting all classes that are applied. based on both of those two issues i ended up just ditching the idea. so i am wondering if trying to use these techniques in webflow is likely just a no go at this time or it was more about my implementation.
Great questions.
The trick to Webflow CSS is understanding what is happening when you create a global class vs a combo class.
If you want to keep things global then never make changes to the class while it is linked to another. As soon as you make changes to the settings of the nest has a whole Webflow will create a new combo class in the CSS.
What you are running into is not a cascading problem but a specificity problem in CSS. A combo class is more specific then stacked global classes.
I’ll explain further with more an example. ( I have pre made the global classes so the settings take effect immediately.)
I start with some basic elements on the page. Similar to my last example I want to create a modular column layout. I know I am going to want to use my classes in many different areas so I create them as Global classes on separate elements.
I start by creating col-20, col-50 and col-80.
Now I want to add some background colour to each column, using a global class.
Everything looks a little close together. I will use my margin and padding global class to give everything uniform spacing.
I am not happy with the background color so I am going to change it. The important thing to remember is you have to select the global class within the nest. If you don’t you will create a combo class in the CSS, which will cause you specificity issues.
Does that give you any answers?
@AlexN This is exactly how I’m working on my current website. I create a style sheet page for each global class than as I create the layouts i just add the classes to style each element. However, since you don’t have one class let’s say to define a cloumn’s color and width and padding etc. you will have to add any new atomic class to all coloumns you want updated, which is a tedious job. That’s why planning from the start is very important.
Also as @dapitts08 mentioned for example when i want to change the color of a column let’s say and the color atomic class is the first class in the selectors bar followed by let’s say 4 other classes, one has to delete all classes, change the first class, and then add the other classes again. Although, if you rename a global class in a combo of global classes, it actually doesn’t rename the class but replaced it with another global class. That is helpful, however, if I do actually want to rename a class then all hell breaks loose. only the name in that combo is changed, then i have 2 class names for the same style example background-color-1.
I am not sure I follow. In my example I have one class the controls margins and padding for all of the columns. If I want to update the margins and padding I can make the changes to all the columns at once by adjusting the one class.
Yes yes adjusting the class updates all elements with that class.
Maybe my namings are a bit confusing, I’m using something called Zen Coding, or something close to it.
I was showing how renaming a class in a class combo was actually replacing the class with another existing class like .bgc2 with .bgc1 (bgc = background color).
