CSS
BEM metodolojisi
Block, Element, Modifier adlandırma metodolojisini öğrenirsin.
BEM: Block, Element, Modifier
BEM, büyük arayüzleri tutarlı biçimde adlandırmak için bir yöntemdir. Adı üç parçanın baş harflerinden gelir: Block bağımsız bileşen, Element bloğun bir parçası, Modifier bir halini belirten varyant. Her sınıf adı bu üç fikri birleştirir.
BEM sayesinde sınıf adına baktığında öğenin rolünü hemen görürsün. .card__title bir kartın başlığı, .button--primary bir düğmenin öne çıkan halidir. Çakışan stiller azalır, ekip içinde ortak dil oluşur.
Block: bağımsız bileşen
Bir block, kendi başına duran ve taşıdığı anlamı yalnızca adından alan bileşendir. Menü, arama kutusu, ürün kartı, hero bölümü — her biri birer bloktur. Ad kısa, yalın ve yinelenebilir olmalıdır: .menu, .search, .card, .hero.
Blok adları iç içe geçmez; başka bir bloğun çocuğu gibi yazılmaz. Bir kart menünün içinde de olsa .card olarak adlandırılır. Bu yalınlık, blokların projenin her yerinde yeniden kullanılmasını sağlar.
Element: bloğun parçası
Bir element, bloğun içinde yer alan ve bloktan ayrı anlam taşımayan parçadır. Yazımı: blok adı, çift alt çizgi, element adı. .card__title, .menu__item, .search__input.
Elementler bloklarından ayrı kullanılmaz; .card__title anlamlıdır çünkü bir kartın başlığıdır. Element adları da yalın ve kısa tutulur. Bir blokta birden çok element olabilir ve her biri aynı çift alt çizgi biçimini izler.
Modifier: hal ve varyant
Bir modifier, bir bloğun ya da elementin belirli bir halini ya da varyantını işaretler. Yazımı: blok ya da element adı, çift tire, modifier adı. .button--primary öne çıkan düğme, .menu__item--active seçili menü öğesidir.
Modifier tek başına kullanılmaz; her zaman bir blok ya da element adına eklenir. Yani .button--primary anlamlıdır ama .--primary tek başına değildir. Bu yaklaşım, modifier'ın nereye ait olduğunu her zaman adında taşımasını sağlar.
Uygulama BEM sınıf üçlüsünü yaz
Üç BEM bildirimi ekle. Birincisi .button bloğu; display: inline-flex ve padding: 0.5rem 1rem içersin. İkincisi .button__icon elementi; width: 1.25rem içersin. Üçüncüsü .button--primary modifier'ı; background: navy ve color: white içersin.
Örnek çözümü göster
/* button bloğunu, icon elementini ve primary modifier'ını ekle */
.button {
display: inline-flex;
padding: 0.5rem 1rem;
}
.button__icon {
width: 1.25rem;
}
.button--primary {
background: navy;
color: white;
}
Kendini test et
-
Hangisi geçerli bir BEM element adıdır?
.card__title {
font-weight: bold;
}
- .card--title
- .card_title
- .card__title
- .card-title
Cevabı göster
.card__title — Doğru. Element adı blok adından sonra çift alt çizgiyle ayrılır: .card__title.
-
Element adını tamamla
.menu______ {
padding: 0.5rem 1rem;
}
Cevabı göster
.menu__item {
padding: 0.5rem 1rem;
}
-
Sınıf adını türüne eşle
- .button
- Block
- .button__icon
- Element
- .button--large
- Modifier
- .card__media--rounded
- Element + modifier
Sıradaki ders: CSS örgütme
