renton88

Потому что по умолчанию стоит модель content-box, и она убога.
Хотя для того, чтобы например его можно было переопределить в плагинах, предпочитаю такой способ

html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}

UPDATE: Решил посмотреть, как влияет применение универсального селектора на производительность.
Взял статью frontender.info/css-performance-revisited-selector..., и оттуда код

<script type="text/javascript">
    ;(function TimeThisMother() {
        window.onload = function(){
            setTimeout(function(){
            var t = performance.timing;
                alert("Speed of selection is: " + (t.loadEventEnd — t.responseEnd) + " milliseconds");
            }, 0);
        };
    })();
</script>

Также использовал 1000 идентичных кусков данной разметки

<div class="tagDiv wrap1">
  <div class="tagDiv layer1" data-div="layer1">
    <div class="tagDiv layer2">
      <ul class="tagUl">
        <li class="tagLi"><b class="tagB"><a href="/" class="tagA link" data-select="link">Select</a></b></li>
      </ul>
    </div>
  </div>
</div>

Проверял 2 способа: с пустым css файлом, и с CSS кодом

html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}

Пока только на последнем хроме. Запускал страницу по 50 раз и вычислил средние значения:
В первом случае, без css кода, это оказалось 124ms, во втором - 121ms.
Понятно, что это статистическая погрешность, поэтому пришел к выводу, что разницы никакой нет.
Если предложите другие варианты тестирования - буду очень рад.