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.