diff --git a/docs/rules/consistent-selector-style.md b/docs/rules/consistent-selector-style.md index 0f6d943c6..56f3461ee 100644 --- a/docs/rules/consistent-selector-style.md +++ b/docs/rules/consistent-selector-style.md @@ -13,7 +13,7 @@ description: 'enforce a consistent style for CSS selectors' ## :book: Rule Details -This rule reports ???. +This rule allows you to set a preferred style for your CSS (& other style language) selectors. In CSS, there is a wide list of options for selecting elements, however, the three most basic types select by element type (i.e. tag name), ID or class. This rule allows you to set a preference for some of these three styles over others. Not all selectors can be used in all situations, however. While class selectors can be used in any situation, ID selectors can only be used to select a single element and type selectors are only applicable when the list of selected elements is the list of all elements of the particular type. To help with this, the rule accepts a list of selector style preferences and reports situations when the given selector can be rewritten using a more preferred style. @@ -21,12 +21,48 @@ This rule reports ???. ```svelte - +Click me! - +Click me too! + +Text one + +Text two + +Text three + + ``` @@ -35,15 +71,22 @@ This rule reports ???. ```json { - "svelte/consistent-selector-style": ["error", {}] + "svelte/consistent-selector-style": [ + "error", + { + "checkGlobal": false, + "style": ["type", "id", "class"] + } + ] } ``` -- +- `checkGlobal` ... Whether to check styles in `:global` blocks as well. Default `false`. +- `style` ... A list of style preferences. Default `["type", "id", "class"]`. ## :books: Further Reading -- +- [CSS selector documentation](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_selectors) ## :mag: Implementation