UI Styling Standard

The eslint plugin to enforce and educate on Atlassian's UI Styling Standard

no-important-styles

Blocks the !important flag in style declarations.

Properly composed styles will never need an !important flag. It is used to override specificity when working across different scopes, and the UI Styling Standard enforces styles with minimal scope.

The use of !important is a code smell and greatly impacts readability and determinism.

Examples

Incorrect

import { css } from '@compiled/react';
import { token } from '@atlaskit/tokens';

const styles = css({
    color: `${token('color.text.danger')}!important`,
});

Correct

import { css } from '@compiled/react';
import { token } from '@atlaskit/tokens';

const styles = css({
    color: token('color.text.danger'),
});

Was this page helpful?

We use this feedback to improve our documentation.