SASS ve BEM

Bu makale SASS ve BEM'i açıklar.

CSS büyük ölçekli hale geldiğinde ortaya çıkan karmaşa ve kırılganlığı önlemek için SASS ve BEM kullanılarak kavramları ve uygulama yöntemlerini somut örneklerle açıklayacağız.

YouTube Video

SASS ve BEM

Dosya ve ekran sayısı arttıkça, CSS genellikle 'Bu stilin nerede tanımlandığını bilmiyorum' ve 'Küçük bir değişiklik başka bir ekranın görünümünü bozdu' gibi sorunlarla karşılaşır.

Bunun nedeni, CSS'in aslında tasarım kurallarını zorunlu kılmayan bir dil olmasıdır. Olduğu gibi yazmaya devam ederseniz, istemeden bağımlılıklar artacaktır.

SASS ve BEM, CSS'i rastgele yazılan bir şeyden tasarlanan ve yönetilen bir yapıya dönüştüren, böylece bu tür sorunları önleyen pratik tekniklerdir. İkisini birleştirerek, stillerin anlamını netleştirebilir ve aynı anda okunabilirliği, tekrar kullanılabilirliği ve sürdürülebilirliği artırabilirsiniz.

CSS'in kolayca yönetilemez hale gelmesinin nedenleri

Aşağıdaki gibi bir CSS, daha sonra koda baktığınızda nasıl davrandığını anlamak zorlaşabilir.

 1.title {
 2  font-size: 16px;
 3  color: #333;
 4}
 5
 6.container .title {
 7  font-size: 18px;
 8}
 9
10.sidebar .container .title {
11  color: red;
12}

• Bu örnekte, aynı .title sınıfı yerleştirildiği yere göre farklı görünüyor, bu yüzden bu .title'a hangi stilin uygulanacağını hemen anlayamazsınız.
• Bu şekilde, seçiciler derinleşip üst öğelere daha bağımlı hale geldikçe, CSS'in etki alanını tahmin etmek zorlaşır ve değiştirildiğinde bozulma eğiliminde olur.

BEM, 'rolleri isimler üzerinden ifade eden' bir adlandırma kuralıdır

BEM, Blok / Eleman / Değiştirici'nin kısaltmasıdır ve sınıfın hangi bileşeni ve hangi durumu temsil ettiğini adıyla belirtir.

• Blok, bağımsız bir bileşendir.
• Eleman, bloğun içindeki bir ögedir.
• Değiştirici, bir durumu veya varyasyonu temsil eder.

1.card {}
2.card__title {}
3.card--highlighted {}

Bu adlandırma kuralıyla, yalnızca HTML'e bakarak yapıyı ve rolü çıkarabilirsiniz.

BEM kullanan HTML'nin temel biçimi

İşte BEM kullanarak HTML'de ifade edilmiş bir kart arayüzü örneği.

1<div class="card card--highlighted">
2  <h2 class="card__title">Title</h2>
3  <p class="card__text">Description</p>
4</div>

Sadece sınıf adlarından bunun bir 'kart bileşeni', onun içindeki 'başlık' ve 'vurgulanmış durum' olduğunu anlayabilirsiniz. BEM'in en büyük avantajı budur.

Ancak, BEM tek başına ayrıntılı ve uzun CSS'e yol açabilir.

BEM'i doğrudan CSS'te yazarsanız, kod miktarı artma eğilimindedir.

 1.card {
 2  padding: 16px;
 3}
 4
 5.card__title {
 6  font-size: 18px;
 7}
 8
 9.card__text {
10  font-size: 14px;
11}
12
13.card--highlighted {
14  border: 2px solid orange;
15}

Burada SASS kullanarak yapıyı koruyan düzenli bir koda sahip olabilirsiniz.

BEM'i SASS iç içe yapısıyla doğal bir şekilde ifade edin

SASS iç içe yapısını kullanarak, BEM'in yapısını doğrudan kodunuza yansıtabilirsiniz.

 1.card {
 2  padding: 16px;
 3
 4  &__title {
 5    font-size: 18px;
 6  }
 7
 8  &__text {
 9    font-size: 14px;
10  }
11
12  &--highlighted {
13    border: 2px solid orange;
14  }
15}

& ana seçiciye atıfta bulunur ve BEM adlandırmasıyla çok iyi çalışır.

Bu SASS'tan oluşturulan CSS

Yukarıdaki SASS aşağıdaki gibi CSS'ye derlenir.

 1.card {
 2  padding: 16px;
 3}
 4
 5.card__title {
 6  font-size: 18px;
 7}
 8
 9.card__text {
10  font-size: 14px;
11}
12
13.card--highlighted {
14  border: 2px solid orange;
15}

Görünüm aynı olsa da, geliştirici için bilişsel yük önemli ölçüde azalır.

Değiştiricilerin güvenli kullanımı için tasarım

BEM'deki Değiştiriciler 'durumları' temsil ettiğinden, onları yalnızca geçersiz kılma için sınırlandırmak temel kuraldır.

 1.button {
 2  padding: 8px 12px;
 3  background: #eee;
 4
 5  &--primary {
 6    background: blue;
 7    color: white;
 8  }
 9
10  &--disabled {
11    opacity: 0.5;
12    pointer-events: none;
13  }
14}

Değiştiriciler 'ekleme' olarak değil de 'değişiklik' olarak ele alınırsa, tasarım daha kararlı olur.

Eleman iç içe geçişini bir seviyeyle sınırlandırın

BEM'de, elemanları çok derin iç içe yerleştirmemek önemlidir.

1.card {
2  &__header {
3    font-weight: bold;
4  }
5
6  &__body {
7    margin-top: 8px;
8  }
9}

.card__header__title gibi çok seviyeli elemanlar, bloğu bölmeyi düşünmeniz gerektiğinin bir işaretidir.

SASS dosya yapısına bir örnek

Son olarak, gerçek projeler için pratik olan bir SASS yapısına örnek.

1styles/
2├── base/
3│   └── reset.scss
4├── components/
5│   ├── card.scss
6│   └── button.scss
7├── layout/
8│   └── header.scss
9└── main.scss

Her bileşeni 1 blok = 1 dosya olarak yönetirseniz, bozulma olasılığı azalır.

card.scss örneği

 1.card {
 2  padding: 16px;
 3  border: 1px solid #ccc;
 4
 5  &__title {
 6    font-size: 18px;
 7  }
 8
 9  &__text {
10    color: #666;
11  }
12}

Her şey bu birimde kendi içinde olduğundan, silme, taşıma ve yeniden kullanma kolaylaşır.

Özet

SASS ve BEM yalnızca popüler teknikler değil, aynı zamanda CSS'i tasarlanabilir koda dönüştüren pratik yaklaşımlardır.

• BEM, anlamı ve rolü adlandırır.
• SASS, yapıyı koruyarak kolay yazım sağlar.
• İkisini birleştirmek CSS'in bozulmaya daha az yatkın olmasını sağlar.

Bugün CSS'i gelecekteki kendinizin anlayabileceği şekilde yazalım.

Yukarıdaki makaleyi, YouTube kanalımızda Visual Studio Code'u kullanarak takip edebilirsiniz. Lütfen YouTube kanalını da kontrol edin.

YouTube Video