---
schema_version: "1"
id: 46705c3fccb030cb74e401c1d7127bf716361b4b783beadf78cc1d55a1013679
title: Rules
collection: developer
version: current
locale: en-us
portal_url: https://docs.salesforce.com/developer/current/en-us/lwc/slds_linter/guides/reference/reference-rules.md
canonical_url: https://developer.salesforce.com/docs/platform/slds-linter/guide/reference-rules.html
source_site: developer.salesforce.com
content_type: documentation
content_hash: c2049863995d6b410926865f3967ce15847ea08632afcdbd4036ba2cf504f54b
products:
  - SLDS Linter
  - lwc
---
# Rules

SLDS Linter rules validate your code against a series of SLDS 2 best practices and, where possible, provide suggestions for you to improve your code. By default, all rules validate all CSS properties unless otherwise specified.
Each rule has a different severity level. The options are listed here.

- **Error** \- The code won’t work and causes issues. Fix the errors.
- **Warning** \- The code works, but it can be deprecated. We recommend addressing it.

## Overview

This table lists all supported rules, their severity levels, and whether they are enabled by default.

| Rule                                     | Severity Level                            | Enabled by Default | Supported File Types |
| :--------------------------------------- | :---------------------------------------- | :----------------- | :------------------- |
| enforce-bem-usage                        | Error                                     | Yes                | HTML                 |
| modal-close-button-issue                 | Error                                     | Yes                | HTML                 |
| no-deprecated-classes-slds2              | Error in HTML files, Warning in CSS files | Yes                | HTML, CSS            |
| enforce-component-hook-naming-convention | Error                                     | Yes                | CSS                  |
| lwc-token-to-slds-hook                   | Error                                     | Yes                | CSS                  |
| enforce-sds-to-slds-hooks                | Warning                                   | Yes                | CSS                  |
| no-hardcoded-values-slds2                | Warning                                   | Yes                | CSS                  |
| no-slds-class-overrides                  | Warning                                   | Yes                | CSS                  |
| no-slds-private-var                      | Warning                                   | Yes                | CSS                  |
| no-unsupported-hooks-slds2               | Warning                                   | Yes                | CSS                  |
| no-slds-var-without-fallback             | Warning                                   | Yes                | CSS                  |
| reduce-annotations                       | Warning                                   | Yes                | CSS                  |
| no-slds-namespace-for-custom-hooks       | Warning                                   | Yes                | CSS                  |
| no-sldshook-fallback-for-lwctoken        | Warning                                   | Yes                | CSS                  |
| no-important-tag                         | Warning                                   | No                 | CSS                  |

## enforce-bem-usage

Identifies instances that use the double-dash (`--`) syntax for block-element-modifier (BEM) in classes. Replace these instances with the single underscore (`_`) syntax.

### Severity Level

Error

### Example

Existing code:

```
slds-avatar--medium
```

Recommended code:

```
slds-avatar_medium
```

The `--` syntax is replaced with the `_` syntax.

## modal-close-button-issue

Identifies instances where the CSS classes or component attributes for the modal close button must be changed to follow the modal component blueprint.

- Remove classes that contain the `slds-button_icon-inverse` attribute within the close button.
- Change the variant value for the `lightning-button-icon` attribute from bare-inverse to bare.
- Change the variant value for the `lightning-icon` attribute from bare-inverse to bare.

