media-feature-name-disallowed-list

Specify a list of disallowed media feature names.

@media (min-width: 700px) {}
/**     ↑
 * This media feature name */

Use this rule to enforce a convention. For example, disallow:

• max-width, so that queries stay mobile-first
• /device-/, as those features measure the device rather than the viewport

This rule supports 1 message argument: the disallowed media feature name.

Options

Array<string>

["array", "of", "media-features", "/regex/"]

Given:

{
  "media-feature-name-disallowed-list": ["max-width", "/^my-/"]
}

The following patterns are considered problems:

@media (max-width: 50em) {}

@media (my-width: 50em) {}

@media (max-width < 50em) {}

@media (10em < my-height < 50em) {}

The following patterns are not considered problems:

@media (min-width: 50em) {}

@media print and (min-resolution: 300dpi) {}

@media (min-width >= 50em) {}

@media (10em < width < 50em) {}