What are good 'marker' css styles to define?

Question

I am finding it useful to define 'marker' css styles such as 'hidden' or 'selected' so I can easily mark something as hidden or selected - especially when using a tag based technology like ASP.NET MVC or PHP.

.hidden
{
    display:none;
}

.newsItemList li.selected
{
    background-color: yellow;
}

I don't especially feel like reinventing the wheel here and wanted to know what other things like this are useful or common - or if there are any pitfalls to watch out for.

Should I look at any specific css frameworks for other things like this? Plus is there a name for this type of css class that I can search by.

Answer 1

Let me give you an answer from a very novice web developer who has recently considered using CSS classes as "markers". Please don't take this as a definitive answer, as I may be completely wrong, but look at it as another point of view.

I was going to use some marker classes, too. I created one called .center to center the elements in a DIV tag. However, I was struck with the idea that I'm looking at CSS all wrong. I reasoned that CSS is supposed to define how an element is to be displayed without having to change the HTML page. By using marker classes, like .center for example, I would have to change BOTH the CSS and HTML if I wanted that DIV tag to be right-justified next month. So instead, I created a .latestHeader class (the DIV is to hold the "latest information" such as a news item), and in that class I set the text to align center. Now, when I want to change the justification of the text, I simply change the CSS for that DIV and I don't have to touch the HTML.

Answer 2

In regards to your question about CSS frameworks...

Personally I've always found the W3C has the most complex but also most accurate answer to any CSS question.

After many years of programming and playing around with CSS/HTML/PHP I agree with the above comment.

There is no harm in defining a marker for something to be centered or right-aligned using something along the lines of a '.center' or '.righths', but keep in mind as above that if you want to change a whole slab of text your work will be increased because you have to edit both CSS and HTML.

Defining the format for a whole section will mostly likely work out more logical, because if you want to change the section months down the trail, you just have to edit the format of one CSS declaration as opposed to editing each individual article.

CSS was however designed as the ultimate styling language which could allow an administrator to make a website look exactly what they want it to. Keep in mind though that excess CSS will increase the load on a server, will increase the time before your client sees your page and in line with the 'feng shui of web design' it is possible to go overboard with too much styling.

Answer 3

You should really grow this list on a need basis instead of soliciting a list of generic classes across the board--you'll only end up with bloat. If you want to avoid reinventing the wheel the look into some CSS frameworks (blueprint or 960). In some respect, generic classes like .center { text-align:center } do have some level of redundancy but often times they're needed. For example the following pattern which is all too common but should be avoided:

element.onclick(function(e){ this.style.backgroundColor = 'yellow' }

That's bad because you really ought to be using:

element.onclick(function(e){ this.className = 'highlight' }

The latter allows you to modify your styles by only touching the CSS files. But if a CSS class name has only one style element then you should probably avoid it because it doesn't make any sense to have it (.hidden in your example) and call it directly instead:

element.onclick(function(e){ this.display = 'hidden}

Answer 4

I agree with the other posters who say only to define what you need, rather than bloating your code with a bunch of unnecessary classes.

That being said, I find myself using the following on a constant basis:

• .accessibility - visually hide elements, but keep them intact for screenreaders and print stylesheets
• .clear - tied to Easy Clearing
• .first-child and .last-child - easily assign styles to the first/last item in a container. This has been a lifesaver many times, and I prefer it over the poorly-supported :pseudo selectors
• .replace - tied to Phark IR for transparent image replacement

Finally, I dynamically assign .js to the <html> element with

<script type="text/javascript">if(h=document.documentElement)h.className+=" js"</script>

This will allow me to define .js (rest of selector) styles to target only browsers with JavaScript enabled.

Answer 5

I often find myself keeping two classes in all of my stylesheets: "center" (which simply applies text-align: center;, and a float-clearing class that applies clear:both;.

I've considered adding a "reset" statement to all my styles, but haven't had a need for it yet. The reset statement would be something similar to this:

*
{
  margin: 0;
  padding: 0;
}

I reuse these often enough to include them in just about everything. They're small enough so I don't feel they bloat the code at all.