Is it bad to overwrite styles in CSS?

Question

Sometimes we try to write the CSS Style Sheet with the less lines possible.

Let's look at this example:

Note: Previously borders where all width:1px, border-style:solid and border-color:#000

---

Scenario: We want to change:

• the width of: R, L and B to 0px
• the border-color of: T to #ddd

---

Code Used:

border:0 solid #ddd;
border-top-width:1px;

---

What did the code above did unnecessarily?:

• changing the border-color of: R, L and B (3 actions)
• changing the width of: T (1 action)

---

Here is the code with 0 unnecessary actions:

border-right-width:0;
border-bottom-width:0;
border-left-width:0;
border-top-color:#ddd;

The question is: should we sacrifice efficiency for less-code/readability?

Answer 1

The efficiency loss will not be measurable, if any.

It is always better to write well readable code.

And in the end you first example's file size is less, so downloading the CSS is quicker.

Answer 2

should we sacrifice efficiency for less-code/readability?

Yes! If you want efficiency, compress your code, but always have a fully readable, easy to modify, clear and to-the-point, source version.

---

And it's usually best to have zero inline styles. If it's just one element, give it an id and put the style for it in your CSS file.

Answer 3

In my opinion, rewriting CSS is part of CSS.

As for efficiency, I don't think you will notice a measurable difference (with the exception of download times) in between the two.

What is important is to be consistent, and make your code readable.

As for your example, I would have done:

border:none;
border-top:1px solid #ddd;

Simply because I feel that makes it more readable

Answer 4

I think you're asking the wrong question. The sample you provided is not going to result in much of a difference at all between download-times or the time it takes to render the page. I think any web-developer's main focus should be on making the code easily readable to at least themselves, and preferably to others.

I would have done this:

border-width: 1px 0 0 0;
border-style: solid; /* may not be necessary as many browsers use this as default */
border-top-color: #DDD;

It's short, and not very cryptic as to what the display is like, and doesn't do anything unnecessary.