Question

我想在媒体查询中使用max-width时发出警告/错误，并鼓励使用min-width的移动优先方法。

我可以警告/错误...

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

但允许......

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

Answer 1

现在可以在最新的stylelint中使用media-feature-name-blacklist和media-feature-name-whitelist规则：

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

Answer 2

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

Answer 3

我在选择器中使用 max-width 时收到错误“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”

3 个答案: