DRY & BEM分类

Question

我正在使用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;
  }
}

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

Answer 1

我试着“编译”你的sass，得到了下面的css：

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

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

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

而不是.section_experience .line {}尝试

Css:

.section__line {}

Html：

div.section__line.line

IMHO

在我看来，每次调用混入来添加元素和修饰符都过于复杂了。也许，只编写&__或&_很容易。