CODEWITHSUNDEEP
cssperformance
ajax333221
ajax333221

Reputation: 11774

Is it bad to overwrite styles in CSS?

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:

Code Used:

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

What did the code above did unnecessarily?:

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?

Upvotes: 5

Views: 1458

Answers (5)

citystrolch
citystrolch

Reputation: 1

As for compression: not sure what the authors meant by it but if you minify the code, the browser at the other end won't "unminify" it to read it like we would want to. Empty space is ignored anyway, and if not there, that probably even speeds up the parsing...

Upvotes: 0

Drew Chapin
Drew Chapin

Reputation: 8009

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.

Upvotes: 1

Tomas Reimers
Tomas Reimers

Reputation: 3292

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

Upvotes: 1

Brigand
Brigand

Reputation: 86270

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.

Upvotes: 1

Alex
Alex

Reputation: 35179

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.

Upvotes: 6

Related Questions