Question

考虑两个示例：

＃1在组件正前方具有内联样式：

<!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在头中具有每个组件的内联样式：

<!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>

就性能而言，使用＃2而不是＃1明显更好吗？如果可以，为什么？

内联CSS中页是个坏主意吗？

0 个答案: