CSS ve BEM
Bu makale CSS ve BEM'i açıklamaktadır.
YouTube Video
Önizleme için HTML
css-bem.html
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>BEM Example</title>
7 <link rel="stylesheet" href="css-base.css">
8 <link rel="stylesheet" href="css-bem.css">
9</head>
10<body>
11 <!-- Header -->
12 <header>
13 <h1>CSS & BEM(Block Element Modifier)</h1>
14 </header>
15
16 <!-- Main content -->
17 <main>
18 <header>
19 <h2>BEM Example</h2>
20 </header>
21 <article>
22 <h3>BEM HTML Example</h3>
23 <section>
24 <header><h4>HTML</h4></header>
25<pre class="sample">
26<div class="button button--primary">
27 <span class="button__text">Click Me</span>
28</div>
29</pre>
30 </section>
31 </article>
32 <article>
33 <h3>BEM Example</h3>
34 <section>
35 <header><h4>HTML</h4></header>
36<pre class="sample">
37<header class="header">
38 <div class="header__logo">My Logo</div>
39 <nav class="header__nav">
40 <ul class="header__menu">
41 <li class="header__menu-item header__menu-item--active">Home</li>
42 <li class="header__menu-item">About</li>
43 <li class="header__menu-item">Contact</li>
44 </ul>
45 </nav>
46</header>
47</pre>
48 </section>
49 <header><h4>HTML+CSS</h4></header>
50 <section class="sample-view">
51 <header class="header">
52 <div class="header__logo">My Logo</div>
53 <nav class="header__nav">
54 <ul class="header__menu">
55 <li class="header__menu-item header__menu-item--active">Home</li>
56 <li class="header__menu-item">About</li>
57 <li class="header__menu-item">Contact</li>
58 </ul>
59 </nav>
60 </header>
61 </section>
62 </article>
63 <article>
64 <h3>BEM Example</h3>
65 <section>
66 <header><h4>HTML</h4></header>
67<pre class="sample">
68<header class="header">
69 <div class="header__logo">My Logo</div>
70 <nav class="header__nav">
71 <ul class="header__menu">
72 <li class="header__menu-item header__menu-item--active">Home</li>
73 <li class="header__menu-item">About</li>
74 <li class="header__menu-item">Contact</li>
75 <li class="header__menu-item header__menu-item--disabled">Disabled</li>
76 </ul>
77 </nav>
78</header>
79</pre>
80 </section>
81 <header><h4>HTML+CSS</h4></header>
82 <section class="sample-view">
83 <header class="header">
84 <div class="header__logo">My Logo</div>
85 <nav class="header__nav">
86 <ul class="header__menu">
87 <li class="header__menu-item header__menu-item--active">Home</li>
88 <li class="header__menu-item">About</li>
89 <li class="header__menu-item">Contact</li>
90 <li class="header__menu-item header__menu-item--disabled">Disabled</li>
91 </ul>
92 </nav>
93 </header>
94 </section>
95 </article>
96 </main>
97</body>
98</html>CSS ve BEM: Etkili Stil Yönetimi Yaklaşımı
CSS, bir web sitesinin görünümünü tanımlamak için kullanılan temel bir dildir. Ancak, özellikle büyük ölçekli projelerde CSS'i etkili bir şekilde yönetmek zor olabilir. BEM (Block Element Modifier), bu sorunları çözmek ve yeniden kullanılabilirlik ile sürdürülebilirliği artırmak için tasarlanmış bir CSS adlandırma kuralıdır.
CSS'teki Zorluklar ve BEM'in Gerekliliği
CSS'teki zorluklar şu sorunları içerir:.
- Global isim alanı çakışması: CSS'te sınıf isimleri geneldir, bu da farklı bileşenler arasında çakışma riski oluşturur.
- Karmaşık seçicilerin aşırı kullanımı: Çok karmaşık alt soy veya ID seçicileri özgüllüğü artırır ve gelecekte değişiklik yapmayı zorlaştırır.
- Azalmış yeniden kullanılabilirlik: Belirli stiller diğer bileşenlerde yeniden kullanılması daha zor hale gelir.
BEM, bu sorunları çözmek için tasarlanmıştır.
BEM'in Temel Kavramları
BEM üç ana öğeden oluşur:.
- Blok: Kendi anlamına sahip bağımsız bir bileşen.
- Eleman: Bir blokun parçası, ona mantıksal olarak bağlı.
- Değiştirici: Bir blok veya elemanın görünümünü veya davranışını değiştirir.
BEM adlandırma kuralları aşağıdaki formatı takip eder:.
.block__element--modifierblock: Blokun bileşen adı.element: Blokun bir parçası olan eleman.modifier: Belirli bir durum veya stil varyasyonunu temsil eder.
Uygulamalı Örnek
Aşağıda basit bir örnek bulunmaktadır.
1<div class="button button--primary">
2 <span class="button__text">Click Me</span>
3</div>buttonbir bloktur.button__textbir öğedir.button--primarybir değiştiricidir.
BEM'in Faydaları
Aşağıda BEM'in avantajları bulunmaktadır.
- Tutarlılık İsimlendirme kuralı tutarlı olduğu için, kodun okunması daha kolay olur.
- Yeniden Kullanılabilirlik Bileşenleri yeniden kullanmak daha kolay hale gelir.
- Bakım Kolaylığı Diğer geliştiriciler kodu daha kolay anlayabilir, bu da değişiklik yapmayı kolaylaştırır.
BEM kullanarak bir proje oluşturma
HTML tasarımı
BEM uygulayan bir HTML örneği burada.
1<header class="header">
2 <div class="header__logo">My Logo</div>
3 <nav class="header__nav">
4 <ul class="header__menu">
5 <li class="header__menu-item header__menu-item--active">Home</li>
6 <li class="header__menu-item">About</li>
7 <li class="header__menu-item">Contact</li>
8 </ul>
9 </nav>
10</header>CSS tasarımı
Aşağıdaki şekilde HTML'ye karşılık gelen CSS'i yazın.
1.header {
2 background-color: #333;
3 color: #fff;
4 padding: 10px;
5}
6
7.header__logo {
8 font-size: 24px;
9}
10
11.header__nav {
12 display: flex;
13 justify-content: space-around;
14}
15
16.header__menu {
17 list-style: none;
18 margin: 0;
19 padding: 0;
20 display: flex;
21}
22
23.header__menu-item {
24 margin: 0 10px;
25 padding: 5px 10px;
26}
27
28.header__menu-item--active {
29 font-weight: bold;
30 border-bottom: 2px solid #fff;
31}- Bu CSS, yeniden kullanılabilirlik ve bakım kolaylığını artırmak için BEM (Blok Eleman Değiştirici) kuralını kullanarak modüler stiller tanımlar.
Stilleri genişletme
Belirli bir menü öğesini pasif yapmak için yeni bir değiştirici nasıl eklenir bakalım.
Karşılık gelen HTML şu şekilde görünecektir.
1<li class="header__menu-item header__menu-item--disabled">Disabled</li>1.header__menu-item--disabled {
2 opacity: 0.5;
3 pointer-events: none;
4}- Bu CSS, pasif menü öğelerini görsel olarak soluklaştıran ve tıklama etkileşimini devre dışı bırakan bir değiştirici tanımlar.
Sıkça Sorulan Sorular
BEM kullanırken aşağıdaki noktalar akılda tutulabilir.
S1: BEM'in adlandırma kurallarına kesinlikle uymam gerekiyor mu?
BEM'in isimlendirme kurallarına kesin olarak uymanız gerekmez, ancak tutarlılığı sürdürmek önemlidir. Proje dâhilinde birleştirilmiş kurallar oluşturun ve tüm ekibin bunlara uymasını sağlayın.
S2: BEM'i tanıtmak CSS'i daha uzun ve karmaşık hale getirmez mi?
BEM'in uygulanması daha uzun CSS sınıf adlarına yol açabilir, ancak bu, bileşenlerin rollerini daha açık hale getirir. Sonuç olarak, sürdürülebilirlik artar ve faydaları gereksizliği aşar.
S3: BEM diğer CSS çerçeveleriyle birlikte kullanılabilir mi?
BEM, diğer CSS çerçeveleriyle birlikte kullanılabilir. Örneğin, Tailwind CSS veya Bootstrap kullanırken bile, özel bileşenlere BEM uygulayabilirsiniz.
Sonuç
BEM, CSS'i modüler hale getirmek ve yönetimini kolaylaştırmak için net bir isimlendirme standardı sağlar. Bu yöntemi kullanarak stil çakışmalarını önleyebilir ve bakım kolaylığı ile yeniden kullanılabilirliği önemli ölçüde artırabilirsiniz. Uygun isimlendirme standartları tasarlamak, proje kalitesinin ve verimliliğinin artmasına katkı sağlar.
Yukarıdaki makaleyi, YouTube kanalımızda Visual Studio Code'u kullanarak takip edebilirsiniz. Lütfen YouTube kanalını da kontrol edin.