stylelint-selector-tag-no-without-class

A stylelint plugin to disallow certain tags without a class qualifier in selectors.

For example, if this rule is configured for (only) the <div> tag, the following patterns are considered violations:

div {}

.foo div {}

div .foo {}

div, .bar {}

div:hover {}

The following patterns are not considered violations:

div.foo {}  /* (tag is qualified with a class) */

a {}        /* (rule not configured for '<a>' tag) */

Rationale

According to the HTML specification, tags like <div> and <span> do no inherently represent anything. It would therefore be strange to attach styling to such a generic container, even within a given context. We believe that tags like <div> and <span> should only have meaning (and thus receive corresponding style rules) when they have a class as an additional qualifier.

Installation

Install this package as a development dependency using NPM:

npm install --save-dev stylelint-selector-tag-no-without-class

Usage

Add the plugin and the corresponding rule to the stylelint configuration file, and configure the tags that should not be used as a selector without a qualifying classname:

// .stylelintrc
{
  "plugins": [
    "stylelint-selector-tag-no-without-class"
  ],
  "rules": {
    "plugin/stylelint-selector-tag-no-without-class": [ true, {
      "tags": ["div", "span"]
    } ]
  }
}

Primary option

Boolean; whether to enable this rule or not.

Secondary options

• tags: array of tags that should not occur without a class qualifier

License

This plugin is released under the MIT license.