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

BEM (ბლოკი, ელემენტი, მორგება) – CSS კლასების სახელების მიცემის მეთოდოლოგია, რომელიც დაფუძნებულია ინტერფეისის განყოფილებაზე დამოუკიდებელ ბლოკებად.

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

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

მაგალითი:

/* ღილაკის ბლოკი */
.button {
  display: inline-block;
  padding: 10px 20px;
  border: 1px solid blue;
}

/* ღილაკის შიგნით ხატვის ელემენტი */
.button__icon {
  margin-right: 5px;
}

/* მთავარი მორგება ღილაკის ბლოკისთვის */
.button--primary {
  background-color: blue;
  color: white;
}

/* გამორთული მორგება ღილაკის ბლოკისთვის */
.button--disabled {
  opacity: 0.5;
  cursor: not-allowed;
}