CSS Önişlemci Nedir?

Büşra Uz
Sep 16, 2018 · 2 min read

Tarayıcılar her geçen gün daha hızlı gelişiyor, web teknolojilerine daha hızlı adapte oluyorlar ve web projeleri gün geçtikçe daha kapsamlı olmaya başlıyor. Bu durum ise haliyle CSS’ in bu gelişmelerde yavaş yavaş baş ağrıtan bir konu haline gelmesine neden oluyor.

İçinizden “Peki neden?” diye sorduğunuzu duyar gibiyim. Büyük çaplı projelerde CSS kullanımının büyük dezavantajları vardır. Bunlardan bahsederek hemen bu sorunuza açıklık getirmek istiyorum;

  • Küçük bir değişiklik için tüm kodu taramanız gerekebilir. Bu durum zaman kaybına yol açar.
  • Aynı kodu tekrar tekrar yazmanız gerekebilir. Bu durum kod boyutunu arttırmış olur ve kodun hantallaşmasına neden olur.

İşte tüm bu zaman kaybı ve kod hantallığı gibi dezavantajlarından dolayı CSS kullanımındaki artış daha kolay yönetilebilir bir yapı ihtiyacını doğurdu. Bu ihtiyaca cevap olarak da “CSS Önişlemci” gibi bir çözüm ortaya çıktı ve kullanımı da oldukça yaygınlaştı.

CSS Önişlemciler Tam Olarak Nasıl Çalışıyor?

CSS Önişlemcilerin temel olarak yaptığı şey yazılım dillerinde kullanabildiğimiz değişken, operatör ve fonksiyon gibi CSS içerisinde bulunmayan yapıları bir CSS Önişlemci ile kullanıp girdi olarak CSS dosyasına benzer bir dosya oluşturmak ve çıktı olarak da bir CSS dosyası almamızı sağlamasıdır.

Aslında CSS, arayüz hazırlama işlemlerinin en önemli kısmı diyebiliriz. Ancak yukarıda bahsettiğim gibi dezavantajlarının olmasından dolayı iş akışını oldukça olumsuz etkilediği durumlarda olmuyor değil. İşte tam bu noktada bu olumsuzlukların CSS Önişlemcilerin önemini daha da arttırdığını söyleyebiliriz.

CSS Önişlemciler Ne Gibi Avantajlar Sağlar?

  • Doğru bir hiyerarşi sağlamayı kolaylaştırır. CSS’ de hiyerarşi olarak bahsettiğimiz durum aslında hangi kod parçacığın neyi etkilediğini gösteren bir yapıdır.
  • Değişken ve sabit tanımlayabilmeyi kolaylaştırır. Peki bu ne işe yarar?
  • color-red:#f00;
    h1{color:color-red;}
    h2{color:color-red;}
  • Yukarıda gördüğünüz kod parçacığında “color-red” diye bir değişken tanımladığımızda istediğimiz CSS elementine veya elementlerine entegre edebiliriz. Geriye dönüp bakmamış oluruz.
  • Kod tekrarını önler. Kod tekrarı demek daha fazla boyutlu bir kod sayfası demektir. Bu kodları minimize etmeye yardımcı olur. Böylece kod hantallığının önüne geçilmiş olur.
  • Kodlara tekrar tekrar geri bakmanın önüne geçer. Yani zaman kaybını ortadan kaldırmış olur.

CSS Önişlemcilerin En Bilinenleri Hangileridir?

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade