css - 我应该使用哪些 CSS 选择器来设计我的 JSP。 ID 还是类？

Question

我想知道的基本问题是在可读性、重用性、编码风格等方面首选什么。需要注意的一件事是这个 JSP 可以在页面的多个部分使用，对于这个天真的例子让说它只是一个 div，需要以某种方式设置样式并多次放在页面上。

我知道我可以将该类外化到一个共享的 CSS 文件中，但是这个类只会被页面的这一部分使用，例如，这个框是整个页面中唯一需要为紫色的框产品，在我看来，为了清理我的 JSP 而弄脏共享的 CSS 是没有意义的。那么什么更好

选项 1(使用 ID 选择器)

<% String contextName = request.getParameter("myContext"); %>

<style type="text/css">
    #<%=contextName %>_myDiv
    {
        font-weight: bold;
        background-color: purple;
        height: 20px;
    }
</style>

<div id="<%=contextName %>_myDiv">
    <div>Blah Blah Blah!</div>
</div>

选项 2(使用类选择器)

<% String contextName = request.getParameter("myContext"); %>

<style type="text/css">
    .<%=contextName %>_myDiv
    {
        font-weight: bold;
        background-color: purple;
        height: 20px;
    }
</style>

<div class="<%=contextName %>_myDiv">
    <div>Blah Blah Blah!</div>
</div>

在我看来，选项 2 会使事情更容易调试，因为它们使用的是共享类，但是如果页面上有(例如)50 个这样的框，那么它将导致此类被声明 50 次.这是否会给浏览器带来额外的腿部工作。或者，如果我使用 ID 选择器方法，那么我会创建 50 个独特的样式，它们执行完全相同的操作，从而导致浏览器需要额外工作才能匹配所有 ID。

那什么更好呢？注意:这两种方法都有效，我只是在寻找每种方法的优缺点。

Answer 1

body 中无论如何都不应该有style 元素，因此您应该将样式放在样式表中。由于 id 在页面中应该是唯一的，因此您可以使用类。

如果您不想这样做，那么也没有理由使用 style 标签。只需将样式放在元素中即可:

<div style="font-weight:bold;background-color:purple;height:20px;">
  <div>Blah Blah Blah!</div>
</div>