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. |
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!