Question

I find that a lot of my time while writing css is wasted on locating the right place to put new rules. For example, if I have this stylesheet:

.a, .b, #c {
  display:inline-block;
}

.d {
  color: #fff;
}

And I want to add .d {display:inline-block;), I’ll often think for a sec about whether I should add this to the 1st or 2nd section. Meaning:

.a, .b, #c, .d {
  display:inline-block;
}

vs

.d {
  color: #fff;
  display:inline-block;
}

Obviously as CSS gets more complicated, there is more time wasted on this. Another time consumer is the process of locating existing rules in order to edit them, when the selector appears several time in the stylesheet.

Is there a specific workflow / tool that can make the CSS writing process faster and more efficient?

---

Please Note:

1. A similar question already exists, but it was answered two years ago, so an up-to-date answer is required

2. As a relatively new SO user I wasn’t sure whether this belongs here or on Programmers. If this is off-topic on SO I’ll be happy to migrate it.

Answer 1

I ran into this problem a few years back and like you, I noticed that whenever I was working with large CSS files (say… 1000+ lines), that most of the time was spent looking up specific selectors, more so than editing or writing specific rules.

Because of that, I have a few conventions I follow that probably made working with CSS files 10x easier for me. The key is to realize that the bottleneck in your workflow is looking up selectors, so the key is to make this process easier.

1. Write your CSS selectors in the order as they appear in your HTML mark up. More often than not, we start writing styles by looking at our mark up first (via inspect element, etc.) so when you write your selectors in the order of your markup, you have a rough idea for where to look for the rules in your CSS file.

   Thus, for your example code, the answer depends if you are sacrificing the organization for code reuse. Sure, you might be able to reuse code if you keep things in the same selector (i.e. .a, .b, .c, .d), but are you making the selector impossible for you to find when you revisit your CSS 6 months later? Use your judgement.

2. Write styles on a single line. Unless there’s some good reason you can’t write this way (e.g. you’re using a CSS preprocessor where you have to nest your rules, you work with an existing codebase maintained by 10 other developers, etc.), writing styles on a single line helps you find styles MUCH faster. For example, writing like:

   selector { property1: value, property2: value; property3: value; }
   selector2 { property1: value, property2: value; property3: value; }
   selector3 { property1: value, property2: value; property3: value; }
   

   Instead of:

   selector { 
     property1: value, 
     property2: value; 
     property3: value; 
   }
   
   selector2 { 
     property1: value,
     property2: value;
     property3: value;
   }
   
   selector3 { 
     property1: value,
     property2: value;
     property3: value;
   }
   

   Writing rules on a single line allows you to SCAN selectors. Plus, you can easily reduce a CSS file with 1000+ lines to 10 times fewer that amount, which makes it much more manageable. Again, remember that te bottleneck in our workflow is looking up selectors. So while writing the “traditional” way makes reading properties easier, it actually slows down the process for looking up selectors. What’s more, if you write selectors in a single line, you can then use indentations like this:

   header { property1: value, property2: value; property3: value; }
     header h1 { property1: value, property2: value; property3: value; }
     header h3 { property1: value, property2: value; property3: value; }
     header h3 span { property1: value, property2: value; property3: value; }
   body { property1: value, property2: value; property3: value; }
   

3. Find and replace is your bread and butter. If you organize your selectors using the two suggestions above, often finding selectors for major sections can lead you close enough to find the specific rules that you need. For example, if you’re trying to find something ultra specific like #someDiv header ui li a:hover and you can just do a search for #someDiv and that would lead you close enough to find the rest.

Hope that helps 🙂