使用媒体查询，遵循 SASS 和 BEM 的标准？

Question

我正在遵循 BEM 实践并想添加特定的断点，看来有 2 种格式适合我。有谁知道两者的优势？

这里是第一个，我直接把媒体嵌入到元素中（BEM）

.my-component {
  &__section-field {
    display: flex;
    flex-wrap: wrap;
  }

  &__section-sep {
    width: 100%;
    @media(min-width: 900px) {
        width: 50%;
    }
  }
}

这是第二个，我将媒体查询嵌入到该部分之外并再次重新定义该部分。

.my-component {
  &__section-field {
    display: flex;
    flex-wrap: wrap;
  }

  &__section-sep {
    width: 100%;
  }
  @media(min-width: 900px) {
    &__section-sep {
      width: 50%;
    }
  }
}

如您所见，我基本上是在 50% 或 100% 之间更改项目的宽度，具体取决于它是否仅适用于移动设备的分辨率。我正在使用带有 flex-wrap 的 flexbox，它根据行中剩余的 space 进行换行。

据我所知，它们的工作原理似乎相同。谁能确认是否存在差异，哪个更具可扩展性和可维护性？

也许有些事情我没有想到，我确实考虑过将我的媒体查询存储在一个单独的文件中，但我试图将所有内容放在一起并遵循 bem 方法。

Answer 1

我更喜欢第二种变体，原因如下：当你有很多媒体查询时，第一种变体确实需要更少 copy/paste。

但是，如果代码块中有很多元素或修饰符（即选择器），代码的可读性就会大大降低。当需要在同一屏幕上更改多个 elements/modifiers 的样式时，这种情况很常见。当这种情况出现时——对我来说——在媒体查询之间导航、找到所需的媒体并在那里更改代码会更容易——所以你在文件中的一个地方工作，而在第一个变体中你需要在选择器之间跳转。在我看来，在使用媒体查询时 - 在它们之间导航比在选择器之间导航更快。

想象以下代码，每个选择器中都有媒体查询：

.section_name_educational {
    display: flex;
    flex-direction: row;
    padding: 0px;

    .fp-tableCell {
        display: flex;
        flex-direction: row;
    }

    .section {

        &__inner {
            display: flex;
            flex-direction: row-reverse;
            height: 100vh;
            height: calc(100vh - 80px);
            box-sizing: border-box;
            width: 50%;
            padding-left: 40px;
            margin-top: auto;
            padding-bottom: 40px;
        }

        &__header {
            position: relative;
            width: 100%;
            top: 62px;
            left: 40px;
        }

        &__text-holder {
            width: 100%;
        }

        &__title {
            font-size: 48px;
        }

        &__subtitle {
            width: 150%;
            margin: 20px 0px;
        }

        &__description {
            color: #669900;
            font-size: 18px;
        }

        &__primary {
            height: 100%;
            display: flex;
            box-sizing: border-box;
            flex-direction: column;
            justify-content: space-between;
            width: 100%;
        }

        &__additional {
            display: none;
        }

        &__kettles {
            display: flex;
        }


        &__kettle {
            height: auto;
            margin-right: 20px;

            &_order {
                &_1 {
                    width: 183px;
                    min-width: 183px;
                    max-width: 183px;
                }

                &_2 {
                    width: 108px;
                    min-width: 108px;
                    max-width: 108px;
                }

                &_3 {
                    width: 127px;
                    min-width: 127px;
                    max-width: 127px;
                }
            }
        }

        &__background-holder {
            overflow: hidden;
            max-height: 100vh;
        }

        &__background {
            position: relative;
            width: auto;
            height: 100vh;
        }
    }
}



@media all and (max-height: 600px) {
.section_name_educational {
    .section {
        &__kettle {
            &_order {
                &_2 {
                    width: 68px;
                    max-width: 68px;
                    min-width: 68px;
                    height: 120px;
                    margin-left: 30px;
                }

                &_3 {
                    width: 78px;
                    max-width: 78px;
                    min-width: 78px;
                    height: 120px;
                }
            }
        }
    }
}
}



@media all and (max-height: 760px) {
.section_name_educational {
    .section {
        &__header {
            top: 40px;
        }

        &__subtitle {
            width: 100% !important;
        }

        &__additional {
            display: none !important;
        }
    }
}
}



@media (--large) {
.section_name_educational {
    .section {
        &__subtitle {
            width: 120%;
        }
    }
}
}



@media (--xlarge) {
.section_name_educational {
    padding-top: 120px;

    .section {

        &__inner {
            height: calc(100vh - 60px);
            margin-top: 0;
        }

        &__header {
            transition-delay: 1s;
            opacity: 0;
            right: -100px;
            bottom: -40px;
            transform: translateY(20px);
        }

        &__subtitle {
            width: 120%;
        }

        &__primary {
            width: calc(100% - 160px);
        }

        &__additional {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }

        &__bubbles {
            display: block;
            position: relative;
            top: 40px;
            width: 160px;
            min-width: 160px;
            max-width: 160px;
            height: auto;
            transform: translateY(20px);
            opacity: 0;
            transition-delay: 1s;
        }

        &__kettle {
            opacity: 0;
            transform: translateY(20px);
            transition-delay: 1s;
        }
    }

    &.active {
        .section {
            &__header {
                    transition: opacity 1s ease-out 0.8s,
                            transform 0.8s ease-out 0.8s;
                opacity: 1;
                transform: translateY(0px);
            }

            &__kettle {
                opacity: 1;
                transform: translateY(0px);
                transition: opacity 0.6s ease-out,
                            transform 0.6s ease-out;
                &_order {
                    &_1 {
                        transition-delay: 1.6s;
                        display: block;
                    }

                    &_2 {
                        transition-delay: 1.9s;
                    }

                    &_3 {
                        transition-delay: 2.1s;
                    }
                }
            }

            &__bubbles {
                transition: opacity 0.8s ease-out 2.5s,
                            transform 0.8s ease-out 2.3s;
                transform: translateY(0px);
                opacity: 1;
            }
        }
    }
}
}



@media all and (min-width: 1400px) {
.section_name_educational {
    .section {
        &__header {
            left: 60px;
        }

        &__subtitle {
            width: 110%;
        }
    }
}
}



@media (--xxlarge) {
.section_name_educational {
    .section {

        &__primary {
            width: calc(100% - 148px);
        }

        &__subtitle {
            width: 80%;
            margin: 40px 0px;
        }

        &__description-inner {
            width: 60%;
        }

        &__bubbles {
            width: 148px;
            min-width: 148px;
            max-width: 148px;
            top: 40px;
        }
    }
}
}



@media (--monster) {
.section_name_educational {
    .section {
        &__primary {
            width: calc(100% - 227px);
        }

        &__header {
            left: 200px;
            top: 150px;
        }

        &__title {
            font-size: 58px;
        }

        &__subtitle {
            font-size: 24px;
            width: 80%;
        }

        &__description {
            font-size: 24px;
        }

        &__bubbles {
            width: 227px;
            min-width: 227px;
            max-width: 227px;
            left: 0px;
        }
    }
}
}

至于我 - 如果我用第一个变体完成它，将很难阅读它。

使用媒体查询，遵循 SASS 和 BEM 的标准？

Using media queries, following standards with SASS and BEM?

sass

media-queries

bem