Question

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.

Answer 1

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>