CSS - какой код рендерит быстрее и эффективнее?

Question

Я хотел бы знать, какой из приведенных ниже кодов рендерится быстрее и эффективнее:

Это -

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;}

Или это -

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

Эффективность здесь не имеет значения.

Придерживайтесь того, что легче читать / понимать / поддерживать, что явно является первым фрагментом.

Однако этот второй фрагмент выглядит так, как будто он был минимизирован , и это хорошая вещь, потому что он уменьшает размер передачи CSS - он не улучшает «скорость рендеринга».

Вы должны написать свой CSS наиболее понятным способом, а затем создать минимизированную версию, когда вы ее запустите.

Answer 2

Я никогда не видел никаких проблем с производительностью CSS, кроме одной вещи.Когда вы используете *, в некоторых случаях ваш JavaScript может стать очень медленным.