CSS Custom Utility Class ve SEO Uyumluluğu

Eminim benim gibi CSS yazan birçok kişi, utility class kullanımıyla ilk olarak framework’ler sayesinde tanışmıştır. Bu sayede hem sayfa tasarımını sürekli CSS dökümanına dönmek zorunda kalmadan oluşturmak, hem de artan sayfa sayılarında padding, margin, color gibi değerleri korumak kolaylaşıyor. Sayfanızdaki SEO uyumluluğunu arttırmanın bir yolu da CSS’i verimli şekilde kullanmaktan geçiyor. Burada da utility class devreye giriyor.

Utility class kullanımının inline style’a göre en önemli avantajı, sayfa yüklemesini daha çok HTML odaklı hale getirerek browser’ın üzerindeki yükü azaltması.

Kendi oluşturacağımız utility class’lar sayesinde CSS’de herhangi bir framework kullanmadan sayfa yapısını ve tasarımını hazırlamak mümkün. Bu şekilde herhangi bir CDN’den data çekmek zorunda kalmadığımız için, sayfa daha çok local üzerinden çalışıyor. Bu da arama motorlarında sayfanın SEO uyumluluğunu arttırıyor. Eğer sayfa yüklenirken, her bir dosyayı ve özelliği web üzerindeki kaynaklardan veya CDN’lerden çekmekle uğraşsaydı, arama motorları bunu eksi bir unsur olarak değerlendirecekti. Bundan ötürü sayfamız aramalarda yukarı çıkamayacaktı.

Kendi Utility Class’larımızı Oluşturmak

Uzun yıllardır CSS’de bulunan var özelliği ile body’ye atayacağımız root özellikleri sayfanın her yerinde kullanabiliyoruz. Aynı şekilde root özelliklerden, kendi utility class’larımızı oluştururken de faydalanabiliriz.

Aşağıda benim yaptığım örnekteki gibi, bunun için ilk adım olarak kendi root’u kullanarak özelliklerimizi ve var’larımızı oluşturuyoruz.

:root {
--green: #61BE6B;
--text-main: #456278;
--bg-grey: #abbdd9;
--bg-orange: #f0c22b;
--color-main: #6b0e22;
--color-secondary: #693a04;
--div-height: 400px;
--inner-height: 200px;
}

.green-bg {
background-color: var(--green);
}
.grey-bg {
background-color: var(--bg-grey);
}
.color-main {
color: var(--color-main);
}
.color-secondary {
color: var(--color-secondary);
}

Daha sonra HTML’de layout’u oluşturuyoruz:

<div>
  <div>
    <p>
      Lorem ipsum dolor sit amet.
    </p>
    <p>
      Sed ut perspiciatis unde omnis iste.
    </p>
  </div>
</div>

Layout’a hazırladığımız utility class’ları ekliyoruz ve böylece div’lere şekil veriyoruz.

<div class="green-bg div-height">
  <div class="grey-bg inner-height">
    <p>
      Lorem ipsum dolor sit amet.
    </p>
    <p>
      Sed ut perspiciatis unde omnis iste.
    </p>
  </div>
</div>

Her iki div’e kendi genişliklerini vererek flex özelliği ile hizalamasını yapıyoruz. Bunun için CSS’e aşağıdaki eklemeleri yapıyoruz.

.w-100 {
width: 100%;
}
.w-50 {
width: 50%;
}
.d-flex {
display: flex;
}
.align-center {
align-items: center;
}
.justify-center {
justify-content: center;
}

Layout’un yeni hali:

<div class="w-100 green-bg div-height d-flex align-center justify-center">
  <div class="w-50 grey-bg inner-height">
    <p>
      Lorem ipsum dolor sit amet.
    </p>
    <p>
      Sed ut perspiciatis unde omnis iste.
    </p>
  </div>
</div>

Div’in içindeki her bir p’ye, ayrı utility class’lar atayarak farklı özellikler verebiliriz.


.text-center {
text-align: center;
}
.fontsize-1 {
font-size: 36px;
}
.fontsize-2 {
font-size: 18px;
}

Layout’un yeni hali:

<div class="w-100 green-bg div-height d-flex align-center justify-center bg-color-mobile">
  <div class="w-50 grey-bg inner-height">
    <p class="text-center fontsize-1">
      Lorem ipsum dolor sit amet.
    </p>
    <p class="fontsize-2">
      Sed ut perspiciatis unde omnis iste.
    </p>
  </div>
</div>

Bu basit örnekte de görüldüğü gibi, CSS’de hazırladığımız utility class’ları sayfanın birden fazla yerinde rahatlıkla kullanabiliriz.

Utility Class İle Responsive Tasarım Oluşturma

