如何使用 Stylelint 来防止在媒体查询中使用 "max-width"

Question

我想 warn/error 在媒体查询中使用 max-width 并鼓励使用 min-width.

的移动优先方法

我可以warn/error...

@media (max-width: 50em) {
  padding: 1rem;
}

但允许...

@media (min-width: 50em) {
  padding: 1rem;
}

Answer 1

media-feature-name-disallowed-list 和 media-feature-name-allowed-list 规则现在可以在最新的 stylelint 中使用：

"media-feature-name-disallowed-list": [
  "^max-width",
    {
      "message": "Use min-width for a mobile-first approach (media-feature-name-disallowed-list)",
    },
  ],
},

Answer 2

您现在应该使用 media-feature-name-disallowed-list (https://stylelint.io/user-guide/rules/media-feature-name-disallowed-list)

Answer 3

我在选择器中使用最大宽度时收到错误“media-feature-name-no-unknown”。

允许在我的 .stylelintrc.json:

中使用

    "media-feature-name-no-unknown": [
      {
        "ignoreMediaFeatureNames": [
          "max-width"
        ]
      }
    ]

有效用法示例（样式组件）：


const StyledSectionDrawer = styled.div`
  @media screen and (max-width: ${(props) => props.breakpoint}px) {
    margin-top: ${standardNavHeight}px;
  }
  @media screen and (min-width: ${(props) => props.breakpoint}px) {
    margin-top: ${(props) => (props.scrolled ? standardNavHeight : props.navHeight)}px;
  }
`;

通过https://stylelint.io/user-guide/rules/list/media-feature-name-no-unknown/

如何使用 Stylelint 来防止在媒体查询中使用 "max-width"

How to use Stylelint to prevent use of "max-width" in media queries

stylelint