BEM methodology

/* Аль .товч вэ? */
.товч {
}
.товч-улаан {
}
.товч2 {
}
.товч-шинэ {
}

/* Specificity тэмцэл */
div.header .nav ul li a {
}
#нэвтрэх-маягт .товч {
}

/* Нэр давхцал — A хөгжүүлэгчийн .карт, B хөгжүүлэгчийн .карт */
.карт {
  background: red;
}
.карт {
  background: blue;
} /* аль нь давамгайлах? */

.блок__элемент--модификатор

.карт {
}
.navbar {
}
.товч {
}
.маягт {
}
.хайлт {
}

<div class="карт">...</div>
<nav class="navbar">...</nav>
<button class="товч">...</button>

.карт__зураг {
}
.карт__гарчиг {
}
.карт__текст {
}
.карт__хөл {
}

.navbar__лого {
}
.navbar__холбоос {
}
.navbar__товч {
}

<div class="карт">
  <img class="карт__зураг" src="..." />
  <h2 class="карт__гарчиг">Гарчиг</h2>
  <p class="карт__текст">Текст...</p>
  <div class="карт__хөл">
    <button class="товч">Унших</button>
  </div>
</div>

/* Блокийн modifier */
.товч {
}
.товч--томруулсан {
}
.товч--бага {
}
.товч--идэвхгүй {
}
.товч--ягаан {
}

/* Элементийн modifier */
.navbar__холбоос {
}
.navbar__холбоос--идэвхтэй {
}

<!-- Анхдагч -->
<button class="товч">...</button>

<!-- Томруулсан хувилбар -->
<button class="товч товч--томруулсан">...</button>

<!-- Идэвхтэй холбоос -->
<a class="navbar__холбоос navbar__холбоос--идэвхтэй">Нүүр</a>

/* === КАРТ БЛОК === */
.карт {
  background: #0f172a;
  border: 1px solid #1e293b;
  border-radius: 12px;
  overflow: hidden;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

/* Modifier: онцолсон карт */
.карт--онцолсон {
  border-color: #a78bfa;
  box-shadow: 0 0 20px rgba(167, 139, 250, 0.15);
}

/* Modifier: хэвтээ карт */
.карт--хэвтээ {
  display: flex;
  flex-direction: row;
}

/* === КАРТ ЭЛЕМЕНТҮҮД === */
.карт__зураг {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.карт--хэвтээ .карт__зураг {
  width: 160px;
  height: auto;
}

.карт__агуулга {
  padding: 20px;
}

.карт__badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 12px;
  margin-bottom: 12px;
}

/* Modifier: badge-ийн өнгө */
.карт__badge--ягаан {
  background: #2e1065;
  color: #a78bfa;
}

.карт__badge--ногоон {
  background: #052e16;
  color: #4ade80;
}

.карт__гарчиг {
  font-size: 18px;
  font-weight: 600;
  color: #f1f5f9;
  margin-bottom: 8px;
}

.карт__текст {
  font-size: 14px;
  color: #94a3b8;
  line-height: 1.6;
}

.карт__хөл {
  padding: 16px 20px;
  border-top: 1px solid #1e293b;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

<!-- Анхдагч карт -->
<div class="карт">
  <img class="карт__зураг" src="..." alt="..." />
  <div class="карт__агуулга">
    <span class="карт__badge карт__badge--ягаан">TypeScript</span>
    <h2 class="карт__гарчиг">TypeScript курс</h2>
    <p class="карт__текст">Статик төрлийн TypeScript-ийг сур.</p>
  </div>
  <div class="карт__хөл">
    <span>40 хичээл</span>
    <button class="товч">Эхлэх</button>
  </div>
</div>

<!-- Онцолсон карт -->
<div class="карт карт--онцолсон">...</div>

/* Латин BEM */
.card {
}
.card__image {
}
.card__title {
}
.card--featured {
}

.btn {
}
.btn--large {
}
.btn--primary {
}
.btn--disabled {
}

.nav {
}
.nav__link {
}
.nav__link--active {
}

<!-- БУРУУ: Element-ийн доторх Element — гурав ба дээш давхар бүү бич -->
<div class="карт__агуулга__гарчиг">...</div>

<!-- ЗӨВ: Шинэ element нэр өг -->
<div class="карт__гарчиг">...</div>

<!-- БУРУУ: Modifier дангаар -->
<div class="карт--онцолсон">...</div>

<!-- ЗӨВ: Блок + Modifier хамт -->
<div class="карт карт--онцолсон">...</div>

/* Бүтэц */
.хайрцаг {
  padding: 20px;
  border-radius: 8px;
}

/* Харагдах байдал — тусдаа */
.хайрцаг-хар {
  background: #0f172a;
}
.хайрцаг-цагаан {
  background: white;
}

<div class="хайрцаг хайрцаг-хар">...</div>
<div class="хайрцаг хайрцаг-цагаан">...</div>

/* 1. Base — анхдагч */
body,
h1,
p {
  margin: 0;
}

/* 2. Layout — хуудасны бүтэц */
.l-хажуу-талбар {
  width: 240px;
}
.l-гол {
  flex: 1;
}

/* 3. Module — компонент */
.карт {
}
.navbar {
}

/* 4. State — байдал */
.is-нуугдсан {
  display: none;
}
.is-идэвхтэй {
  background: #a78bfa;
}

/* 5. Theme — theme */
.theme-харанхуй body {
  background: #0b1120;
}