Web Geliştirmede Temiz ve Bakımı Kolay CSS Yazmanın 5 Altın Kuralı 
Selam dostlar! Uzun yıllardır frontend tarafında kod yazan biri olarak, projeler büyüdükçe CSS dosyalarının nasıl içinden çıkılmaz bir hale gelebildiğini hepimiz biliyoruz.
Bir süre sonra `!important` savaşları başlıyor, bir butonu değiştirmek için onlarca satır kodun arasında kayboluyoruz. İşte bu yüzden, bugün sizlerle benim de projelerimde asla taviz vermediğim, işleri kökünden kolaylaştıran 5 temel kuralı paylaşmak istiyorum.
1. BEM (Block, Element, Modifier) Metodolojisini Benimseyin
İsimlendirme, temiz CSS'in temel taşıdır. BEM, sınıf isimlerinizi mantıklı ve tutarlı bir yapıya oturtmanızı sağlar. Kısaca:
Bu sayede, HTML'de hangi CSS sınıfının ne işe yaradığını anlamak saniyeler sürer ve spesifiklik (specificity) savaşlarından kurtulursunuz.
2. Global Stilleri ve Değişkenleri Kontrol Altına Alın
Her projeye başlarken, tüm sayfayı etkileyecek temel stilleri (`<body>`, `<h1>-<h6>`, `<a>`, vb.) sıfırlayın ve tanımlayın. Ancak asıl sihir, CSS Özel Özellikleri (Custom Properties) yani CSS Değişkenlerini kullanmaktadır.
Renk paletinizi, yazı boyutlarınızı, boşluk (spacing) değerlerinizi `:root` seviyesinde değişken olarak tanımlayın.
Tema değişikliği veya küçük bir renk ayarı artık tek satırda mümkün! 
3. Utility (Yardımcı) Sınıflar ile Hız Kazanın
Sürekli tekrar eden, küçük ve tek amaçlı stiller için utility sınıfları oluşturun. Bu, Tailwind CSS gibi framework'lerin de temel mantığıdır.
4. CSS'in Cascade (Basamak) ve Specificity (Özgüllük) Mantığını Anlayın
!important bombasını patlatmak yerine, CSS'in nasıl çalıştığını anlayın. Seçicilerin özgüllük (specificity) puanı vardır: `#id` > `.class` > `element`. Stilinizin neden uygulanmadığını anlamak için tarayıcı geliştirici araçlarını (DevTools) kullanın. Mümkün olduğunca düşük özgüllüklü seçiciler (class'lar) kullanarak yazın. Bu, stil geçersiz kılmaları (override) inanılmaz kolaylaştırır.
5. Kodunuzu Yapılandırın ve Yorumlayın
Tek bir 5000 satırlık `style.css` dosyası yerine, mantıklı parçalara bölün.
**Son Söz**
Bu kurallar ilk başta biraz disiplin gerektiriyor gibi görünebilir, ancak bir kez alışkanlık haline geldiğinde, CSS yazmak ve bakım yapmak bir eziyet olmaktan çıkıp keyifli bir sürece dönüşecek. Daha az hata, daha hızlı geliştirme ve takım arkadaşlarınızın size duyacağı minnettarlık paha biçilemez.
Hangisi sizin için en zorlayıcı? Ya da sizin başka altın kurallarınız var mı? Yorumlarda tartışalım!
Kolay gelsin!
Selam dostlar! Uzun yıllardır frontend tarafında kod yazan biri olarak, projeler büyüdükçe CSS dosyalarının nasıl içinden çıkılmaz bir hale gelebildiğini hepimiz biliyoruz.
Bir süre sonra `!important` savaşları başlıyor, bir butonu değiştirmek için onlarca satır kodun arasında kayboluyoruz. İşte bu yüzden, bugün sizlerle benim de projelerimde asla taviz vermediğim, işleri kökünden kolaylaştıran 5 temel kuralı paylaşmak istiyorum.1. BEM (Block, Element, Modifier) Metodolojisini Benimseyin
İsimlendirme, temiz CSS'in temel taşıdır. BEM, sınıf isimlerinizi mantıklı ve tutarlı bir yapıya oturtmanızı sağlar. Kısaca:
- Block: Bağımsız, anlamlı bir bileşen (ör: `.card`).
- Element: Block'un bir parçası ve onsuz anlam ifade etmeyen öğe (ör: `.card__title`, `.card__button`).
- Modifier: Bir block veya element'in görünümünü/de durumunu değiştiren flag (ör: `.card--featured`, `.button--disabled`).
Bu sayede, HTML'de hangi CSS sınıfının ne işe yaradığını anlamak saniyeler sürer ve spesifiklik (specificity) savaşlarından kurtulursunuz.
2. Global Stilleri ve Değişkenleri Kontrol Altına Alın
Her projeye başlarken, tüm sayfayı etkileyecek temel stilleri (`<body>`, `<h1>-<h6>`, `<a>`, vb.) sıfırlayın ve tanımlayın. Ancak asıl sihir, CSS Özel Özellikleri (Custom Properties) yani CSS Değişkenlerini kullanmaktadır.
Renk paletinizi, yazı boyutlarınızı, boşluk (spacing) değerlerinizi `:root` seviyesinde değişken olarak tanımlayın.
Kod:
:root {
--primary-color: #4361ee;
--secondary-color: #3a0ca3;
--spacing-unit: 1rem;
--border-radius: 8px;
}
.button {
background-color: var(--primary-color);
padding: calc(var(--spacing-unit) * 1.5);
border-radius: var(--border-radius);
}3. Utility (Yardımcı) Sınıflar ile Hız Kazanın
Sürekli tekrar eden, küçük ve tek amaçlı stiller için utility sınıfları oluşturun. Bu, Tailwind CSS gibi framework'lerin de temel mantığıdır.
- `.text-center { text-align: center; }`
- `.mt-2 { margin-top: 1rem; }`
- `.d-flex { display: flex; }`
4. CSS'in Cascade (Basamak) ve Specificity (Özgüllük) Mantığını Anlayın
!important bombasını patlatmak yerine, CSS'in nasıl çalıştığını anlayın. Seçicilerin özgüllük (specificity) puanı vardır: `#id` > `.class` > `element`. Stilinizin neden uygulanmadığını anlamak için tarayıcı geliştirici araçlarını (DevTools) kullanın. Mümkün olduğunca düşük özgüllüklü seçiciler (class'lar) kullanarak yazın. Bu, stil geçersiz kılmaları (override) inanılmaz kolaylaştırır.
5. Kodunuzu Yapılandırın ve Yorumlayın
Tek bir 5000 satırlık `style.css` dosyası yerine, mantıklı parçalara bölün.
- `_reset.css` veya `_base.css`
- `_variables.css`
- `_components/` (butonlar, kartlar, navbar için ayrı dosyalar)
- `_layouts/` (grid sistem, header/footer düzeni)
- `_utilities.css`
**Son Söz**
Bu kurallar ilk başta biraz disiplin gerektiriyor gibi görünebilir, ancak bir kez alışkanlık haline geldiğinde, CSS yazmak ve bakım yapmak bir eziyet olmaktan çıkıp keyifli bir sürece dönüşecek. Daha az hata, daha hızlı geliştirme ve takım arkadaşlarınızın size duyacağı minnettarlık paha biçilemez.
Hangisi sizin için en zorlayıcı? Ya da sizin başka altın kurallarınız var mı? Yorumlarda tartışalım!
Kolay gelsin!