Can I use non existing CSS classes?

Answer 1

As is mentioned by so many others, yes, using classes with no assigned CSS is perfectly valid and rather than thinking of them as 'CSS classes' you should simply recognise the semantics of class and ID to be groups and individual elements respectively.

I wanted to chip in as I felt an important point hasn't been raised given the example. If you ever need to do visual manipulations to a variable length of elements (in this case you're using table rows) then it always makes sense to recognise that the cost of doing so through Javascript could potentially be very expensive (e.g if you have thousands of rows).

In this situation let's say we know that column 2 always has the potential to be hidden (it's a conscious function of your table) then it makes sense to design a CSS style to handle this use case.

table.target-hidden .target { display: none; }

Then rather than using JS to traverse through the DOM finding N elements we simply need to toggle a class on one (our table).

$("table").addClass("target-hidden")

By assigning the table an ID this would be even quicker and you could even just refer to the column by using the :nth-child selector which would reduce your markup further but I can't comment on efficiency. Another reason for doing this is that I hate inline styling, and will go to great lengths to eradicate it!

Answer 2

There's no problem at all of using classes to just query for elements. I used to give such class names the sys- prefix (for example, I'll name your class sys-target) to distinguish them from classes used for styling. This was a convention used by some microsoft developers in the past. I also noticed a growing practice of using the js- prefix for this purpose.

If you are not comfortable with using classes for purposes other than styling, I recommend using the Role.js jQuery plugin which allows you to achieve the same purpose using the role attribute, so, you may write your markup as <td role="target"> and query for it using $("@target"). The project page has good description and examples. I use this plugin for big projects because I really like keeping classes for styling purposes only.

Answer 3

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)

Answer 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.

Answer 5

One thing that nobody here has fully mentioned is that JavaScript (aided by jQuery in this case) isn't able to directly modify a document's cascading style sheet. jQuery's css() method merely changes the matched set of elements' style property. CSS and JavaScript are completely unrelated in this aspect.

$('.target').css('display','none'); doesn't change your .target { } CSS declaration at all. What has happened here instead is that any element with a class of "target" now looks something like this:

<element class="target" style="display:none;"></element>

Are there any side effects caused by not pre-defining a CSS style rule? None whatsoever.

Is there a better way to do this? Performance-wise, yes there is!

How can the performance be improved?

Rather than directly modifying the style of each element, instead you can pre-define a new class and add that to your matched elements using addClass() (another jQuery method).

Based on this pre-existing JSPerf which compares css() with addClass(), we can see that addClass() is actually much faster:

How can we implement this ourselves?

Firstly we can add in our new CSS declaration:

.hidden {
    display: none;
}

Your HTML would remain the same, this pre-defined class is simply in place for later use.

We can now modify the JavaScript to use addClass() instead:

$('.target').addClass('hidden');

When running this code, rather than directly modifying the style property of each of your matched "target" elements, this new class will now have been added:

<element class="target hidden"></element>

With the new "hidden" class, this element will inherit the styling declared in your CSS and your element will be set to no longer display.

Answer 6

It's not necessary to define CSS classes in your stylesheet. It should work just fine. However, adding it won't harm.