Can I use non existing CSS classes?

The independence of HTML and CSS

In HTML, classes are just attributes that do not need a corresponding CSS rule in order to exist. They're like dog tags for elements—cool right 🐶?

HTML and CSS are two independent warriors in the web development battlefield. HTML structures the content while CSS makes it pretty. A class that you've not styled yet is merely an address without a mailbox—fully good to go, but nobody's dropping any colors or borders there yet.

Even if a CSS class is not declared, there's no side effect or horror movie like screaming errors.

$('.dynamic-color').css('color', 'blue'); /* dynamic-color says "Surprise! I'm blue now!" */


Even if dynamic-color class didn't exist in your CSS initially, it will still happily accept that shiny blue color from jQuery just like a surprise birthday gift 🎁.

Semantic HTML and JavaScript targeting

The use of non-existing classes gives your HTML more readability like an open book and maintainability tougher than a roach.

Take a glance at this example:

<button class="save-the-world">Save The World</button> 


The class save-the-world is pretty clear about its purpose right? This improves code quality and makes reading it less of a decoding mission.

Best practices for project longevity

In larger projects, separating CSS and JavaScript classes can avoid stepping on developers' toes—trust me, nobody wants that.

It's always better to use class names that clearly describe the content or specific functions as it's more intuitive. Skip dull names like style01 and go for something like death-star-trigger. Sounds more exciting, right?

Visualization

Let's inspect the scene where non-existent CSS classes come into play.

🌐: [🌱, 🌱, 🌷, 🌷]  // Garden Plot with 2 seeds and 2 plants
🎨: [🌷, 🌷]           // Only existing classes get the color love from CSS

The seeds 🌱 are representing non-existing classes in your CSS for now.

🌐🔍🎨: [🌷, 🌷]
# Here, CSS gets to work, but only late bloomers 🌷 get the love.
# The young seeds 🌱 are left untouched.

Finally, when you birth those classes in your CSS, they bloom into fully styled divas 🌷:

🌐🌱🎨: [🌷, 🌷, 🌷, 🌷]
# Now, when you water the seeds by defining classes in CSS,
# these buds bloom into beautiful flowers 🌷.
# All set to steal the CSS show!

Flexibility and expandability

Adding a class to an HTML element which is yet to be styled in the CSS file offers flexibility and expandability.

HTML5 loves non-existing CSS classes. They are seen as general-purpose tokens which can be extensively beneficial for integration of frameworks and libraries, that mostly rely on classes for JavaScript functionality instead of styling (jQuery just nodded!).