!important Usage

Introduction

This standard defines when and how !important MAY be used. Overuse of !important makes debugging difficult and leads to specificity wars that are hard to resolve.

Rules

• !important MUST NOT be used in component styles (BEM block/element/modifier files).

• !important MAY be used ONLY in utility/modifier classes (files in the global/ folder, e.g. .--hide, .--flex, .--w-6). This is by design — utilities must override component styles.

• When !important is necessary to override a third-party library, it MUST be accompanied by a comment explaining the reason:

// Override fancybox default z-index that conflicts with our modal
.fancybox-container {
  z-index: -index__modal !important;
}

Alternatives

Before using !important, consider these alternatives:

• Increase selector specificity by adding the parent BEM block.

• Reorder the imports in app.scss so the overriding rule comes later.

• Use a BEM modifier instead of forcing a value with !important.