0

The basic question I'm wondering about is what is preferred in terms of readability, reuse, coding style, etc. One thing to note is that this JSP could be used in multiple parts of a page, for this naive example lets say its just a div that needs to be styled a certain way and put on a page several different times.

I realize I could externalize the class to a shared CSS file, but this class will only ever be used by this part of the page, say for instance this box is the only one that will ever need to be purple in the entire product, in my opinion it doesn't make sense to dirty up a shared CSS in order to clean up my JSP. So what is better

Option 1 (Using ID selectors)

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

Option 2 (Using class selectors)

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

It seems to me that option 2 would make things easier to debug since they are using a shared class, however if there are (for example) 50 of these boxes on the page then it will result in this class being declared 50 times. Does this create extra leg work for the browser. Alternately if I use the ID selector method then I create 50 unique styles that do the exact same thing causing extra work for the browser to match up all the IDs.

So what is better? NOTE: both these ways work, I'm just looking for the pros and cons of each method.

wfoster
  • 781
  • 10
  • 23
  • So many duplicates: http://stackoverflow.com/questions/544010/css-div-id-vs-div-class, http://stackoverflow.com/questions/298607/css-best-practice-about-id-and-class?lq=1, http://stackoverflow.com/questions/932020/whats-the-difference-between-using-class-or-elementid-in-css?lq=1 – Justin Helgerson Nov 21 '12 at 20:20
  • @Ek0nomik those are not duplicates, this is a question about CSS inside a reusable JSP file. – wfoster Nov 21 '12 at 20:28
  • It doesn't matter whether it's JSP, C# or Perl... the rules of when to use a class and id are the same. – Justin Helgerson Nov 21 '12 at 20:41

4 Answers4

2

You shouldn't have style elements in the body anyway, so you should put the style in a style sheet. As an id should be unique in the page, you would use a class.

If you don't want to do that, then there is no reason to have a style tag either. Just put the style in the element:

<div style="font-weight:bold;background-color:purple;height:20px;">
  <div>Blah Blah Blah!</div>
</div>
Guffa
  • 687,336
  • 108
  • 737
  • 1,005
1

If a style is used once, use an ID.

If a style is used more than once, use a class name. The class only needs to be declared once, but is referred to in any element using that class name.

Multiple class names can be used to handle variation from a "base" class.

In general, you should use an external stylesheet to allow the browser to cache the file.

Diodeus - James MacFarlane
  • 112,730
  • 33
  • 157
  • 176
1

You will want to use classes. This is because you may have more than one instance on the page of that object.

However, For what you are doing it would still be better to hard code your different style options and place them in a css file.

It does not have to be shared with other pages just link it directly on your given view. This will also keep you from having 50 duplicates of one style reference. Then just generate the class for that particular object.

Malkus
  • 3,686
  • 2
  • 24
  • 39
1

You should check the hierarchy.

"ID are unique, Class is not unique"

check out this article http://css-tricks.com/the-difference-between-id-and-class/

brokeneye
  • 41
  • 1
  • 5