DRY & BEM 澄清答案

【问题标题】：DRY & BEM clarficationDRY & BEM 澄清
【发布时间】：2018-07-06 00:36:46
【问题描述】：

我正在使用 BEM 方法，但想知道我的 scss 是否因为它看起来很糟糕，并想知道它是否对性能不利。我多次设置“.description”和“.title”的样式，但它们位于不同的修饰符部分，这会引起关注吗？我可以为所有“.title”和“.description”使用一个类吗？如果是这样，如何在 BEM 中使用它？

这是我的 scss：

.section {
  padding: 10rem 0 0 0;
  @include for-tablet-landscape-up {
    padding: 12rem 0 0 0;
  }

  //TEAM:
  @include modifier('team') {
    text-align: center;
    .section__title {
      text-align: left;
      display: inline-block;
    }
  }

  //EXPERIENCE:
  @include modifier('experience') {
    .experience {
      margin-bottom: 3.125rem;
      &:last-of-type{
        margin-bottom: 0;
      }
      @include for-tablet-portrait-up{
        margin-bottom: 5.625rem; 
      }
      .line {
        width: 12%;
        height: 1px;
        background-color: yellowgreen;
        display: inline-block;
        position: relative;
        top: -9px;
        left: -3px;
      }
      @include element('title'){
        font-size: 1.875rem;
        font-family: $type-font--cormorant-garamond;
        margin-bottom: 1.875rem;
      }
      @include element('description'){
        font-size: 1rem;
        color: $color-offset--light-grey;
      }
    }
  }

  //FIRM OVERVIEW:
  @include modifier('firm-overview'){
    .firm-overview{
      margin-bottom: 6.25rem;
      &:last-of-type{
        margin-bottom: 0;
      }
      &:nth-of-type(2){
        margin-left: 42.5%;
      }
      @include element('number'){
        font-size: 1.75rem;
        font-family: $type-font--cormorant-garamond;
        margin-bottom: 2.8125rem;
      }
      @include element('title'){
        font-size: 1.25rem;
        color: $color-offset--green;
        letter-spacing: .3rem;
        text-transform: uppercase;
        margin-bottom: 3.125rem;

        @include for-tablet-landscape-up{
          margin-bottom: 6.25rem;
        }
      }
      @include element('description'){
        font-family: $type-font--cormorant-garamond;
        font-size: 1.125rem;
      }
    }
  }

  //COMMUNICATION:
  @include modifier('communication'){
    .communication{
      @include element('description'){
        font-family: $type-font--cormorant-garamond;
        font-size: 1.125rem;
        color: $color-offset--light-grey;
      }
    }
  }

  .block-holder {
    position: relative;
    display: inline-block;
  }
  @include element('top-line') {
    position: absolute;
    top: -.5rem;
    left: 0;
    background-color: $color-offset--green;
    width: 37%;
    height: 1px;
  }
  @include element('tagline') {
    font-size: 0.875rem;
    letter-spacing: 0.55rem;
    text-transform: uppercase;
    margin-bottom: .7rem;
    font-family: $type-font--cormorant-garamond;
  }
  @include element('title') {
    font-family: $type-font--cormorant-garamond;
    font-size: 2.175rem;
    margin-bottom: 5.625rem;
    line-height: 1;
    @media screen and (min-width: 1000px) {
      font-size: 2.5rem;
    }
    @include modifier('block') {
      line-height: 1.1;
      span:last-of-type {
        line-height: .8;
      }
    }
  }
  @include element('description') {
    font-size: 1.125rem;
    text-align: left;
    margin-bottom: 5.625rem;
  }
}

感谢您的时间和指导。意义重大。

【问题讨论】：

标签： html sass bem

【解决方案1】：

我试图“编译”你的 sass 并得到以下 css：

.section {}
.section_team .section__title {}
.section_experience .line {}
.section_experience .section__title {}
.section_experience .section__description {}
etc.

BEM 方法存在一些问题。块的第一个修饰符会影响元素。不确定这是个大问题，但最好直接向元素添加修饰符。但是，如果元素没有相互嵌套，那就没问题了。

第二个问题是一个块的修饰符影响另一个块.section_experience .line {}。好的做法是在这种情况下使用混合：
而不是.section_experience .line {}试试

CSS：

.section__line {}

HTML：

div.section__line.line

恕我直言
在我看来，每次调用 mixins 来添加元素和修饰符都过于复杂。也许，写&__ 或&_ 很容易。

【讨论】：