rules.scsslint.SelectorFormat.html Maven / Gradle / Ivy

Go to download

Details
It is good practice to choose a convention for naming selectors.
Good
// convention: 'hyphenated_lowercase'
.foo-bar-77, foo-bar, #foo-bar {}

// convention: 'snake_case'
.foo_bar77, foo_bar, #foo_bar {}

// convention: 'camel_case'
.fooBar77, fooBar, #fooBar {}
}
You can specify different conventions for different types of selectors using the [type]_convention options.
Since you might need to overwrite selectors for third party stylesheets, you
can specify ignored_names as an array of individual selectors to ignore.
Another option is to specify ignored_types to globally ignore a certain
type of selector.


Configuration Option
Description



convention
Name of convention to use (hyphenated_lowercase (default) or snake_case, camel_case, or strict_BEM, or hyphenated_BEM), or a regex the name must match. Note: If your project uses BEM, pay attention to the dialect of BEM you use. It may be strict_BEM or hyphenated_BEM.


convention_explanation
Custom catch-all explanation if you do not want to use the built-in explanations


ignored_names
Array of whitelisted names to not report lints for.


ignored_types
Array containing list of types of selectors to ignore (valid values are attribute, class, element, id, placeholder)


{type}_convention
Convention for {type} selectors only, where {type} is one of attribute, class, id, or placeholder. See the convention option for possible values.


{type}_convention_explanation
Custom explanation for {type} selector convention, where {type} is one of attribute, class, id, or placeholder.

Limitations
SelectorFormat will not resolve the parent selector reference (&),
and will ignore selectors containing any parent references.
This is because these references cannot be resolved without compiling
the Sass into actual CSS. If you would like to see such functionality,
we'd love to merge a pull request!

Configuration Option	Description
`convention`	Name of convention to use (`hyphenated_lowercase` (default) or `snake_case`, `camel_case`, or `strict_BEM`, or `hyphenated_BEM`), or a regex the name must match. Note: If your project uses BEM, pay attention to the dialect of BEM you use. It may be `strict_BEM` or `hyphenated_BEM`.
`convention_explanation`	Custom catch-all explanation if you do not want to use the built-in explanations
`ignored_names`	Array of whitelisted names to not report lints for.
`ignored_types`	Array containing list of types of selectors to ignore (valid values are `attribute`, `class`, `element`, `id`, `placeholder`)
`{type}_convention`	Convention for `{type}` selectors only, where `{type}` is one of `attribute`, `class`, `id`, or `placeholder`. See the `convention` option for possible values.
`{type}_convention_explanation`	Custom explanation for `{type}` selector convention, where `{type}` is one of `attribute`, `class`, `id`, or `placeholder`.