Identify the selectors, which can be grouped, as they have same set of properties and values.
.a{ display: inline-block;width: 100px;}
.b{display:inline-block;width:100px;}
Above selectors can be grouped like this
.a,.b{display:inline-block;width: 100px;}
npm install stylelint-group-selectors --save-dev
// .stylelintrc
{
"plugins": [
"stylelint-group-selectors"
],
"rules": {
"plugin/stylelint-group-selectors": true,
}
}
The following patterns are considered violations:
.b{display:inline-block;color:#111;}
.a{display:inline-block;color:#111;}
.a,.b{display: inline-block;color:#111; }