bem 相关问题

BEM是Block-Element-Modifier的缩写。这是一种以易于支持和开发的方式命名HTML DOM元素，CSS类，JavaScript变量和其他Web编程标识符的约定。它可以用于单个网站的单独开发，也可以用于跨多个网站的大型团队。

scss中嵌套的正确方法是什么？

我已经准备好了css代码，但是我想将其重写为scss。但是当我这样做时，嵌套不起作用怎么办？ html: 我已经准备好了css代码，但我想将其重写为scss。但是当我这样做时，嵌套不起作用怎么办？ html: <header class="header"> <div class="container"> <div class="header__side"> <nav class="header__nav"> <ul class="header__list"> <li class="header__item"> <span>Catalog</span> <ul class="header__list"> <li class="header__item"> <a href="#">Channels</a> </li> <li class="header__item"> <a href="#">Chats</a> </li> <li class="header__item"> <a href="#">Bots</a> </li> </ul> </li> </ul> </nav> </div> </div> </header> CSS： .header__nav .header__list { padding: 0; margin: 0; list-style: none; position: relative; } 这就是我正在努力做的事情 .header { ... &__nav { margin: 10rem 0; &__list { padding: 0; margin: 0; list-style: none; position: relative; } } } 我只是有很多这样的块，我不想重复自己并像这样写它们 .header { &__nav &__list &__item {} &__nav &__list &__list {} &__nav &__list &__item:hover>&__list {} &__nav &__list &__list &__item {} } 当您将 SCSS 与 BEM 结合使用时，将元素嵌套在块内而不是其他元素内非常重要。这是重写代码的更好方法。 .header { // Main block &__nav { margin: 10rem 0; // Element under header__nav &__list { padding: 0; margin: 0; list-style: none; position: relative; // Element inside header__nav__list &__item { // Styles for list item } // Nested list inside header__nav__list &__list { // Styles for nested list // Hover state for item to display nested list &__item:hover > & { // Styles for nested list when hovered } } } } } <header class="header"> <div class="container"> <div class="header__side"> <nav class="header__nav"> <ul class="header__list"> <li class="header__item"> <span>Catalog</span> <ul class="header__list"> <li class="header__item"> <a href="#">Channels</a> </li> <li class="header__item"> <a href="#">Chats</a> </li> <li class="header__item"> <a href="#">Bots</a> </li> </ul> </li> </ul> </nav> </div> </div> </header>

html css sass bem

回答 1 投票 0

删除/修改默认 WordPress 类/模板以实施 BEM 是否安全？

我正在使用 BEM 方法创建一个 WordPress 主题以供公开发布。为了实现 BEM 方法，我删除/修改了一些默认的 WordPress 模板和类。例如，实施...

php wordpress wordpress-theming bem

回答 1 投票 0

你能在 BEM 中命名一个带有 _ 的类吗？ [已关闭]

很多人这样命名他们的类：header-menu，而我个人更喜欢 header_logo；因为对于懒惰的编码人员来说，它更容易阅读和复制粘贴。 BEM 有什么显着差异吗

css bem

回答 2 投票 0

在 Sass 中匹配多个 BEM 修饰符

我正在使用 BEM，并且有一个具有多个修饰符的元素：我正在使用 SCSS 并利用它来编写

css sass bem

回答 3 投票 0

BEM 中的多个修改器

我有组件按钮我有组件按钮 <button type="button" className="button button_size_large button_color_primary button_type_fill"> <Icon className="button__icon" type={'bc-icon-info'} disabled={false} isFilled={true} /> <span className="button__text">Button</span> </button> 每个修饰符都发生变化 button_color_primary 按钮类型填充按钮_类型_轮廓按钮_类型_文本按钮_颜色_次要按钮类型填充按钮_类型_轮廓按钮_类型_文本 button_color_danger 按钮类型填充按钮_类型_轮廓按钮_类型_文本等等... 在 scss 中我创建了这个 &_color_primary { &.button_type_fill { &:hover {} &:focus {} &:active {} &:disabled {} .button__text { } .button__icon { } } &.button_type_outline { &:hover {} &:focus {} &:active {} &:disabled {} .button__text { } .button__icon { } } &.button_type_text { &:hover {} &:focus {} &:active {} &:disabled {} .button__text { } .button__icon { } } } 这样对于 _secondary 来说，_danger。我认为这不是一个好方法。请提供您的建议。您可以为全局选择器设置全局样式，例如button_type_fill，然后仅在变体中设置颜色，例如button_color_primary

css class sass semantic-ui bem

回答 1 投票 0

块内部元素 BEM 方法

根据 BEM 文档，您不应在元素中使用元素。这对我来说很有意义，因为一个块包含不能在该块之外的元素。但是元素可以吗

html css bem

回答 1 投票 0

如何使用 stylelint 对 Harry Robert 的 BEM 约定进行 lint？

PostCSS BEM Linter 插件需要为每个块定义组件，这在遗留项目中是一件耗时的事情。有没有办法使用 stylelint 来检查类模式并......

sass postcss bem stylelint

回答 3 投票 0

BEM 样式 CSS - 我可以在 BEM 类中传递动态值吗

我正在 React 和 BEM 中编写动画，并且有一个动态动画速度，该速度根据容器宽度而变化： const 动画 = () => { const setScrollingSpeed = (节点列表, timePixel,