Лучший подход для веб-компонента с использованием BEM и SASS - PullRequest
Новая
       44

Лучший подход для веб-компонента с использованием BEM и SASS

0 голосов
/ 16 апреля 2020

Я хочу знать о наилучшем подходе, когда нам нужно написать веб-компонент многократного использования (с учетом возможного переопределения пользователями), используя BEM и SASS:

Предположим, у нас есть главный элемент и дочерний элемент, поэтому, используя bem: 

<div class="main">
  <div class="main__child"></div>
</div>

Я хочу сосредоточиться на двух подходах в SASS:

Подход 1) 

.main {
  width: 200px;
  height: 200px;
  background-color: red;

  .main__child {
    width: 100px;
    height: 100px;
    background-color: orange;
 }
}

это соответствует 

.main {
  width: 200px;
  height: 200px;
  background-color: red;
}

.main .main__child {
  width: 100px;
  height: 100px;
  background-color: orange;
}

Подход 2) 

.main{
  width: 200px;
  height: 200px;
  background-color: red;

  &__child {
    width: 100px;
    height: 100px;
    background-color: orange;
  }
}

это соответствует 

.main {
  width: 200px;
  height: 200px;
  background-color: red;
}
.main__child {
  width: 100px;
  height: 100px;
  background-color: orange;
}

В первом подходе мы имеем более конкретную c Правило, чтобы мы могли выбирать только классы .main__child, которые являются потомками класса .main. (прочные отношения)

Во втором подходе два класса технически разделены в css. Из-за амперсанда (&).

Я запутался в этом. Читая в Интернете, кажется, что общий подход - второй подход. Можете ли вы дать мне больше объяснений? Даже учитывая переопределение класса?

1 Ответ

1 голос
/ 16 апреля 2020

Самым распространенным паттерном, как вы сказали, является второй подход. Этот подход, однако, имеет один большой недостаток: возможность поиска по имени компонента.

Допустим, вы создаете обзор всех цветов транспортных средств, вы получите 

.car {
  // Styling of a car

  &--red {
    color: red;
  }
}

.bike {
  // Styling of a bike

  &--red {
    color: red;
  }
}

Дело в том, что blocks всегда уникальны, но elements и modifiers нет. Если вам теперь нужно найти стиль красного велосипеда, вы не можете искать .bike--red, потому что это нигде в вашем коде (за исключением визуализированного css), и если вы будете искать --red, вы получите все красные транспортные средства.

Чтобы это исправить, проще настроить свой стиль так: 

.car {
  // Styling of a car
}

.car--red {
  color: red;
}

.bike {
  // Styling of a bike
}

.bike--red {
  color: red;
}

Ваш стиль по-прежнему перезаписывается правильным образом, все имеет специфичность 1 (см. эта ссылка для получения дополнительной информации о специфике), и вы можете искать полное имя элемента в вашем коде!

...