Can I use non existing CSS classes?

Question

I have a table where I show/hide a full column by jQuery via a CSS class that doesn't exist:

<table>
   <thead>
      <tr>
         <th></th>
         <th class="target"></th>
         <th></th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td></td>
         <td class="target"></td>
         <td></td>
      </tr>
      <tr>
         <td></td>
         <td class="target"></td>
         <td></td>
      </tr>
   </tbody>
</table>

With this DOM I can do this in one line via jQuery: $('.target').css('display','none');

This works perfectly, but is it valid to use CSS classes that aren't defined? Should I create an empty class for it?

<style>.target{}</style>

Are there any side effects or is there a better way to do this?

Solution 1

"CSS class" is a misnomer; class is an attribute (or a property, in terms of scripting) that you assign to HTML elements. In other words, you declare classes in HTML, not CSS, so in your case the "target" class does in fact exist on those specific elements, and your markup is perfectly valid as it is.

This doesn't necessarily mean that you need to have a class declared in the HTML before you can use it in CSS either. See ruakh's comment. Whether or not a selector is valid depends entirely on the selector syntax, and CSS has its own set of rules for handling parsing errors, none of which concern the markup at all. Essentially, this means HTML and CSS are completely independent of each other in the validity aspect.¹

Once you understand that, it becomes clear that there is no side effect of not defining a .target rule in your stylesheet.² When you assign classes to your elements, you can reference those elements by those classes either in a stylesheet, or a script, or both. Neither has a dependency on the other. Instead, they both refer to the markup (or, more precisely, its DOM representation). This principle applies even if you're using JavaScript to apply styles, as you're doing in your jQuery one-liner.

When you write a CSS rule with a class selector, all you're saying is "I want to apply styles to elements that belong to this class." Similarly, when you write a script to retrieve elements by a certain class name, you're saying "I want to do things with elements that belong to this class." Whether or not there are elements that belong to the class in question is a separate issue altogether.

---

¹ _{This is also why a CSS ID selector matches all elements with the given ID regardless of whether the ID appears exactly once, or multiple times (resulting in a non-conforming HTML document).}

² _{The only situation I'm aware of where an empty CSS rule like that is necessary is when some browsers refuse to apply certain other rules properly as the result of a bug; creating an empty rule will cause those other rules to be applied for some reason. See this answer for an example of such a bug. However this is on the CSS side and therefore should have nothing to do with the markup.}

Solution 2

There are no ill effects to use classes which don't have styles. Indeed, that's part of the usefulness of CSS is that it's de-coupled from the markup and can style or not style elements/classes/etc. as needed.

Don't think of them as "CSS classes." Think of them as "classes" which CSS happens to also use if it needs to.

Solution 3

According to HTML5 specification:

A class attribute must have a value that is a set of space-separated tokens representing the various classes that the element belongs to. ... There are no additional restrictions on the tokens authors can use in the class attribute, but authors are encouraged to use values that describe the nature of the content, rather than values that describe the desired presentation of the content.

Also, in the version 4:

The class attribute has several roles in HTML:

• As a style sheet selector (when an author wishes to assign style information to a set of elements).
• For general purpose processing by user agents.

Your use case falls under the second scenario, which makes it a legitimate example of using a class attribute.

Solution 4

You can use a class which has no styles, this is entirely valid HTML.

A class referenced in a CSS file is not a definition of a class, it is used as a selector rule for styling purposes.

Solution 5

When you use a classname in JavaScript, it does not look at the CSS to find that class. It looks directly in the HTML code.

All that is required is that the classname is in the HTML. It does not need to be in the CSS.

In fact, many people think it's actually a good idea to keep separate classes use with CSS and Javascript, as it allows your designers and coders to work independently without getting in each other's way by using each other's classes.

(note, the above paragraph is obviously more applicable for larger projects, so don't feel that you have to go to this extreme if you're working on your own; I mentioned it to make the point that the two can be entirely separate)

View more solutions

Comments

[Kevin B]

I don't see anything wrong about it, though i would have made it part of the stylesheet if at all possible rather than using .css, styles set with .css are very difficult to override without causing other issues so i tend to avoid them.

[Math chiller]

as a side note you may want to use .toggle(), its a tiny bit shorter in your code.

[Joe Enos]

In Visual Studio + ReSharper, if you use a class that is not defined, it'll give you a warning, which is helpful if I just have a typo, but is annoying in situations like this. In this case, you've got the choice of either adding the empty style, or disabling the warning (or just ignoring it) - personally, I just add the empty style. I don't know if any other IDE's behave similarly.

[TV's Frank]

Slightly related question on whether it is good practice or not: stackoverflow.com/questions/17212411/…

[k0pernikus]

It's not only possible but explicitly recommend by some. Since your target is for javascript's purposes, a lot of people use the prefix js- for such classes, i.e. js-target. BTW: Target is kind of a bad name ;) For further reading see: philipwalton.com/articles/decoupling-html-css-and-javascript

[naught101]

stackoverflow.com/questions/2832117/… is more or less a duplicate of this, without the misconception.

[naor]

as (another) side note, you may want to use $('.target').hide()

[Kip]

This is such a normal thing to me that I had to read the question three times before I realized what you meant by "non existing". I kept thinking "Why do you say it doesn't exist? It is right there in your HTML."

[George Kagan]

This is thinking too much redefined

[Konrad Rudolph]

It took me ages to realise that classes have nothing to do with CSS. But around the same time everybody else realised and microformats came along.

[JAL]

Using the class in HTML doesn't define it. I'd say rather, definition is irrelevant: there's no penalty for using undefined classes.

[ruakh]

+1, though this answer could be taken as implying, wrongly, that CSS can only refer to classes that actually occur in the HTML. It's actually quite common for a site to have sitewide CSS used on all pages, even though some of the classes it refers to do not appear on every single page. (For example, the site might have custom styling for external links, a.extlink or whatnot, even if some pages don't contain any external links.)

[BoltClock]

@ruakh: Excellent point, thanks. I couldn't find a way to fit it into my original, brief answer without veering off-topic, but I see how the use of the term dependency might have given that impression so I changed it a bit. That said I've added a footnote referencing your comment as well as elaborating further.

[BoltClock]

+1 for quoting the relevant specs. I've been forgetting to do that a lot.

[laike9m]

+1 for "Don't think of them as 'CSS classes.' Think of them as 'classes' which CSS happens to also use if it needs to"

[Rameez]

I'm not saying to add those styles, its upto him if he wants to, if he plans to support those styles then why not? anyways thanks for unnecessary down vote :)

[Pavlo]

You said "it ... won't harm", but it will, eventually.

[Rameez]

yes it won't harm. if he has senses to add those empty styles then obviously will have senses to manage them. Obviously i wont add..neither i'm advising to add.

[deltab]

+1 for "groups and individual elements" and for efficient use of document structure

[BoltClock]

Good advice. There is seldom a good reason to use .css() instead of toggling classes IMO.