UI Styling Standard

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

no-classname-prop

Blocks the className prop, which encourages unsafe global styles and cannot be statically resolved.

Use the css prop for styling, with props for configuration and xcss for bounded overrides.

Examples

Incorrect

<div className="my-class">

<MyComponent className={isDisabled ? 'disabled' : undefined} />

Correct

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

const myStyles = css({ padding: token('space.100') });

<div css={myStyles} />;

<MyComponent isDisabled={isDisabled} />

import { Checkbox } from '@atlaskit/checkbox';

<Checkbox xcss={{ alignItems: 'center' }} />;

Pass-through props.xcss are allowed, expecting this to be typed, refer to @atlaskit/css, (opens new window)

import { StrictXCSSProp } from '@atlaskit/css';

const Component = (props: { xcss?: StrictXCSSProp<'color', never> }) => (
    <div className={props.xcss} />
);

FAQ

What if I'm using `className` to target elements with JavaScript?

There are some cases where a selector is required to integrate with a 3rd party library, such as legacy code using jQuery.

Use a ref if possible. Otherwise, if you must have a selector, use a data-* attribute that gives enough context and is unique enough, for example data-editor-table-target="true".

Was this page helpful?

We use this feedback to improve our documentation.