Is it nice to rewrite styles in CSS?

Question

Sometimes we try to write a CSS stylesheet with fewer possible lines.

Take a look at this example:

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

---

Scenario: We want to change:

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

---

Used code:

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

---

What did the extra code above do:

• change border-color : R, L and B (3 actions)
• change 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; 

Question: Should we sacrifice performance for lower code / readability?

Answer 1

Losses of effectiveness will not be measurable, if any.

It is always better to write well-readable code.

And at the end, you are the first example, the file size is smaller, so loading CSS is faster.

Answer 2

should we sacrifice performance for lower code / readability?

Yes! If you want to increase efficiency, compress your code , but always have a fully readable, easily modifiable, understandable, and point source version.

---

And it's usually best to have zero inline styles. If this is 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 noticeable difference (except for loading time) between them.

It is important to be consistent and make your code readable.

As for your example, I would do:

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

Just because I feel that makes it more readable

Answer 4

I think you are asking the wrong question. The sample you provided will not make a significant difference between the load time or the time it takes to display the page. I think that any web developer should focus on making the code easy to read, at least for themselves, and preferably for others.

I would do 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 is short, and not very mysterious as to what a display is, and does nothing more.

Answer 5

As for compression: I’m not sure what the authors had in mind, but if you minimize the code, the browser on the other end will not “unminify” it, as we would like. The empty space is still ignored, and if not, maybe even speeds up the analysis ...