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/selector-tag-no-without-class": ["div", "span"]
  }
}

Primary option

array|string: ["array", "of", "tags", "or", "/regexes/"]|"tag"|"/regex/"

Specification of tags that should not occur without a class qualifier. If a string is surrounded with "/", it is interpreted as a regular expression. For example, "^/h\d+$/" disallows using any section heading without a class qualifier.

Versioning

This project adheres to Semantic Versioning. A list of notable changes for each release can be found in the changelog.

License

This plugin is released under the MIT license.

Changelog

[2.0.3] - 2020-02-24

Added

• This plugin now declares compatibility with Stylelint version 12 & 13.

[2.0.2] - 2019-09-23

Added

• This plugin now declares compatibility with Stylelint version 11. Thanks to Evgeny Orekhov for opening the issue.

[2.0.1] - 2019-07-24

Added

• This plugin now declares compatibility with Stylelint version 10. Thanks to Andrew Lisowski for the patch.

[2.0.0] - 2018-03-12

Changed

• The primary configuration option is now the list of tags that should not occur without a class qualifier. The secondary configuration option has been dropped. The primary configuration option can also be a string (if the rule applies to a single tag), and also supports regular expressions.

  Before:

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

  After:

  "plugin/stylelint-selector-tag-no-without-class": ["div", "span"]

  This brings the configuration in line with Stylelint's *-blacklist plugins. Thanks to Aleks Hudochenkov for the suggestion.

[1.0.0] - 2018-03-07

Initial public release.