Html 干洗店；边界元澄清

我正在使用BEM方法，但我想知道我的SCS是否因为它看起来不好，并想知道它是否对性能有害。我对“.description”和“.title”进行了几次样式设置，但都在不同的修改器部分中，这会引起关注吗？我可以用一个类来表示所有的“.title”和“.description”吗。如果是，如何在边界元法中使用

这是我的SCS：

.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;
  }
}

感谢您的时间和指导。这意味着很多。

我试图“编译”您的sass，得到了以下css：

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

边界元法也存在一些问题。 首先，块的修改器会影响元素。不是舒尔，这是一个大问题，但最好是直接在元素中添加修改器。但是，如果元素之间没有嵌套，那么它就没有问题了

第二个问题是一个块的修饰符影响另一个块

。在这种情况下，最好使用混合料：

不要使用
.section\u experience.line{}
试试看

Css:

.section__line {}

div.section__line.line

Html:

.section__line {}

div.section__line.line


IMHO

在我看来，每次调用mixin来添加元素和修饰符太复杂了。也许，编写
&
或
&
很容易