Frontend / CSS Mimarisi
CSS Metodolojileri: Daha Temiz ve Daha Sürdürülebilir
BEM, OOCSS, SMACSS ve Atomic CSS yaklaşımlarını; büyük projelerde stil kodunu daha düzenli, tutarlı ve sürdürülebilir kılma açısından inceliyorum.
Yaklaşım
CSS metodolojileri neden önemli?
Cascading Style Sheets (CSS), web sayfalarına stil ve düzen vermek için kullanılan güçlü bir araçtır. Ancak büyük ve karmaşık web projelerinde CSS kodunun yönetimi zorlaşabilir.
Bu zorlukların üstesinden gelmek için çeşitli CSS metodolojileri geliştirilmiştir. Bu metodolojiler, CSS kodunun daha modüler, sürdürülebilir ve yeniden kullanılabilir olmasını sağlayarak geliştirme sürecini iyileştirir.
Öne çıkanlar
Öne çıkan avantajlar
- 01
Modülerlik ve yeniden kullanım
Stilleri daha küçük ve yönetilebilir parçalara ayırarak aynı çözümleri farklı yerlerde güvenle kullanmayı sağlar.
- 02
Tutarlılık ve standartlar
Projeler ve ekip üyeleri arasında ortak bir adlandırma ve geliştirme dili oluşturur.
- 03
Kolay bakım
Kuralın hangi bileşene ait olduğunu açık hale getirerek değişikliklerin etkisini daha rahat takip etmeyi sağlar.
- 04
Daha iyi performans zemini
Tekrarlayan ve gereksiz kuralları azaltan temiz bir yapı, daha verimli bir stil katmanı kurmaya yardımcı olur.
BEM: Block, Element, Modifier
BEM, CSS sınıflarını adlandırmak için kullanılan bir yöntemdir. Block, Element ve Modifier olmak üzere üç ana parçadan oluşur. Bu metodoloji, stil dosyalarının daha anlaşılır ve modüler hale gelmesine yardımcı olur.
Block bağımsız bir bileşeni veya bölümü temsil eder. Element, bir bloğun parçası olan ancak kendi başına anlam ifade etmeyen bileşenleri temsil eder. Modifier ise bir block veya elementin stilini ya da davranışını değiştiren özellikleri ifade eder. Özetle yapı .block__element--modifier şeklindedir.
Öne çıkan avantajı, stil çakışmalarını azaltması ve kodun yeniden kullanılabilirliğini artırmasıdır.
HTML
<button class="button button--large button--success">
<span class="button__text">Kaydet</span>
</button>CSS
.button {
padding: 0.75rem 1rem;
border: 0;
}
.button--large {
font-size: 1.125rem;
}
.button--success {
background: seagreen;
}
.button__text {
font-weight: 700;
}OOCSS: Yapıyı temadan ayırmak
OOCSS, Nicole Sullivan tarafından 2008 yılında geliştirilmiştir. CSS’i nesne yönelimli programlama prensiplerine dayanarak iki ana kısma ayırır: yapı (structure) ve tema (skin).
Yapı bir elementin düzenini; örneğin boyutlarını ve konumlandırmasını belirler. Tema ise renkler ve fontlar gibi görsel stilini belirler. Bu yaklaşım, CSS’i daha modüler ve yeniden kullanılabilir hale getirir.
Öne çıkan avantajı, stil ve yapıyı ayırarak yeniden kullanılabilirlik ile bakım kolaylığı sağlamasıdır. Sık kullanılan stil kurallarını yeniden kullanılabilir objelerde toplamak, CSS kodunu daha verimli hale getirir.
HTML
<button class="button primary-button">Devam et</button>
<button class="button secondary-button">Vazgeç</button>CSS
.button {
padding: 0.75rem 1rem;
border: 1px solid currentColor;
border-radius: 0.5rem;
}
.primary-button {
background: #2563eb;
color: white;
}
.secondary-button {
background: transparent;
color: #2563eb;
}SMACSS: Ölçeklenebilir bir düzen
SMACSS, CSS kodunu kategorilere ayırarak büyük ölçekli projelerde yönetimi kolaylaştırır. CSS kodunu daha ölçeklenebilir ve modüler bir yapıya kavuşturmayı amaçlayan bu metodoloji beş temel kategoriye ayrılır.
Base, HTML elementlerine uygulanan global stilleri kapsar. Layout, sayfa düzenini oluşturan büyük bölümleri tanımlar. Module yeniden kullanılabilir bileşenleri; State bileşenlerin aktif veya pasif gibi durumlarını; Theme ise sitenin renkleri, fontları ve diğer görsel tercihlerini kapsar.
Öne çıkan avantajı, proje boyutu arttıkça CSS kodunun sürdürülebilirliğini korumasıdır.
Örnek katmanlar
/* Base */
a { color: inherit; }
/* Layout */
.l-sidebar { width: 18rem; }
/* Module */
.card { border-radius: 1rem; }
/* State */
.is-active { display: block; }
/* Theme */
.theme-dark { background: #101820; }Atomic CSS: Küçük kurallarla hızlı kompozisyon
Atomic CSS, her bir stil kuralını mümkün olan en küçük birimlere ayırarak yeniden kullanılabilir ve sıkı tanımlı sınıflar oluşturmayı amaçlar. Bu metodoloji, fonksiyonel CSS veya utility-first CSS olarak da bilinir.
Temel prensibi; sayfa düzenini ve bileşenlerin görsel tasarımını çok sayıda küçük, amaç odaklı sınıfla hızlı biçimde oluşturmaktır. Geleneksel CSS yazımından farklı olarak stil tanımlarının HTML içinde doğrudan kullanılmasını teşvik eder.
Yeniden kullanılabilirlik, tutarlılık, hızlı geliştirme ve daha az tekrar eden CSS bu yaklaşımın öne çıkan avantajlarıdır.
En çok kullanılan CSS metodolojilerine bu yazıda değinmiş oldum. Her yaklaşım, stil kodlarının yönetimini kolaylaştırma ve geliştirme sürecini daha düzenli hale getirme konusunda farklı avantajlar sunar. Projenin ihtiyacına göre size en uygun olanını seçebilirsiniz.
HTML
<button class="p-2 bg-blue-500 text-white font-bold rounded">
Gönder
</button>Sınıfların karşılığı
.p-2 { padding: 0.5rem; }
.bg-blue-500 { background: #3b82f6; }
.text-white { color: white; }
.font-bold { font-weight: 700; }
.rounded { border-radius: 0.25rem; }