Question

instead of this:

#1 span.error { color: #fff; }
#2  span.error { color: #fff; }

Is it better/quicker to use:

#1 span.error, #2 span.error { color: #fff; }

Is there a way to shorten even more?

I am accepting Ana’s answer, but for me agam360 hit the target first.
Thank you all

Answer 1

Yes, I believe it is better – you avoid redundancy and if you have this situation multiple times, it can significantly reduce the size of your CSS.

Even shorter would be to add the same class to the two ids. Something like:

<div id="#1" class="myclass">
  <span class="error">error text 1</span>
</div>
<div id="#2" class="myclass">
  <span class="error">error text 1</span>
</div>

and then you can write:

.myclass span.error {
  color: #fff;
}

If you don’t have any span.error elements outside the elements having ids #1 and #2, then you could compact this further to just span.error { color: #fff; }

If, in addition to this, the elements having class .error are always <span> elements, them it cam become .error { color: #fff; }

So how much you can compact things really depends on your HTML structure.