Best practice for CSS class naming for use with jQuery selectors

Question

While building a Javascript-heavy web application, what is the best practice for naming CSS classes to keep the Javascript code and CSS stylesheets clean and the UI structur

Answer 1

Option 1: Name every single element uniquely.

This is next to impossible and definitely not a best practice. I think it's better if you can use classes that makes sense by grouping relevant styles and properties.

Option 2: Name every element semantically, and select elements hierarchically.

I prefer this one. At least you know the flow and where things are.

Option 3...n: Some hybrid approach? A totally different approach altogether?

There's always a hybrid approach and totally different approach. I think every developer has their own style of coding. If it's sematically correct and well structured, that would be the best approach.