How to insert / edit / group css rules faster?

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

You should group styles based on their purpose and logic, rather than by common style attributes. If .a and .b have nothing in common it's okay to put display: inline-block; on each of them.

Focus on maintainable code rather than super-efficient CSS files (there are minifying and compression libraries that can do that for you).