我应该使用哪种CSS选择器来设置JSP样式。 ID或类?

时间:2012-11-21 20:17:20

标签: css web-services jsp coding-style css-selectors

我想知道的基本问题是在可读性,重用,编码风格等方面的首选。有一点需要注意的是,这个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。

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

4 个答案:

答案 0 :(得分:2)

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

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

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

答案 1 :(得分:1)

如果使用一次样式,请使用ID

如果多次使用某个样式,请使用class name。该类只需要声明一次,但在使用该类名的任何元素中引用。

多个类名可用于处理“基类”的变体。

通常,您应该使用外部样式表来允许浏览器缓存文件。

答案 2 :(得分:1)

您需要使用。这是因为您可能在该对象的页面上有多个实例。

然而 ,对于您正在做的事情,硬编码您的不同样式选项并将它们放在css文件中仍然会更好。

不必与其他页面共享,只需将其直接链接到您的给定视图即可。这也将使您避免使用一个样式引用的50个重复项。然后只为该特定对象生成类。

答案 3 :(得分:1)

您应该检查层次结构。

“ID是唯一的,Class不是唯一的”

查看这篇文章 http://css-tricks.com/the-difference-between-id-and-class/