`menu__item–active`<\/strong>: Aktif veya se\u00e7ili olan men\u00fc \u00f6\u011fesini belirtir.<\/li>\n<\/ul>\nHTML’de hem temel s\u0131n\u0131f hem de modifier s\u0131n\u0131f\u0131 birlikte kullan\u0131l\u0131r: `…`<\/button>`.<\/p>\nKey-Value Tipi Modifier’lar: `button–size-large`, `card–theme-dark`<\/h4>\n Anahtar-de\u011fer (key-value) tipi modifier’lar, bir \u00f6zelli\u011fin farkl\u0131 de\u011ferler alabilece\u011fi durumlar i\u00e7in kullan\u0131l\u0131r. \u0130simlendirme genellikle `block–key-value` format\u0131ndad\u0131r.<\/p>\n
\n`button–size-large`<\/strong>: Butonun boyutunu “b\u00fcy\u00fck” olarak ayarlar. Ayn\u0131 blo\u011fun `button–size-small` gibi ba\u015fka bir versiyonu da olabilir.<\/li>\n`card–theme-dark`<\/strong>: Kart bile\u015feninin koyu tema versiyonunu tan\u0131mlar.<\/li>\n<\/ul>\nBu yap\u0131, bir bile\u015fenin farkl\u0131 varyasyonlar\u0131n\u0131 olu\u015fturmay\u0131 olduk\u00e7a kolay ve organize hale getirir.<\/p>\n
\n
\n\n\nBile\u015fen<\/th>\n Tan\u0131m<\/th>\n \u0130simlendirme<\/th>\n \u00d6rnek<\/th>\n<\/tr>\n<\/thead>\n \n\nBlock<\/strong><\/td>\nYeniden kullan\u0131labilir, ba\u011f\u0131ms\u0131z aray\u00fcz par\u00e7as\u0131.<\/td>\n .block<\/code><\/td>\n.card<\/code>, .menu<\/code><\/td>\n<\/tr>\n\nElement<\/strong><\/td>\nBir blo\u011fa ait, tek ba\u015f\u0131na anlams\u0131z alt par\u00e7a.<\/td>\n .block__element<\/code><\/td>\n.card__title<\/code>, .menu__item<\/code><\/td>\n<\/tr>\n\nModifier<\/strong><\/td>\nBlock veya Element’in g\u00f6r\u00fcn\u00fcm\/durum de\u011fi\u015fikli\u011fi.<\/td>\n .block--modifier<\/code> veya .block__element--modifier<\/code><\/td>\n.card--featured<\/code>, .menu__item--active<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/span>BEM \u0130simlendirme Kurallar\u0131n\u0131n Pratik Uygulamas\u0131<\/span><\/h2>\nBEM metodolojisinin teorik temellerini anlad\u0131ktan sonra, bu kurallar\u0131n ger\u00e7ek bir projede HTML ve CSS’e nas\u0131l yans\u0131d\u0131\u011f\u0131n\u0131 g\u00f6rmek \u00f6nemlidir. Pratik uygulama, BEM’in sa\u011flad\u0131\u011f\u0131 netli\u011fi ve d\u00fczeni en iyi \u015fekilde ortaya koyar. Bu b\u00f6l\u00fcmde, basit bir haber kart\u0131 bile\u015feni \u00fczerinden BEM’in nas\u0131l hayata ge\u00e7irildi\u011fini ad\u0131m ad\u0131m inceleyece\u011fiz.<\/p>\n
<\/span>HTML Yap\u0131s\u0131nda BEM S\u0131n\u0131flar\u0131n\u0131n Kullan\u0131m\u0131<\/span><\/h3>\nBEM’in g\u00fczelli\u011fi, HTML yap\u0131s\u0131n\u0131n kendisini bir belge haline getirmesidir. S\u0131n\u0131f isimlerine bakarak bile\u015fen hiyerar\u015fisini ve elemanlar\u0131n rollerini kolayca anlayabilirsiniz. Bir BEM s\u0131n\u0131f\u0131, CSS’teki etiket veya ID se\u00e7icilere olan ba\u011f\u0131ml\u0131l\u0131\u011f\u0131 ortadan kald\u0131r\u0131r. Her stil, do\u011frudan bir s\u0131n\u0131fa uygulan\u0131r. Bu, hem \u00f6zg\u00fcll\u00fc\u011f\u00fc (specificity) d\u00fc\u015f\u00fck tutar hem de yap\u0131sal de\u011fi\u015fikliklerin (\u00f6rne\u011fin bir `div`’i `article` ile de\u011fi\u015ftirmenin) stilleri bozmas\u0131n\u0131 engeller.<\/p>\n
<\/span>CSS (veya SASS\/SCSS) Dosyalar\u0131nda BEM Yap\u0131s\u0131<\/span><\/h3>\nCSS taraf\u0131nda, BEM isimlendirmesi d\u00fcz ve \u00e7ak\u0131\u015fmayan bir yap\u0131 sunar. Se\u00e7iciler asla i\u00e7 i\u00e7e yaz\u0131lmaz (\u00f6rn: `.block .element` yerine do\u011frudan `.block__element` kullan\u0131l\u0131r). Bu kural, “specificity” sava\u015flar\u0131n\u0131 \u00f6nlemenin anahtar\u0131d\u0131r. SASS veya SCSS gibi bir CSS \u00f6n i\u015flemcisi kullan\u0131yorsan\u0131z, BEM yap\u0131s\u0131n\u0131 daha mod\u00fcler hale getirebilirsiniz. \u00d6rne\u011fin, her blok i\u00e7in ayr\u0131 bir dosya (`_card.scss`, `_menu.scss`) olu\u015fturabilir ve SASS’in i\u00e7 i\u00e7e yaz\u0131m \u00f6zelli\u011fini (`&__element`, `&–modifier`) kullanarak daha temiz ve okunabilir kodlar elde edebilirsiniz. Ancak derlenmi\u015f son CSS \u00e7\u0131kt\u0131s\u0131 yine de d\u00fcz ve i\u00e7 i\u00e7e olmayan se\u00e7icilerden olu\u015fmal\u0131d\u0131r.<\/p>\n
<\/span>\u00d6rnek Bir Bile\u015fen Analizi: Haber Kart\u0131 (`article-card`)<\/span><\/h3>\n\u015eimdi, bir web sitesinin ana sayfas\u0131nda g\u00f6rebilece\u011fimiz tipik bir haber kart\u0131 bile\u015fenini BEM ile nas\u0131l yap\u0131land\u0131raca\u011f\u0131m\u0131z\u0131 inceleyelim.<\/p>\n
Block: `article-card`<\/h4>\n Bile\u015fenimizin en d\u0131\u015f sarmalay\u0131c\u0131s\u0131 ve temel ta\u015f\u0131 bloktur. Bu bile\u015fen, bir makaleyi veya haberi \u00f6zetleyen, kendi kendine yeten bir birimdir. Bu nedenle, blo\u011fumuzun ad\u0131 `article-card` olacakt\u0131r.
…<\/div>\n
`<\/p>\n
Elements: `article-card__image`, `article-card__title`, `article-card__summary`<\/h4>\n Bu blok, birka\u00e7 alt par\u00e7adan olu\u015fur. Bu par\u00e7alar, `article-card` blo\u011funa ait elemanlard\u0131r ve onsuz bir anlamlar\u0131 yoktur.<\/p>\n
\n`article-card__image`:<\/strong> Haberle ilgili g\u00f6rseli i\u00e7eren kap.<\/li>\n`article-card__title`:<\/strong> Haberin ba\u015fl\u0131\u011f\u0131.<\/li>\n`article-card__summary`:<\/strong> Haberin k\u0131sa bir \u00f6zeti.<\/li>\n<\/ul>\nBu elemanlarla birlikte HTML yap\u0131m\u0131z \u015f\u00f6yle g\u00f6r\u00fcn\u00fcr:
`
\n
\n`
`
\n
\n` <\/p>\n
<\/span>…<\/span><\/h3>\n`
…<\/p>\n
`
`<\/p>\n
Modifiers: `article-card–featured`, `article-card–no-image`<\/h4>\n Bazen bu kart\u0131n farkl\u0131 varyasyonlar\u0131na ihtiya\u00e7 duyabiliriz. \u00d6rne\u011fin, “\u00f6ne \u00e7\u0131kan” bir haberi vurgulamak veya g\u00f6rseli olmayan haberler i\u00e7in farkl\u0131 bir d\u00fczen olu\u015fturmak isteyebiliriz. \u0130\u015fte burada modifier’lar devreye girer.<\/p>\n
\n`article-card–featured`:<\/strong> Bu modifier, kart\u0131n \u00f6ne \u00e7\u0131kan bir haber oldu\u011funu belirtir. Belki farkl\u0131 bir kenarl\u0131k rengi veya arka plan ekleyebilir.<\/li>\n`article-card–no-image`:<\/strong> Bu modifier, g\u00f6rseli olmayan kartlar i\u00e7in kullan\u0131l\u0131r. Belki bu durumda ba\u015fl\u0131\u011f\u0131n font boyutunu b\u00fcy\u00fctebilir veya hizalamay\u0131 de\u011fi\u015ftirebilir.<\/li>\n<\/ul>\nModifier’lar HTML’de temel blok s\u0131n\u0131f\u0131yla birlikte kullan\u0131l\u0131r:
…<\/div>\n
`
…<\/div>\n
`<\/p>\n
Bu yap\u0131 sayesinde, CSS kodumuz son derece a\u00e7\u0131k ve y\u00f6netilebilir olur. `.article-card–featured .article-card__title` gibi karma\u015f\u0131k se\u00e7iciler yerine, sadece `.article-card–featured` s\u0131n\u0131f\u0131na \u00f6zel stiller ekleyerek istedi\u011fimiz de\u011fi\u015fikli\u011fi kolayca yapabiliriz.<\/p>\n
<\/span>BEM Kullanman\u0131n Sa\u011flad\u0131\u011f\u0131 Avantajlar<\/span><\/h2>\nBEM metodolojisini benimsemek, ba\u015flang\u0131\u00e7ta kat\u0131 kurallar\u0131 nedeniyle biraz ek \u00e7aba gerektirebilir. Ancak bu yap\u0131ya al\u0131\u015ft\u0131ktan sonra, projelere getirdi\u011fi uzun vadeli faydalar bu \u00e7abaya kesinlikle de\u011fer. BEM, sadece bir isimlendirme standard\u0131 de\u011fil, ayn\u0131 zamanda daha temiz, daha s\u00fcrd\u00fcr\u00fclebilir ve daha verimli bir CSS yazma felsefesidir.<\/p>\n
<\/span>Artan Okunabilirlik ve Bak\u0131m Kolayl\u0131\u011f\u0131<\/span><\/h3>\nBEM’in en belirgin faydas\u0131, kodun okunabilirli\u011fini \u00e7arp\u0131c\u0131 bir \u015fekilde art\u0131rmas\u0131d\u0131r. `card__title–highlighted` gibi bir s\u0131n\u0131f ad\u0131, herhangi bir geli\u015ftiriciye bu elementin “card” blo\u011funa ait bir “ba\u015fl\u0131k” oldu\u011funu ve “vurgulanm\u0131\u015f” bir varyasyona sahip oldu\u011funu an\u0131nda anlat\u0131r. Bu sayede, bir bile\u015fenin yap\u0131s\u0131n\u0131 ve stillerini anlamak i\u00e7in HTML ve CSS dosyalar\u0131 aras\u0131nda s\u00fcrekli ge\u00e7i\u015f yapma ihtiyac\u0131 ortadan kalkar. Kodun bak\u0131m\u0131 da kolayla\u015f\u0131r; \u00e7\u00fcnk\u00fc bir bile\u015feni de\u011fi\u015ftirmek istedi\u011finizde, hangi s\u0131n\u0131flar\u0131 hedeflemeniz gerekti\u011fini net bir \u015fekilde bilirsiniz ve yapt\u0131\u011f\u0131n\u0131z de\u011fi\u015fikli\u011fin ba\u015fka bir bile\u015feni etkileme riski minimuma iner.<\/p>\n
<\/span>Tak\u0131m \u00c7al\u0131\u015fmas\u0131nda \u0130leti\u015fim ve Tutarl\u0131l\u0131k Sa\u011flama<\/span><\/h3>\nBirden fazla geli\u015ftiricinin \u00e7al\u0131\u015ft\u0131\u011f\u0131 projelerde BEM, ortak bir dil g\u00f6revi g\u00f6r\u00fcr. Herkes ayn\u0131 isimlendirme kurallar\u0131na uydu\u011funda, kod taban\u0131nda tutarl\u0131l\u0131k sa\u011flan\u0131r. Yeni bir ekip \u00fcyesi projeye dahil oldu\u011funda, mevcut kod yap\u0131s\u0131n\u0131 h\u0131zla anlar ve kolayca adapte olur. Bu standartla\u015fma, “Bu s\u0131n\u0131f ne i\u015fe yar\u0131yor?” veya “Yeni bir bile\u015fen i\u00e7in nas\u0131l bir s\u0131n\u0131f ad\u0131 vermeliyim?” gibi konulardaki belirsizlikleri ortadan kald\u0131r\u0131r. B\u00f6ylece, ekip \u00fcyeleri kod \u00fczerinde daha verimli bir \u015fekilde i\u015fbirli\u011fi yapabilir.<\/p>\n
<\/span>D\u00fc\u015f\u00fck Specificity Sayesinde \u00c7ak\u0131\u015fmalar\u0131n \u00d6nlenmesi<\/span><\/h3>\nBEM, se\u00e7icilerin (selectors) i\u00e7 i\u00e7e kullan\u0131lmas\u0131n\u0131 yasaklar ve her stilin tek bir s\u0131n\u0131fa hedeflenmesini te\u015fvik eder. T\u00fcm se\u00e7iciler (`.block`, `.block__element`, `.block–modifier`) ayn\u0131 d\u00fc\u015f\u00fck \u00f6zg\u00fcll\u00fck (specificity) seviyesine sahip olur. Bu yakla\u015f\u0131m, CSS’in en b\u00fcy\u00fck sorunlar\u0131ndan biri olan “specificity sava\u015flar\u0131n\u0131” ve `!important` kullan\u0131m\u0131n\u0131 neredeyse tamamen ortadan kald\u0131r\u0131r. Stiller daha \u00f6ng\u00f6r\u00fclebilir hale gelir ve bir kural\u0131n ba\u015fka bir kural\u0131 ezmesi gibi istenmeyen durumlar ya\u015fanmaz.<\/p>\n
<\/span>Proje \u00d6l\u00e7eklenebilirli\u011finin Art\u0131r\u0131lmas\u0131<\/span><\/h3>\nProjeler b\u00fcy\u00fcd\u00fck\u00e7e, CSS kod taban\u0131n\u0131n karma\u015f\u0131kl\u0131\u011f\u0131 da artar. BEM’in mod\u00fcler yap\u0131s\u0131, bu b\u00fcy\u00fcmeyi y\u00f6netmeyi kolayla\u015ft\u0131r\u0131r. Her blok ba\u011f\u0131ms\u0131z bir birim oldu\u011fu i\u00e7in, yeni bile\u015fenler eklemek veya mevcut olanlar\u0131 kald\u0131rmak, projenin geri kalan\u0131n\u0131 etkilemez. Bu, b\u00fcy\u00fck \u00f6l\u00e7ekli uygulamalarda ve uzun \u00f6m\u00fcrl\u00fc projelerde stil y\u00f6netimini s\u00fcrd\u00fcr\u00fclebilir k\u0131lar. BEM ile yaz\u0131lm\u0131\u015f bir kod taban\u0131, zamanla eklenen yeni \u00f6zelliklere ve de\u011fi\u015fikliklere kar\u015f\u0131 daha dayan\u0131kl\u0131 olur.<\/p>\n
<\/span>Mod\u00fcler ve Tekrar Kullan\u0131labilir Kod Yap\u0131s\u0131 Olu\u015fturma<\/span><\/h3>\nBEM, aray\u00fcz\u00fc yeniden kullan\u0131labilir bile\u015fenlere (Bloklara) ay\u0131rma felsefesine dayan\u0131r. Bir `button` veya `card` blo\u011fu, projenin herhangi bir yerinde, farkl\u0131 ba\u011flamlarda tekrar tekrar kullan\u0131labilir. Modifier’lar sayesinde, bu bile\u015fenlerin farkl\u0131 g\u00f6r\u00fcn\u00fcmlerini veya durumlar\u0131n\u0131 kolayca olu\u015fturabilirsiniz. Bu mod\u00fcler yakla\u015f\u0131m, kod tekrar\u0131n\u0131 azalt\u0131r (DRY – Don’t Repeat Yourself), geli\u015ftirme s\u00fcrecini h\u0131zland\u0131r\u0131r ve site genelinde g\u00f6rsel tutarl\u0131l\u0131\u011f\u0131 sa\u011flar. Tek bir bile\u015fenin stilini g\u00fcncellemek, kullan\u0131ld\u0131\u011f\u0131 her yerde an\u0131nda yans\u0131r.<\/p>\n
<\/span>S\u0131k Yap\u0131lan Hatalar ve En \u0130yi Uygulamalar<\/span><\/h2>\nBEM metodolojisi g\u00fc\u00e7l\u00fc bir ara\u00e7 olsa da, yanl\u0131\u015f anla\u015f\u0131ld\u0131\u011f\u0131nda veya hatal\u0131 uyguland\u0131\u011f\u0131nda beklenen faydalar\u0131 sa\u011flamayabilir. BEM’i verimli bir \u015fekilde kullanmak i\u00e7in baz\u0131 yayg\u0131n hatalardan ka\u00e7\u0131nmak ve en iyi uygulamalar\u0131 benimsemek \u00f6nemlidir. Bu, kodunuzun temiz, standartlara uygun ve gelece\u011fe d\u00f6n\u00fck olmas\u0131n\u0131 sa\u011flar.<\/p>\n
<\/span>BEM S\u0131n\u0131flar\u0131n\u0131 \u0130\u00e7 \u0130\u00e7e Yazmaktan Ka\u00e7\u0131nma (`.block .element` yerine `.block__element`)<\/span><\/h3>\nBu, BEM’e yeni ba\u015flayanlar\u0131n en s\u0131k yapt\u0131\u011f\u0131 hatad\u0131r. BEM’in temel ama\u00e7lar\u0131ndan biri, CSS \u00f6zg\u00fcll\u00fc\u011f\u00fcn\u00fc (specificity) d\u00fc\u015f\u00fck ve sabit tutmakt\u0131r. `.card .card__title` gibi i\u00e7 i\u00e7e se\u00e7iciler kullanmak, bu amac\u0131 bozar. Do\u011fru yakla\u015f\u0131m, her eleman\u0131 kendi benzersiz s\u0131n\u0131f\u0131yla do\u011frudan hedeflemektir: `.card__title`.<\/p>\n
\nHatal\u0131 Kullan\u0131m (Anti-Pattern):<\/strong> `.card .card__title { … }`<\/li>\nDo\u011fru Kullan\u0131m:<\/strong> `.card__title { … }`<\/li>\n<\/ul>\nBu kural, stil \u00e7ak\u0131\u015fmalar\u0131n\u0131 \u00f6nler ve kodun daha az k\u0131r\u0131lgan olmas\u0131n\u0131 sa\u011flar.<\/p>\n
<\/span>Elementleri Birbirine Zincirlememe (`block__element__sub-element` Anti-Patterni)