Rule proposal: no global classes/ids

[marekdedic]

Motivation

Hi,
as I am converting an existing codebase to svelte, I encountered some element classes/IDs that no longer do anything have been left over. They were previously used either for stuff like document.getElementById() or just global CSS that I over time replaced by component styles.

I thought this could be useful to automate by an eslint rule:

Description

The rule would disallow any element class or id attributes unless they are used in the component CSS.

Examples

<!-- ✓ GOOD -->
<div />

<!-- ✓ GOOD -->
<div class="my class" />
<div id="myId" />

<style>
.myClass {}

#myId {}
</style>

<!-- ✗ BAD -->
<div class="myClass" />
<div id="myId" />

Additional comments

Does this make sense to you as a rule? I
Also, I'm not sure about the name. Also also, there should probably be a whitelist :).

And as always, I'm willing to make a PR if you're willing to review and merge it...

[ota-meshi]

Thank you for the rule proposal!

I think there are users who find it useful to have that rule.
But I find it difficult to report the id attribute. For example, you might use:

<label for="myId">Foo</label>
<input type="text" id="myId">

I'm not familiar with it, but I think there are other ways to use id attributes. Such as <datalist>.
So I think it's probably better to focus only on the class name.

What do you think about naming the rule no-unused-class-name?

[marekdedic]

Ok, let's start with classes first - I still think IDs make sense as well, but you're right, there are many elements where IDs are use for different things than just styles, so it'd be much more complicated