СУХОЕ И БЭМ разъяснение - PullRequest
Новая
       10

СУХОЕ И БЭМ разъяснение

0 голосов
/ 06 июля 2018

Я использую БЭМ-подход, но хочу знать, выглядит ли мой scss из-за этого плохо, и задаюсь вопросом, плохо ли это для производительности. Я стилизую '.description' и '.title' несколько раз, но это в разных разделах модификаторов, может ли это вызывать беспокойство? Могу ли я использовать один класс для всех «.title» и «.description». Если так, как использовать это в БЭМ?

Вот мой 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;
  }
}

Спасибо за ваше время и руководство. Значит много.

1 Ответ

0 голосов
/ 19 июля 2018

Я попытался "скомпилировать" тебя sass и получил следующее CSS: 

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

И есть некоторые проблемы с подходом БЭМ. Сначала модификатор блока влияет на элемент. Не уверен, что это огромная проблема, но было бы лучше добавить модификаторы непосредственно к элементам. Но если элементы не вложены друг в друга, это нормально.

И вторая проблема - модификатор одного блока, блокирующий другой блок .section_experience .line {}. Хорошей практикой является использование смесей в этом случае:
Вместо .section_experience .line {} попробуйте

Css: 

.section__line {}

Html 

div.section__line.line

ИМХО
Мне кажется, слишком сложно каждый раз вызывать mixins для добавления элементов и модификаторов. Возможно, просто написать &__ или &_.

...