01
// TEMEL — FOUNDATION
CSS Nedir? Nasıl Çalışır?
Cascade · Selector · Box Model · Position · Units
▶
CascadeInheritance
SpecificityBox Model
SelectorUnits
/* 3 CSS Bağlama Yöntemi */
/* 1 — Inline (en yüksek specificity, kullanma) */
<p style="color: red">
/* 2 — Internal */
<style>
p { color: red; }
</style>
/* 3 — External (EN İYİ YÖNTEM) */
<link rel="stylesheet" href="style.css">
| SELECTOR | AÇIKLAMA | SPESIFICITY |
|---|---|---|
| * | Tüm elementler | 0,0,0 |
| div, p | Tag selector | 0,0,1 |
| .class | Class selector | 0,1,0 |
| #id | ID selector | 1,0,0 |
| div > p | Direkt child | 0,0,2 |
| div + p | Adjacent sibling | 0,0,2 |
| style="" | Inline style | 1,0,0,0 |
// CANLI DEMO — CSS BOX MODEL
MARGIN (dış boşluk)
BORDER (kenarlık)
PADDING (iç boşluk)
CONTENT · width × height
/* box-sizing: border-box — KULLAN, HAYATİ! */
*, *::before, *::after {
box-sizing: border-box;
/* padding/border, width dışına taşmaz */
}
.kart {
width: 320px;
padding: 20px;
border: 2px solid #333;
margin: 16px auto;
/* content-box'ta toplam: 320+40+4 = 364px */
/* border-box'ta toplam: 320px (sabit!) */
}
/* Position değerleri */
position: static; /* default — akış içinde */
position: relative; /* kendi yerine göre ofset */
position: absolute; /* en yakın relative parent'a göre */
position: fixed; /* viewport'a sabit */
position: sticky; /* scroll'da sabit kalır — navbar! */
/* Birimler */
16px /* mutlak piksel */
1rem /* root font-size (genelde 16px) */
1em /* ebeveyn font-size — dikkat! */
50% /* ebeveyn boyutuna göre */
100vw /* viewport genişliği */
clamp(1rem, 2vw, 2rem) /* fluid — min/ideal/max */
Hedef: Box model'i gözlerin kapalı çiz. Position farkını somut örneklerle test et.
02
// ORTA — LAYOUT USTASI
Flexbox · Grid · Responsive
justify-content · grid-template · media queries · mobile-first
▶
// İNTERAKTİF DEMO — FLEXBOX
.konteyner {
display: flex;
justify-content: space-between; /* x ekseni */
align-items: center; /* y ekseni */
flex-direction: row; /* row | column */
flex-wrap: wrap; /* alt satıra geç */
gap: 16px;
}
.eleman {
flex: 1; /* grow · shrink · basis */
flex: 0 0 200px; /* sabit genişlik */
order: 2; /* sıra değiştir */
align-self: flex-start; /* bireysel hizalama */
}
/* CSS GRID — layout kralı */
.layout {
display: grid;
grid-template-columns: 1fr 2fr 1fr;
grid-template-rows: auto 1fr auto;
gap: 20px;
}
/* Named areas — çok okunabilir! */
.layout {
grid-template-areas:
"header header header"
"sidebar main ads"
"footer footer footer";
}
.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
/* repeat + minmax — responsive grid */
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
/* Mobile-first Responsive */
.grid { grid-template-columns: 1fr; } /* mobil */
@media (min-width: 640px) { .grid { grid-template-columns: repeat(2,1fr); } }
@media (min-width: 1024px) { .grid { grid-template-columns: repeat(3,1fr); } }
@media (min-width: 1280px) { .grid { grid-template-columns: repeat(4,1fr); } }
/* Container Queries (modern!) */
.wrapper { container-type: inline-size; }
@container (min-width: 600px) {
.kart { flex-direction: row; }
}
Hedef: Flexbox ile navbar + sidebar, Grid ile dashboard layout yap. Media query olmadan responsive olmaz.
03
// İLERİ — PROFESYONEl GÖRÜNÜM
Animasyon · Pseudo · Variables
@keyframes · transform · ::before · CSS custom props
▶
:hover:nth-child::before
::aftertransitiontransform
@keyframesCSS Variablesfilter
/* Pseudo Classes */
a:hover { color: blue; }
input:focus { outline: 2px solid #7ed6a0; }
li:nth-child(odd) { background: #f9f9f9; }
li:first-child { border-radius: 8px 8px 0 0; }
p:not(.excluded) { color: inherit; }
:is(h1, h2, h3) { font-family: serif; }
/* Pseudo Elements */
.btn::before {
content: ""; /* zorunlu! */
position: absolute;
inset: 0;
background: linear-gradient(135deg, #7ed6a0, #79b8f8);
opacity: 0;
transition: opacity .3s;
}
.btn:hover::before { opacity: 1; }
/* CSS Custom Properties (Variables) */
:root {
--renk-birincil: #7ed6a0;
--renk-ikincil: #c084fc;
--bosluk-md: 16px;
--gecis: all .25s ease;
}
.kart {
color: var(--renk-birincil);
padding: var(--bosluk-md);
transition: var(--gecis);
}
/* Dark mode ile */
@media (prefers-color-scheme: dark) {
:root { --renk-birincil: #4ade80; }
}
/* Transition — basit geçiş */
.kart {
transition: transform .3s cubic-bezier(.4,0,.2,1),
box-shadow .3s ease;
}
.kart:hover {
transform: translateY(-6px) scale(1.02);
box-shadow: 0 20px 40px rgba(0,0,0,.2);
}
/* @keyframes animation */
@keyframes float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-12px); }
}
.logo {
animation: float 3s ease-in-out infinite;
}
/* Stagger effect — JS ile kombinle */
.card:nth-child(1) { animation-delay: 0ms; }
.card:nth-child(2) { animation-delay: 100ms; }
.card:nth-child(3) { animation-delay: 200ms; }
💡 Transform GPU'yu kullanır — margin/top yerine transform kullan. left/top değiştirmek layout reflow tetikler, çok yavaş. translate3d() ile GPU kompozisyonunu aktive et.
04
// PRO — GERÇEK FRONTENDÇİ
SCSS · BEM · Tailwind · Architecture
Metodoloji · Preprocessor · Utility CSS · Performance
▶
// SCSS — Nesting + Variables + Mixin
$renk-birincil: #7ed6a0;
$aralik: 8px;
@mixin esnek($yon: row, $bosluk: $aralik) {
display: flex;
flex-direction: $yon;
gap: $bosluk;
}
.kart {
@include esnek(column, 16px);
padding: $aralik * 2;
// Nesting — parent & ile
&:hover { transform: translateY(-4px); }
&__baslik { font-size: 1.2rem; } // BEM!
&--vurgulu { border-color: $renk-birincil; }
// Partials ile import
@use './tokens';
@use './mixins';
}
/* BEM — Block__Element--Modifier */
/* Block: bağımsız bileşen */
.kart { }
/* Element: bloğun parçası */
.kart__baslik { }
.kart__icerik { }
.kart__buton { }
/* Modifier: durum veya varyant */
.kart--buyuk { }
.kart--vurgulu { }
.kart--yukluyor { }
/* HTML kullanımı */
<div class="kart kart--vurgulu">
<h2 class="kart__baslik">Başlık</h2>
</div>
/* Tailwind — utility-first */
<div class="flex items-center gap-4 p-6 rounded-xl
bg-white shadow-lg hover:shadow-xl
transition-all duration-300">
<img class="w-12 h-12 rounded-full object-cover">
<div class="flex-1 min-w-0">
<h3 class="text-lg font-bold text-gray-900
truncate">Başlık</h3>
<p class="text-sm text-gray-500 mt-1">Alt başlık</p>
</div>
</div>
CSS Minification
cssnano / lightningcss ile prod build'de %30-50 boyut azaltma. Critical CSS inline et.
Autoprefixer
-webkit-, -moz- prefix'lerini otomatik ekle. PostCSS pipeline'ına dahil et.
PurgeCSS
Kullanılmayan CSS'i sil. Tailwind ile entegre gelir. Prod bundle'ı küçültür.
CSS Layers (@layer)
Specificity çakışmalarını katman bazlı yönet. Framework + custom kod karışımı için ideal.
05
// MASTER — SENİOR FRONTEND MİNDSET
Design System · A11y · Modern CSS
Container queries · clamp() · scroll-snap · aspect-ratio · debugging
▶
/* Modern CSS — Az kod, çok iş */
/* aspect-ratio */
.video-wrapper {
aspect-ratio: 16 / 9;
width: 100%;
}
/* object-fit — görsel taşmasını engelle */
img { object-fit: cover; object-position: center top; }
/* scroll-snap — native carousel */
.slider {
display: flex;
overflow-x: auto;
scroll-snap-type: x mandatory;
}
.slide { scroll-snap-align: start; flex-shrink: 0; width: 100%; }
/* backdrop-filter — glassmorphism */
.glass-panel {
background: rgba(255,255,255,.08);
backdrop-filter: blur(12px) saturate(1.5);
border: 1px solid rgba(255,255,255,.15);
}
/* Fluid typography — clamp */
h1 {
font-size: clamp(2rem, 5vw + 1rem, 5rem);
/* min: 2rem · ideal: 5vw+1rem · max: 5rem */
}
/* @layer — cascade yönetimi */
@layer reset, tokens, components, utilities;
@layer tokens {
:root { --spacing-base: 4px; }
}
@layer utilities {
.mt-4 { margin-top: calc(var(--spacing-base) * 4); }
}
Renk Kontrastı
WCAG AA: 4.5:1 metin, 3:1 UI. Chrome DevTools'ta kontrol et.
:focus-visible
Klavye navigasyonu için görünür focus. Fareyle tıklayınca gizle.
prefers-reduced-motion
Animasyon hassasiyeti olan kullanıcılar için animasyonları kapat.
/* Design Token sistemi */
:root {
/* Spacing scale */
--space-1: 4px; --space-2: 8px;
--space-4: 16px; --space-8: 32px;
/* Typography scale */
--text-sm: clamp(.8rem, 1vw, .875rem);
--text-xl: clamp(1.2rem, 2vw, 1.5rem);
/* Shadow scale */
--shadow-sm: 0 1px 3px rgba(0,0,0,.12);
--shadow-lg: 0 20px 40px rgba(0,0,0,.25);
}
Hedef: Figma tasarımını birebir uygula. Responsive sorunsuz. Animasyon var. Accessibility geçti. → CSS tamamdır.