@creedengo/prefer-shorthand-css-notations

February 3, 2026 · View on GitHub

📝 Encourage usage of shorthand CSS notations.

⚠️ This rule warns in the ✅ recommended config.

Why is this an issue?

By employing a shorthand property, you can create stylesheets that are more succinct and frequently easier to read, ultimately conserving time and energy. By reducing the number of CSS properties, you help to reduce the weight of your application bundle, and therefore its environmental footprint.

Options

You can disable specific properties from being scanned if it does not match your needs. To disable properties you need to modify your .eslintrc.js by adding the following rule configuration:

module.exports = {
  ...yourConf,
  rules: {
    "prefer-shorthand-css-notations": [
      "warn",
      // disable analyze of "animation-*" properties
      { disableProperties: ["animation"] },
    ],
  },
};

Examples

For example, the font shorthand consolidates various font-related properties, and the margin shorthand streamlines the definition of margins around a box.

<div
  style={{
    marginTop: "1em",
    marginRight: 0,
    marginBottom: "2em",
    marginLeft: "0.5em",
  }}
>
  {/* Noncompliant: these properties can be grouped together in the "margin" property */}
</div>

<div style={{ margin: "1em 0 2em 0.5em" }}>
  {/* Compliant usage of shorthand property */}
</div>

This optimization can't always be done, depending on the properties you're using. For example, if you only want to set the left margin, you must continue to use margin-left.

<div style={{ marginLeft: "1em" }}>
  {/* Compliant because we only want a left margin */}
</div>

This optimization works for a number of properties listed here.

Resources

Documentation

Articles & blog posts