BEM методологиясын колдонууда изоляция кандай жетишилет?

Изоляцияны блоктар, элементтер жана алардын модификаторлору үчүн уникалдуу класстар аркылуу камсыз кылынат.

• Блок: Анын уникалдуу класстагы аты бар, мисалы, button. Блок классына колдонулган стилилер гана ошол блоктун ичинде жайгашкан элементтерге тиешелүү.
• Элемент: Анын аты блоктун аты, эки асты сызык жана элементтин аты, мисалы, button__text. Элементтин стили белгилүү бир блокко байланыштуу жана башка блоктордогу ошол эле аталыштагы элементтерге таасир этпейт.
• Модификатор: Анын аты блоктун же элементтин аты, эки тире (же бир асты сызык, келишимге жараша) жана модификатордун аты, мисалы, button--disabled же button__text_bold. Модификатор бар блоктун же элементтин касиеттерин кошот же өзгөртөт, башкасына таасир этпестен.

HTML түзүмүнүн мисалы:

<button class="button button--primary">
  <span class="button__icon"></span>
  <span class="button__text">Тигез</span>
</button>

<div class="card">
  <h2 class="card__title">Аталышы</h2>
  <p class="card__text">Картанын тексттери</p>
</div>

CSS мисалы:

.button {
  /* Тугмача үчүн гана стили */
}

.button--primary {
  /* Бул тугма үчүн модификатор стили */
}

.button__icon {
  /* .button ичиндеги сүрөттүк стили */
}

.button__text {
  /* .button ичиндеги тексттин стили */
}

.card {
  /* Картанын гана стили */
}

.card__title {
  /* .card ичиндеги аталыштын стили */
}

.card__text {
  /* .card ичиндеги тексттин стили */
}

Бул номенклатура жана стилинин түзүмү аркылуу бир блоктун CSS эрежелери башка блоктор менен кагылышпайт, эгерде алар окшош аталыштагы элементтерди камтыса да. Бул компоненттерди иштеп чыгуу, тейлөө жана кайра колдонуу үчүн жеңилдик берет.