CSS - 哪些代码渲染速度更快，效率更高？

Question

I would like to know which of below codes renders faster and is more efficient:

This -

body{background:#ddd;font-family:verdana;font-size:12px;color:#808080;}
a{color:#808080;outline:0;text-decoration:none;}
input{margin:0;padding:0;font-family:verdana;color:#808080;}
ul{padding:0;margin:0;}

Or this -

body,input{font-family:verdana}
body,input,a{color:#808080;}
body{background:#ddd;;font-size:12px;}
a{outline:0;text-decoration:none;}
input,ul{margin:0;padding:0;}

Answer 1

Efficiency is irrelevant here.

Go with whichever is easier to read/understand/maintain, which is clearly the first snippet.

However, that second snippet looks like it's been minified , which is a good thing to do, because it reduces the transfer size of the CSS - it doesn't improve the "rendering speed".

You should write your CSS in the most understandable way, then generate a minified version when you put it live.

Answer 2

I have never seen any performance issue with CSS, except one thing. When you use * in some cases your JavaScript can become very slow.