1

Consider two examples:

#1 With inline styles directly before the component:

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
    <style>.component-1 { color: red; }</style>
    <div class="component-1">...</div>

    <style>.component-2 { color: blue; }</style>
    <div class="component-2">...</div>

    <style>.component-3 { color: yellow; }</style>
    <div class="component-3">...</div>

    <!-- repeating components do not include their <style> again -->
    <div class="component-1">...</div>
  </body>
</html>

#2 With inline styles of each component in head:

<!DOCTYPE html>
<html>
  <head>
    <style>
      .component-1 { color: red; }
      .component-2 { color: blue; }
      .component-3 { color: yellow; }
    </style>
  </head>
  <body>
    <div class="component-1">...</div>
    <div class="component-2">...</div>
    <div class="component-3">...</div>
    <div class="component-1">...</div>
  </body>
</html>

In terms of performance, is it significantly better to use #2 instead of #1? If so why?

Marvin3
  • 5,741
  • 8
  • 37
  • 45
  • 1
    Id sas #1 is more performant, but not really *significantly*. Why not open both and look at the browsers performance tab? – Jonas Wilms Oct 27 '18 at 09:41
  • it's clear that the first one is better for maintenance ... we are supposed to separate HTML and CSS which not the case of #1, it's like using inline styles – Temani Afif Oct 27 '18 at 09:43

0 Answers0