stylelint-declaration-block-no-ignored-properties

What is stylelint-declaration-block-no-ignored-properties?

The stylelint-declaration-block-no-ignored-properties package is a plugin for Stylelint that helps you avoid using CSS properties that are ignored due to other properties in the same declaration block. This ensures cleaner and more efficient CSS by preventing redundant or conflicting styles.

What are stylelint-declaration-block-no-ignored-properties's main functionalities?

Detect ignored properties

This feature detects when a CSS property is ignored due to another property in the same declaration block. In the example, the 'width' property is ignored because 'display' is set to 'inline'.

/* Example CSS */
.example {
  display: inline;
  width: 100px; /* This will be flagged because 'width' is ignored when 'display' is 'inline' */
}

Stylelint integration

This feature shows how to integrate the plugin with Stylelint by adding it to the plugins array and enabling the rule in the Stylelint configuration file.

/* .stylelintrc.json */
{
  "plugins": [
    "stylelint-declaration-block-no-ignored-properties"
  ],
  "rules": {
    "plugin/declaration-block-no-ignored-properties": true
  }
}

Other packages similar to stylelint-declaration-block-no-ignored-properties

stylelint-order

The stylelint-order package helps you enforce a specific order for CSS properties within declaration blocks. While stylelint-declaration-block-no-ignored-properties focuses on preventing ignored properties, stylelint-order ensures that properties are organized in a consistent and logical order.

stylelint-config-recommended

The stylelint-config-recommended package provides a set of recommended rules for Stylelint, including some that prevent common CSS mistakes. While it doesn't specifically target ignored properties, it offers a broader set of best practices for writing clean and maintainable CSS.

stylelint-declaration-use-variable

The stylelint-declaration-use-variable package enforces the use of variables for certain properties, promoting consistency and maintainability in your CSS. Unlike stylelint-declaration-block-no-ignored-properties, which focuses on ignored properties, this package ensures that variables are used where appropriate.

README

stylelint-declaration-block-no-ignored-properties

Original rule: stylelint/declaration-block-no-ignored-properties.

Disallow property values that are ignored due to another property value in the same rule.

a { display: inline; width: 100px; }
/**                  ↑
 *       This property */

Certain property value pairs rule out other property value pairs, causing them to be ignored by the browser. For example, when an element has display: inline, any further declarations about width, height and margin-top properties will be ignored. Sometimes this is confusing: maybe you forgot that your margin-top will have no effect because the element has display: inline, so you spend a while struggling to figure out what you've done wrong. This rule protects against that confusion by ensuring that within a single rule you don't use property values that are ruled out by other property values in that same rule.

The rule complains when it finds:

• display: inline used with width, height, margin, margin-top, margin-bottom, overflow (and all variants).
• display: list-item used with vertical-align.
• display: block used with vertical-align.
• display: flex used with vertical-align.
• display: table used with vertical-align.
• display: table-* (except table-caption) used with margin.
• display: table-* (except table-cell) used with padding.
• display: table-* (except table-cell) used with vertical-align.
• display: table-(row|row-group) used with width, min-width or max-width.
• display: table-(column|column-group) used with height, min-height or max-height.
• float: left and float: right used with vertical-align.
• position: static used with top, right, bottom, left or z-index.
• position: absolute used with float, clear or vertical-align.
• position: fixed used with float, clear or vertical-align.
• list-style-type: none used with list-style-image.
• overflow: visible used with resize.

Installation

npm install stylelint-declaration-block-no-ignored-properties --save-dev

Usage

// .stylelintrc
{
  "plugins": [
    "stylelint-declaration-block-no-ignored-properties"
  ],
  "rules": {
    "plugin/declaration-block-no-ignored-properties": true,
  }
}

Options

true

The following patterns are considered violations:

a { display: inline; width: 100px; }

display: inline causes width to be ignored.

a { display: inline; height: 100px; }

display: inline causes height to be ignored.

a { display: inline; margin: 10px; }

display: inline causes margin to be ignored.

a { display: block; vertical-align: baseline; }

display: block causes vertical-align to be ignored.

a { display: flex; vertical-align: baseline; }

display: flex causes vertical-align to be ignored.

a { position: absolute; vertical-align: baseline; }

position: absolute causes vertical-align to be ignored.

a { float: left; vertical-align: baseline; }

float: left causes vertical-align to be ignored.

The following patterns are not considered violations:

a { display: inline; margin-left: 10px; }

a { display: inline; margin-right: 10px; }

a { display: inline; padding: 10px; }

a { display: inline-block; width: 100px; }

Although display: inline causes width to be ignored, inline-block works with width.

a { display: table-cell; vertical-align: baseline; }

Although display: block causes vertical-align to be ignored, table-cell works with vertical-align.

a { position: relative; vertical-align: baseline; }

Although position: absolute causes vertical-align to be ignored, relative works with vertical-align.

Changelog

v2.8.0

• Added: support for stylelint version 16.