BEM Notation with Double Dashes Is Being Deprecated

The BEM notation with double dashes (--) in Lightning Design System will be deprecated in Summer ’21 and replaced by the single underscore notation (_).

Why: Double dashes are not supported in XML files that include comments. This notation change was first announced in Salesforce Lightning Design System (SLDS) Release 2.3.1 on May 25, 2017.

How: In Summer ’21, all BEM notation with double dashes will no longer be available in SLDS 2.13.0 and later versions. For your styles to continue working with SLDS 2.13.0 and later versions, replace -- with _ in your CSS. For example, replace slds-button--brand with slds-button_brand. If you’re using SLDS 2.12.2 and earlier versions, your styles continue to work as no changes have been made to those versions.

If you develop using VSCode, use the SLDS Validator extension to fix the BEM notation in your code. The extension is available as a standalone but also as part of the Salesforce Extension Pack.