რა არის BEM მეთოდოლოგია?

BEM (ბლოკი, ელემენტი, მოდიფიკატორი) — CSS-ში კლასების სახელების მიცემის მეთოდოლოგია, რომელიც საშუალებას აძლევს შექმნას მასშტაბური და ადვილად შენარჩუნებადი კოდი. მისი მიზანია, კომპონენტები იყოს დამოუკიდებელი, გადამეორებადი და ადვილად შეცვლადი.

ძირითადი პრინციპები:

ბლოკი: დამოუკიდებელი კომპონენტი, რომელსაც აქვს უნიკალური სახელი. შეუძლია შეიცავდეს ელემენტებს და სხვა ბლოკებს.
```
<div class="card">...</div>
```
ელემენტი: ბლოკის ნაწილი, რომელსაც გარეთ დამოუკიდებელი მნიშვნელობა არ აქვს. ელემენტის სახელი გამოყოფილია ბლოკის სახელიდან ორი ქვედა ხაზით (__).
```
<div class="card">
  <h2 class="card__title">...</h2>
  <p class="card__text">...</p>
</div>
```
მოდიფიკატორი: ბლოკის ან ელემენტის მდგომარეობის დამატება ან მისი გარეგნობის/მოქმედების შეცვლა. მოდიფიკატორის სახელი გამოყოფილია ბლოკის ან ელემენტის სახელიდან ორი ჰაიფენით (--).
```
<button class="button button--primary button--disabled">...</button>
<div class="card card--featured">...</div>
```

უპირატესობები:

კითხულობა: კლასები ადვილად გასაგებია, კომპონენტის სტრუქტურა ჩანს.
გადამეორებადი: კომპონენტები დამოუკიდებელია და შეიძლება გამოყენებულ იქნას სხვადასხვა ნაწილში.
მოწყობა: ერთ კომპონენტში ცვლილებები მინიმალურ გავლენას ახდენს სხვა კომპონენტებზე.
მასშტაბურობა: შესაფერისია დიდ გუნდებსა და პროექტებისთვის.

სტრუქტურის მაგალითი:

.card {
  /* ბლოკის სტილები */
}

.card__title {
  /* ელემენტის სტილები */
}

.card__text {
  /* ელემენტის სტილები */
}

.card--featured {
  /* ბლოკის მოდიფიკატორის სტილები */
}

.button {
  /* ბლოკის სტილები */
}

.button--primary {
  /* ბლოკის მოდიფიკატორის სტილები */
}

.button--disabled {
  /* ბლოკის მოდიფიკატორის სტილები */
}