stylelint-selector-tag-no-without-class
v3.0.1
Published
Styelint plugin to disallow certain tags without a qualifying classname in selectors
Downloads
22,907
Readme
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.