Projeler büyüdükçe, düz CSS global kapsamtan zarar görür — her seçici küresel olarak rekabet eder, özgüllük savaşları patlak verir ve kimse bir kuralı silmeye cesaret etmez. Metodolojiler CSS'i sürdürülebilir tutmak için yapı ve adlandırma kuralları uygular.
İlişkileri açık yapan ve özgüllüğü düz tutan bir adlandırma kuralı (yalnızca tek sınıflar):
{ }
{ }
{ }
{ }
<div class="card card--featured">
<h2 class="card__title">...</h2>
</div>
BEM'in değeri: sınıf adları kendini belgeleyici, kural tarafından kapsam belirlenir ve düzgün düşük özgüllük (iç içe geçme/id savaşları yok).
Marketin içinde doğrudan küçük, tek amaçlı sınıflardan stilleri oluşturun:
<div class="flex items-center gap-4 p-6 rounded-lg shadow">...</div>
Pros: adlandırma yok, kullanılmayan CSS yok (temizlenir), tutarlı tasarım tokenları. Cons: ayrıntılı HTML. Hızı ve tutarlılığından dolayı muazzam popüler.
Bileşen çerçevelerinde modern yaklaşım — stilleri bir bileşene kapsam belirleyin, böylece sızamaz:
import styles from "./Card.module.css"; // class names are hashed/localized
<div className={styles.card}>...</div> // → .Card_card__a1b2 (unique)
Bu, global kapsam sorununu kural yerine mekanik olarak çözer.
OOCSS — separate structure from skin, reuse objects
SMACSS — categorize rules (base, layout, module, state, theme)
ITCSS — layer CSS by specificity (generic → explicit), low to high
Hepsi aynı düşmanlara karşı savaşır: özgüllük kayması, adlandırma çakışmaları, ölü kod ve tahmin edilemeyen basamaklar. Adlandırma (BEM), yardımcı programlar (Tailwind) veya kapsam (Modules) aracılığıyla, CSS'i tahmin edilebilir ve ölçekte değiştirmek için güvenli tutar.
Büyük CSS kod tabanları, disiplin olmadan global kapsam ve özgüllük savaşlarının altında çökert.
Bir metodoloji seçmek ve tutarlı bir şekilde uygulamak (bugün genellikle BEM, Tailwind veya kapsamlı CSS Modules), bir takım ve kod tabanı büyüdükçe stilleri modüler, silinebilir ve çatışmasız tutmak için gereklidir.