Как браузер отображает / применяет CSS

Question

Название может вводить в заблуждение, но я не смог найти лучшего способа описать его короткими словами.

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

Давайте рассмотрим пример:

.foo {
  border-color: green;
  border-bottom-color: black;
  border-bottom-color: blue;
}

Так же он читает весь класс (.foo) и отображает его ТОГДА или принимает одно свойство, например "border-color: green;" и сделать его, а затем сделать нижний черный, а затем еще раз синий?

Почему я спрашиваю это? Я хотел знать, является ли classB более производительным, как classA (см. В следующем примере), потому что вы будете использовать меньше кода для загрузки. Но это имеет смысл, только если не будет отображаться снова и снова с одним и тем же свойством.

.classA {
  border-top-color: black;
  border-right-color: white;
  border-bottom-color: black;
  border-left-color: black;
}

.classB {
  border-color: black;
  border-right-color: white;
}

Answer 1

Когда браузер отображает документ, он должен объединять содержимое документа с информацией о его стиле.Он обрабатывает документ в два этапа:

• Браузер преобразует HTML и CSS в DOM (объектную модель документа).DOM представляет документ в памяти компьютера.Он объединяет содержимое документа со своим стилем.
• Браузер отображает содержимое DOM.