[melky]

непонятно, с чего такой вывод взялся. Если ты добавляешь css-правило браузеру еще надо выяснить к каким элементам его применить, в отличие от непосредственного назначения стиля элементу

потому что при добавлении через CSSStyleDeclaration ( проще, element.style ) отрисовка происходит через каждое действие.

а так..

<style>div{border: 5px solid;background-color:red;border-top-style:dashed;border-bottom-width:10px;border-left-color:blue;}</style><div>ololo</div>

в консоли видно, что есть только три PAINT после Event Click. ( 1056х180 )

а теперь попробуем сделать это через JS

<div id="one">ololo</div>

<script>

var s = document.getElementById( "one" ).style;

s.border = "5px solid";
s.backgroundColor = "red";
s.borderTopStyle = "dashed";
s.borderBottomWidth = "10px";
s.borderLeftColor = "blue";

</script>

видим : 2 Recalculate Style и 4 Paint

телодвижений больше