Add rule consistent-selector-style

[marekdedic]

Motivation

When styling elements in Svelte components, there are many options for referencing said elements. The simplest one, leading to the least amount of code is to simply refer to them by their tag name. I'd like to add a rule that enforces this if it is possible (i.e. if there are no duplicates of said element). This may dovetail nicely with no-unused-class-name and lead to code reduction

Description

For each CSS selector using a class, the rule would check the tag name for the element the class is referring to. If there aren't multiple elements with that same tag (or they all share the same class), the rule would trigger and recommend selecting by the tag name instead. The same would apply to IDs

Examples

<a class="link">Text 1</a>

<b class="bold">Text 2</b>
<b class="bold">Text 3</b>

<i class="italic">Text4</i>
<i>Text5</i>

<style>
  /* ✗ BAD */
  .link {}
  .bold {}

  /* ✓ GOOD */
  .italic {}
</style>

Additional comments

No response

[ota-meshi]

Thank you for the rule proposal.
However, I'm not sure if the new rule is useful. I always use class selectors for styling 😅
The proposed coding style seems like it would help reduce the amount of code, but I feel like there's a catch to changing the code. When adding new elements, the wrong style might be applied.
What do you think about that?

[marekdedic]

Hi,
yeah, this rule is definitely for everyone. You're right that there is a trade-off between minimizing the amount of code and ease of future changes.

I still see the value of having such a rule for those who want it. At the same time, I don't think the rule should ever be in the recommended set, that is for sure. What do you think?

[ota-meshi]

I still see the value of having such a rule for those who want it.

Yeah, I think it's fine to have rules in this plugin if they can satisfy various preferences.
However, for users who prefer class selectors (like me), they'll want a rule to force the use of only class selectors.
Having these as two rules would cause them to conflict, so it needs to be implemented as one rule. In this case, I'm not sure how to design the rule options 😓

Do you have any ideas?

[marekdedic]

Hmm, so something like consistent-selector-style?

The trouble is, not all selectors are applicable in all situations - classes are I think universal, but there can only be one instance of a particular ID and tag selectors can only be used if there aren't any duplicate tags.

I can envision having an ordered list of preferences, so that with a list ["tag-name", "id", "class"], You'd get the following:

<a class="one"></a>
<a class="one two"></a>

<b class="three"></b>
<i class="three"></i>

<style>
  .one {} /* Error, use tag name */
  .two {} /* Error, use id */
  .three {} /* Ok */
</style>

This is only a rough sketch and there are more different selectors, but what do you think about this general idea?

[ota-meshi]

Thanks for your comment.
I think this is a good first rule design 👍. If we get feedback from users after publishing the rule, we can redesign the options as needed.