I created a button that when clicked, displays a table containing actors. I have named them as follows:
<button class="actors">Show actors</button>
<table class="actors">...</div>
Next, I want to style and access them in my CSS (and jQuery) using selectors like this:
button.actors {...}
table.actors {...}
Is it recommended to differentiate between elements with the same classes this way? Or would it be better if I renamed them like this:
<button class="actors-button">Show actors</button>
<table class="actors-table">...</div>
and
.actors-button {...}
.actors-table {...}
I am concerned about potential priority issues with selectors. Would using tag names in selectors lead to any unforeseen problems in the future (similar to issues with IDs)? Or is it simply a matter of personal preference?
P.S.
Please refrain from suggesting answers such as 'just change the button's class name to .show-actors and you'll avoid any problems'. I prefer not to take the easy route on this one ;)