For more information, see the [Modal close button is not visible with the new white background](https://issues.salesforce.com/issue/a028c00000zh1iqAAA/modal-close-button-is-not-visible-with-the-new-white-background-after-winter-25-release) topic.

### Severity Level

Error

### Example

Existing code:

```
<lightning-button-icon
        title={labels.closeButton} icon-name="utility:close"
        onclick={closeAction}
        class="slds-button slds-button_icon slds-modal__close slds-button--icon-inverse" variant="bare-inverse" size="large">
</lightning-button-icon>
```

Recommended code:

```
<lightning-button-icon
        title={labels.closeButton} icon-name="utility:close"
        onclick={closeAction}
        class="slds-button slds-button_icon slds-modal__close" variant="bare" size="large">
</lightning-button-icon>
```

To fix the issues, these changes are made.

- The variant attribute value for the `lightning-button-icon` attribute is changed from bare-inverse to bare.
- The `slds-button–icon-inverse` class is removed.

## no-deprecated-classes-slds2

Identifies classes that aren’t available in SLDS 2. Update these classes to a class that’s supported in SLDS 2.

### Severity Level

Error

### Example

Existing code:

```
<span class="slds-icon_left">
</span>
```

The `slds-icon_left` class is deprecated in SLDS 2 and must be updated to a class that is supported in SLDS 2.

## enforce-component-hook-naming-convention

Identifies `--slds-c` component-level styling hooks that use a deprecated naming convention. To align with the prescribed styling hooks naming convention, replace with styling hooks that SLDS Linter recommends.

### Severity Level

Error

### Examples

Existing code:

```
// Before
:root
{
   --slds-c-breadcrumbs-spacing-inlineend: 16px
}
```

Recommended code:

```
// After
:root
{
   --slds-c-breadcrumbs-spacing-inline-end: 16px
}
```

The `--slds-c-breadcrumbs-spacing-inlineend` styling hook is replaced with the `--slds-c-breadcrumbs-spacing-inline-end` styling hook.

Existing code:

```
// Before
:root{
   --slds-c-accordion-heading-color:#03234d;
   --slds-c-accordion-heading-font-lineheight: 1.25;
}
```

Recommended code:

```
// After
:root{
   --slds-c-accordion-heading-text-color:#03234d;
   --slds-c-accordion-heading-font-line-height: 1.25;
}
```

The `--slds-c-accordion-heading-color` and `--slds-c-accordion-heading-font-lineheight` styling hooks are replaced with the `--slds-c-accordion-heading-text-color` and `--slds-c-accordion-heading-font-line-height` styling hooks.

## lwc-token-to-slds-hook

Identifies deprecated `--lwc` tokens in your code and recommends suitable `--slds` styling hooks. Replace the `--lwc` token with the recommended `--slds` styling hook and retain the `--lwc` token as the fallback value.

If the rule identifies a deprecated `--lwc` token but no replacement is recommended for it, refer to the [Global Styling Hooks Index](https://www.lightningdesignsystem.com/2e1ef8501/p/591960-global-styling-hooks/b/768d36) and find the most suitable styling hook replacement.

### Severity Level

Error

### Example

Existing Code:

```
.example
{
 padding: var(--lwc-cardBodyPadding);
}
```

Recommended Code:

```
.example
{
 padding: var(--slds-g-spacing-4, var(--lwc-cardBodyPadding));
}
```

The `--lwc-cardBodyPadding` token is replaced with the `--slds-g-spacing-4` styling hook. The `--lwc` token is mentioned as the fallback value.

## enforce-sds-to-slds-hooks

Identifies Salesforce Design System (SDS) styling hooks that must be replaced with the suggested SLDS 2 styling hooks.

### Security Level

Warning

### Example

Existing code:

```
.slds-expandable-section .sldc-section__content
{
 background-color: var(--sds-g-color-brand-base-100, rgb(255, 255, 255));
}
```

Recommended code:

```
.slds-expandable-section .sldc-section__content
{
 background-color: var(--slds-g-color-brand-base-100, rgb(255, 255, 255));
}
```

The `--sds-g-color-brand-base-100` styling hook is replaced with the `--slds-g-color-brand-base-100` SLDS 2 styling hook.

<!-- ## lwc-token-to-slds-hook

Identifies deprecated `--lwc` design tokens that must be replaced with the latest SLDS 2 styling hooks. Include the SLDS 2 styling hook and retain the `--lwc` design token as a fallback value.

### Severity Level

Warning

### Example

Existing code:

```
.my-component {
background-color: var(--lwc-colorBackgroundAlt);
}
```

Recommended code:

```
.my-component {
background-color: var(--slds-g-color-surface-1,--lwc-colorBackgroundAlt);
}
```

The `--slds-g-color-surface-1` styling hook is included. -->

## no-hardcoded-values-slds2

Identifies static or hard-coded values that must be replaced with SLDS 2 styling hooks. Include the SLDS 2 styling hook and retain the hard-coded value as the fallback value.
This rule validates only these CSS properties.

- color
- fill
- background
- background-color
- stroke
- border\*-color
- outline\*
- border\*
- margin\*
- padding\*
- width
- height
- max-height
- min-height
- line-height
- max-width
- min-width
- top
- right
- left
- bottom
- box-shadow
- font
- font-weight

### Severity Level

Warning

### Example

Existing code:

```
.THIS .site-tos-container
{
    height: 32px;
}
```

Recommended code:

```
.THIS .site-tos-container
{
    height: var(--slds-g-sizing-9, 32px);
}
```

The `--slds-g-sizing-9` styling hook is included.

## no-slds-class-overrides

Identifies existing class names that must be replaced with new custom CSS classes, instead of overriding SLDS selectors. This rule only reports classes located at the end of an SLDS selector.

### Severity Level

Warning

### Example

Here, the `.slds-box_border` SLDS class is located at the end of the selector. Only such instances are identified as an issue.

```
// Now .slds-box_border will be reported as SLDS class override
.THIS .slds-box_small .slds-box_border:hover
{
   .border-color: var(--slds-g-color-palette-hot-orange-40)
}
```

Here, overriding the `.slds-box_border` class isn’t supported. So a new `my-app-box_border` CSS class is created to replace it.

Existing code:

```
.slds-box_border
{
    visibility: hidden;
}
```

Recommended code:

```
.my-app-box_border{
    visibility: hidden;
}
```

## no-slds-private-var

Identifies SLDS styling hooks that are reserved only for internal Salesforce use. You must remove these styling hooks.

### Severity Level

Warning

### Example

Existing code:

```
.example {
    --_slds-deprecated-var: #fff;
    border: var(--slds-g-sizing-border-1, 1px) solid;
}
```

Recommended code:

```
.example {
    border: var(--slds-g-sizing-border-1, 1px) solid;
}
```

The `--_slds-deprecated-var` styling hook is meant for internal Salesforce use and is removed.

## no-unsupported-hooks-slds2

Identifies styling hooks that aren’t present in SLDS 2. They must be replaced with ‌styling hooks that have a similar effect, or they must be removed.

### Severity Level

Warning

### Example

Existing code:

```
.playground-editor-prompt-container {
    height: calc(100% - 60px); /* minus the height of the header */
    --slds-c-card-body-spacing-block-end: 0;
}
```

Recommended code:

```
.playground-editor-prompt-container {
    height: calc(100% - 60px); /* minus the height of the header */
}
```

The `–-slds-c-card-body-spacing-block-end` styling hook is removed because it doesn’t have a suitable SLDS 2 replacement.

## no-slds-var-without-fallback

Identifies SLDS styling hooks that are specified without fallback values and recommends suitable fallback values based on the SLDS metadata.  
Each `var()` function’s arguments must contain a styling hook and a hard-coded value or branded design token as a fallback value. The fallback value is used in environments in which styling hooks aren’t supported.

### Severity Level

Error

### Example

Existing code:

```
.example {
  color: var(--slds-g-link-color-focus);
  background-color: var(--slds-g-color-brand-base-20);
  margin: var(--slds-c-card-spacing-block);
}
```

Recommended code:

```
.example {
  color: var(--slds-g-link-color-focus, #014486);
  background-color: var(--slds-g-color-brand-base-20, #0176d3);
  margin: var(--slds-c-card-spacing-block, 1rem);
}
```

The `--slds-g-link-color-focus, --slds-g-color-brand-base-20,` and `--slds-c-card-spacing-block` styling hooks are used with hard-coded values as fallback values.

## reduce-annotations

Identifies annotations that must be removed from the code.

### Severity Level

Warning

### Example

Existing code:

```
/* @sldsValidatorAllow */
.THIS--mailapp.forceDockingPanel .slds-docked-composer__body {
    flex-shrink: 1;
}
```

The `@sldsValidatorAllow` annotation must be removed.

## no-slds-namespace-for-custom-hooks

Identifies custom styling hooks that use the `--slds` or `--sds` namespaces, which are reserved for SLDS styling hooks. To differentiate them from SLDS styling hooks, create the identified custom styling hooks within your own namespace.

### Severity Level

Warning

### Example

Existing code:

```
/*  Custom token --slds-color-999 using reserved namespace --slds will be flagged as violation */
.THIS .container
{
--slds-color-999: #999
}
```

Recommended code:

```
.THIS .container
{
--myapp-color-999: #999
}
```

The `--slds-color-999` custom styling hook is replaced with `--myapp-color-999`.

## no-sldshook-fallback-for-lwctoken

Identifies instances where `--slds` styling hooks are provided as fallback values for `--lwc` tokens. Replace the `--lwc` token with a suitable `--slds` styling hook and retain the `--lwc` token as the fallback value.

### Severity Level

Warning

### Example

Existing code:

```
/* Using --slds-g-color-border-1 as fallback value for --lwc-color-background-1 is not supported. */

.example
{
color: var(--lwc-color-background-1, var(--slds-g-color-border-1));
}
```

Recommended code:

```
.example
{
color: var(--slds-g-color-border-1, var(--lwc-color-background-1));
}
```

The `--lwc-color-background-1` token is replaced with the `--slds-g-color-border-1` styling hook. The `--lwc` token is mentioned as the fallback value.

<!--
## length-zero-no-unit

Identifies instances that specify length units for zero lengths.
This is a Stylelint rule that SLDS Linter supports.

For more information, see [Stylelint](https://stylelint.io/user-guide/rules/length-zero-no-unit/).

### Severity Level

Warning

### Example

Existing code:

```
// Before
.THIS. container
{
padding: 0px
}
```

Recommended code:

```
// After
.THIS. container
{
padding: 0
}
```

The `0px` value is replaced with `0` without the length unit `px`.
-->

## no-important-tag

Indicates that the `!important` tag must be used only if it’s necessary. The tag functions by overriding all other attributes.

### Severity Level

Warning

### Example

Existing code:

```
.test-cls2 {
color: red !important;
}
```

Recommended code:

```
.test-cls2 {
color: red;
}
```

The `!important` tag is removed.