Naming conventions when using webflow

Publishing help General
1

I’m just wanted to start a discussion on naming conventions when using webflow. I was wondering if there are any good guides to use for naming aspects of your page using webflow? I felt I was just naming things at random at times however maybe this comes with working with webflow more and getting use to the structure?

2

That’s a great question! We’re working on a video to help with that. In the meantime here are some pointers…

Some quick bullets on naming convention:

  • Don’t muck up your CSS by using limiting names.
  • Leave position or style specific words out of your styles. Example: A class of .link-blue will either make more work for you, or make your style sheet really messy when your client later asks you to change those blue links to orange.
  • Name your elements based on what they are, not what they look like. Avoid using names that rely on locational or visual aspects of the particular element. For example, .comment-blue is much less versatile than .comment-beta, and .post-largefont is more limiting than .post-title.

Other CSS tips when working with classes and styles:

  • Plan out your structure - It will help you keep the cascading part of CSS in mind and sets your style sheet up to take advantage of style inheritance.
  • Create your most generic styles first, then the not-so-generic and so on. You can name them the same way - broad and more basic and then more specific.
  • Use a structure that works best for you while keeping future edits and designers who will edit the site in mind.
  • is to reuse styles as much as possible.
  • Reusing classes/styles as much as possible. Like if I have multiple things that have a red background i can create a global class called “red-bg” and add it to elements i need. So i can reuse that style everywhere without doing more work. (A good way to help cut down on CSS file sizes)
  • One principle of development is D.R.Y., also known as don’t repeat yourself. Within CSS this principle can speak volumes as it is easy to continually write the same styles over and over again. Don’t. CSS was designed in a way to allow you to cascade styles and use classes so that you easily apply and inherent styles. The end goal is to write clean and light code, of which is semantic and easily managed.
  • This will keep your site neater, smaller, faster, and easier to build on top of. Less code.
    It’s all too easy to get in the mindset of automatically creating a class for every little thing that you want to format. Instead think about your overall class structure and see where it fits in the structure.

Good links:

3 Likes
3

These links are great. Thanks!

4

I also think explaining the selection of the semantic HTML 5 classes like article and section ect. would be helpful. I don’t think these are covered in any of the tutorials at this point.

5

Totally Mike. We’re working on making it easy to know what they are for inside the design like so:

6

hi @thesergie was this video ever created? if so, can you point me to it. if not, is it possible to add it to the team task list. it would be a very helpful tutorial for many. thanks!