Utility class’ları hazırlarken media query’ye ayrı tanımlamalar yaparsak, layout’u responsive’e uygun şekle getirmek mümkün. Bu şekilde her seferinde CSS’e başvurmak zorunda kalmadan sayfaya mobilde ve desktopta kendi özelliklerini verebiliriz. Ufak bir sayfa için çok önemli görünmeyen bu detay ile aslında çok sayıda sayfa barındıran projeleri pratik bir şekilde hazırlayabiliriz.

Örneğin, 768px altında değişecek bg rengi oluşturmak için önce media’da tanımlamayı yapıyoruz:

@media (max-width: 768px) {
.bg-color-mobile {
background-color: var(--bg-orange);
}
}

Bunun için ilk olarak root’da media query’ye değişecek özellikleri tanımlıyoruz:

--bg-orange: #f0c22b;

@media (max-width: 768px) {
.bg-color-mobile {
background-color: var(--bg-orange);
}
}

Bu şekilde sayfanın değişen genişliğine göre değişen bir bg oluşturduk.

Son örnek olarak da, yan yana iki div oluşturalım ve bunun responsive görünümde alt alta gelmesini sağlayalım. Bunun için ilk önce iki div oluşturup flex olarak row özelliği vereceğiz.

İlk önce CSS’de ve HTML üzerinde layout’u oluştururken yaptığımız eklemeler şöyle:

--bg-blue: #144973;
--bg-yellow: #f0c22b;

.blue-bg {
background-color: var(--bg-blue);
}
.yellow-bg {
background-color: var(--bg-yellow);
}
.d-flex {
display: flex;
}
.flex-row {
flex-direction: row;
}

<div class="w-100 div-height d-flex flex-row flex-column">


  <div class="w-50 div-height blue-bg">
  </div>
  <div class="w-50 div-height yellow-bg">
  </div>


</div>

Mobil görünüm için eklediğimiz özellik:

@media (max-width: 768px) {
.flex-column {
flex-direction: column;
}
}

Hatta daha da anlaşılabilir olması için, Bootstrap’de olduğu gibi breakpoint’lere göre utility class’lara isimlendirmeler yaparak kodun anlaşılabilir olmasını sağlayabiliriz. Bu şekilde w-lg-50 w-100 gibi tanımlamalar yaparak sayfanın hangi boyutta ne özellik alacağını belirleyebiliriz.

@media (min-width: 992px) {
.w-lg-50 {
width: 50%;
}
}

<div class="w-100 div-height d-flex flex-row flex-column">


  <div class="w-lg-50 w-100 div-height blue-bg">
  </div>
  <div class="w-lg-50 w-100 div-height yellow-bg">
  </div>


</div>

Bu şekilde bir framework kullanır gibi sayfayı oluşturduk. Tasarımda birçok yerde kullanılacak şeyi tek bir class olarak hazırlamak yetiyor. Dolayısıyla tasarıma başlamadan evvel root ve variable özelliklerini özenerek ve sayfanın tüm detaylarını akılda tutarak hazırlamakta fayda var.

Tabii, DOM’da gözükmeyen hover, after gibi pseudo class’ları oluşturmak için yine CSS kullanmamız gerekecek. Ama en azından yukarıda yazdığımız kodlar sayesinde döküman daha sade gözükecek ve pseudo class gibi şeyleri kullanmaya başlayana kadar her şeyi CSS kullanmadan halletmiş olacağız.

Avantajlar:

• Sayfayı nasıl oluşturacağımıza bir kere karar verdikten sonra bunları variable ve utility class olarak CSS’de tanımlamamız yetti. Daha sonra HTML üzerinde çalışırken sürekli olarak CSS dökümanına geçmemize gerek kalmadı. Bu özellikler kısa sayfalarda çok önemliymiş gibi görünmese de, sayfa sayısının ve içerik çeşitliliğinin fazla olduğu sayfalarda handikaba dönüşebilir, hata oranını artırabilir.
• Inline style vermek yerine custom utility class şeklinde hazırladığımız için, dökümantasyon arama motorunda SEO’ya uygun oldu.
• Herhangi bir framework kullanmadığımız için bir CDN’den veri çekmedik. Bu şekilde hem SEO olarak uygun oldu hem de sayfanın performans kaybı yaşamamasını sağladık.
• Sayfa render’lanırken, CSS dökümanına geçene kadar halihazırda çoğu alanın tasarımı tamamlandı. Bu şekilde de sayfa performansı daha hızlı oldu.

Dezavantajlar:

• Özellikle responsive’de birçok değişikliğin birden yapılmasının gerektiği zamanlarda sayfada çok sayıda utility class kullanmak zorunda kalınabiliyor. Bu gibi durumlarda HTML dokumanının okunabilirliği düşebiliyor.

Codepen linki için tıklayın.