Best practices for managing Classes in a design

Design help General
1

I’ve been working on a couple of websites with webflow for about a month now and I’m realizing that I have WAY more Classes in both of my designs than I need. It always seems way easier in the moment to fix a problem by assigning a new Class to an element and tweaking the margin, padding, etc than to fix an existing class. Unfortunately, I end up with a bunch of random classes that are only used once or twice. Also, I always name them dumb things because I’m in a hurry.

Two questions:

  1. Does anyone have any helpful suggestions for how to go about planning out classes and setting up guidelines for yourself in your designs?
  2. Do you have a taxonomy that you use in naming your classes?

Thank you!

2

Also, in case anyone is interested, here are the sites I’ve been working on. They aren’t finished but they’re looking decent:

http://green-lawn-pros.webflow.com/
http://bill-breakey-llc.webflow.com/

3

What I usually do is tag things that I can group together.

.nav - overall container
.nav-item - container for each nav div
.nav-link - also could be .nav-text
.nav-icon - self explanitory

Now, there is one thing I wish you could do in Webflow. When I make a div into a font awesome icon, the classes on that div would be something like…

.nav-icon .fa .fa-bars

If I want to make some style changes to .nav-icon I have to delete .fa and .fa-bars, make my changes, then reapply those font awesome classes.

4

nice sites you have made :smile:

5

Nice sites Ryan. I’m curios, what hardware are you using? (PC, Mac, Retina Screen…) @PixelGeek pretty much nailed it. Just try to make as much sense on your IDs and classes as you can and move the heriarchy. Its nice when you can humanly read another persons assigned classes and not have to guess at them!

1 Like
6

Thanks, guys! I’m using a Retina Display MacBook Pro.

1 Like