CSS'in geldiği yer
CSS son 5 yılda devrim niteliğinde özellikler kazandı. Cascade layers (`@layer`), container queries (`@container`), `:has()` selector, scroll-driven animations, view transitions, `color-mix()`, `light-dark()`, anchor positioning — bu özelliklerin çoğu 2026'da production'da güvenle kullanılabiliyor. AIOR olarak son 18 ayda yazdığımız stil kodunun yapısı 5 yıl öncekinden tanınmaz hâlde değişti. Bu yazıda modern CSS'in pratik kullanımını ve müşteri projelerimizde uyguladığımız mimari yaklaşımı paylaşıyoruz.Cascade Layers — specificity savaşının sonu
Eski CSS kodbazlarının en büyük borçlarından biri anlaşılması güç specificity savaşlarıydı. `!important` zincirleri, gereksiz derinlikteki seçiciler, sınıf-spam — hepsi specificity'yi yenmek için. `@layer` kuralı bu probleme net çözüm getiriyor: katmanların sıralaması cascade önceliğini belirler, specificity'den bağımsız.AIOR projelerinde standart layer mimarisi:
Code:
@layer reset, base, components, utilities;
@layer reset { /* normalize, box-sizing */ }
@layer base { /* typography, body */ }
@layer components { /* card, button, form */ }
@layer utilities { /* margin, padding helpers */ }Container Queries — bileşen-tabanlı responsive
Media queries viewport'a bağlıydı; container queries ise component'in kendi kapsayıcısına. Bu fark bileşen yeniden kullanılabilirliğini önemli ölçüde artırıyor. Kart bileşeni 800px geniş bir sidebar'da farklı, 320px dar bir sütunda farklı görünebilir — JavaScript olmadan, sadece CSS ile.
Code:
.card-container { container-type: inline-size; }
@container (min-width: 400px) {
.card { display: grid; grid-template-columns: 1fr 2fr; }
}:has() — ebeveyn seçici sonunda geldi
Yıllarca CSS'in en büyük şikâyetiydi: "neden ebeveyn seçici yok?". `:has()` artık tüm modern tarayıcılarda. Form içinde hatalı bir input varsa form çerçevesini kırmızıya çevirmek, listede aktif bir öğe varsa header'a nokta eklemek — bunlar artık JavaScript gerektirmiyor.Pratik örnek: `:has
invalid) { border-color: var(--danger); }` formun durumunu dinamik ifade eder. Bu küçük gibi görünen değişiklik, eskiden state bağımlı stil için kullanılan JS class manipulation'ını ortadan kaldırıyor.Subgrid ve modern layout
CSS Grid'in `subgrid` özelliği iç içe grid'leri üst grid ile aynı sütun yapısına bağlıyor. Eskiden flexbox hack'leri ile yapılan birçok düzen artık tek satır CSS ile çözülüyor. Form layout'ları, kart-içi tablo benzeri yapılar ve hizalı kart aileleri için subgrid AIOR'ın varsayılan tercihi.`aspect-ratio` özniteliği görsel ve video bileşenlerinde CLS'i ortadan kaldırıyor. `gap` özniteliği hem grid hem flexbox'ta margin hesabını sadeleştiriyor.
Tema yönetimi — color-mix() ve light-dark()
Modern CSS'te tema bir attribute ile yönetilir: `<html data-theme="dark">`. Renkler CSS custom property olarak `:root` seviyesinde tanımlanır. `light-dark()` fonksiyonu iki değer arasında otomatik seçim yapar:
Code:
:root { color-scheme: light dark;
--fg: light-dark(#111, #eee);
}
Code:
--accent-soft: color-mix(in oklab, var(--accent) 20%, transparent);Performance odaklı CSS
- Kritik CSS inline yüklenir; geri kalan deferred.
- CSS containment (`contain: layout style paint`) büyük dashboard'larda render performansını iyileştirir.
- content-visibility: auto viewport dışı bölümleri render'dan çıkarır.
- Will-change sadece gerçekten animate edilen elementlerde — yanlış kullanım performance bozar.
- Unused CSS purge için Tailwind veya PurgeCSS — production bundle minimum.
CSS-in-JS vs utility-first vs vanilla
CSS-in-JS (styled-components, Emotion) runtime maliyeti nedeniyle gerilemekte. Aynı ergonomiyi build-time CSS ile elde etmek artık standart. AIOR'ın tercihi: Astro/statik sitelerde global stil + utility (Tailwind), React projelerinde CSS Modules veya Vanilla Extract, küçük projelerde plain CSS + tasarım token'ları.Sonuç
CSS 2026'da olduğundan daha güçlü değil ama daha tutarlı. Cascade layers, container queries, `:has()`, subgrid ve modern color fonksiyonları ile yıllarca JS ile çözülen sorunlar artık deklaratif olarak halledilebiliyor. AIOR'da bu özelliklerin günlük kullanımı kod miktarını azaltırken bakımı kolaylaştırıyor. Sizin tarafınızda Tailwind kullanmadan modern utility-first yaklaşımı uyguluyor musunuz, yoksa CSS Modules / vanilla mı tercih?Where CSS sits today
CSS has gained revolutionary features in the last five years. Cascade layers (`@layer`), container queries (`@container`), `:has()`, scroll-driven animations, view transitions, `color-mix()`, `light-dark()`, anchor positioning — most are safely usable in production in 2026. The style code AIOR has written in the last 18 months is unrecognisable compared to five years ago. This thread covers practical modern CSS use and the architecture we apply on customer projects.Cascade Layers — the end of the specificity war
One of the biggest debts in older CSS code bases was the unwinnable specificity war. `!important` chains, deep selectors, class spam — all to beat specificity. The `@layer` rule solves it cleanly: layer order determines cascade priority, independent of specificity.AIOR's standard layer architecture:
Code:
@layer reset, base, components, utilities;
@layer reset { /* normalize, box-sizing */ }
@layer base { /* typography, body */ }
@layer components { /* card, button, form */ }
@layer utilities { /* margin, padding helpers */ }Container Queries — component-level responsive
Media queries depended on the viewport; container queries depend on the component's own container. That difference substantially improves component reuse. A card can look different in an 800px-wide sidebar vs. a 320px-narrow column — without JavaScript, only CSS.
Code:
.card-container { container-type: inline-size; }
@container (min-width: 400px) {
.card { display: grid; grid-template-columns: 1fr 2fr; }
}:has() — the parent selector finally arrived
For years it was CSS's loudest complaint: "why no parent selector?". `:has()` is now in all modern browsers. Turning a form's border red when an input is invalid, adding a dot to a header when its list contains an active item — these no longer need JavaScript.Practical example: `:has
invalid) { border-color: var(--danger); }` expresses form state dynamically. This small-looking change replaces the class manipulation that used to live in JS for state-dependent styling.Subgrid and modern layout
The `subgrid` feature of CSS Grid lets nested grids inherit the column structure of the parent. Many layouts that used to require flexbox hacks now fit in a single line of CSS. For form layouts, table-like structures inside cards, and aligned card families, subgrid is AIOR's default.The `aspect-ratio` property eliminates CLS for images and video components. The `gap` property simplifies the margin math in both grid and flexbox.
Theme management — color-mix() and light-dark()
In modern CSS, theme is managed by an attribute: `<html data-theme="dark">`. Colours are defined as CSS custom properties at `:root` level. The `light-dark()` function picks between two values automatically:
Code:
:root { color-scheme: light dark;
--fg: light-dark(#111, #eee);
}
Code:
--accent-soft: color-mix(in oklab, var(--accent) 20%, transparent);Performance-oriented CSS
- Critical CSS inlined; the rest deferred.
- CSS containment (`contain: layout style paint`) improves render performance on large dashboards.
- content-visibility: auto takes off-viewport sections out of the render path.
- Will-change only on truly animated elements — wrong use harms performance.
- Unused CSS purge via Tailwind or PurgeCSS — production bundle minimal.
