CSS Modülleri: Kapsamlı Sınıf Adları
Bir Vite veya webpack projesinde CSS Modüllerini etkinleştirerek sınıf adlarını bileşen dosyasına otomatik olarak kapsamlandırın ve genel stil sızıntılarını ortadan kaldırın.
CSS Modülleri: Kapsamlı Sınıf Adları, CoddyKit'te ücretsiz bir Frontend Academy dersidir. Bu, 4 dersinin 2. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, Frontend Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Frontend Academy kursu toplamda 4 dersten oluşur.
CSS Modules Nedir
CSS Modules, sınıf adlarını derleme zamanında benzersiz bir karma içerecek şekilde dönüştürerek bunları bileşen dosyasıyla sınırlar. .card adlı bir sınıf .card_a1b2c3 hâline gelir; böylece diğer bileşenlerin stilleriyle yanlışlıkla çakışması imkânsızlaşır.
CSS Modules Nasıl Çalışır
CSS dosyasını bir nesne olarak içe aktarın. Nesnenin özelliklerini sınıf adları olarak kullanın. Paketleyiciler (Vite, webpack) dönüşümü gerçekleştirir.
// Button.module.css
.button {
background: #6366f1;
color: white;
padding: 8px 16px;
}
.button--large {
padding: 12px 24px;
}
// Button.tsx
import styles from './Button.module.css';
function Button({ large }: { large?: boolean }) {
return (
<button className={`${styles.button} ${large ? styles['button--large'] : ''}`}>
Click me
</button>
);
}clsx ile Dinamik Sınıf Adları
clsx kitaplığı, CSS Modules ile koşullu sınıf adı birleştirmeyi kolaylaştırır.
import clsx from 'clsx';
import styles from './Button.module.css';
function Button({ variant, disabled }: ButtonProps) {
return (
<button className={clsx(
styles.button,
styles[`button--${variant}`],
disabled && styles['button--disabled']
)}>
...
</button>
);
}CSS Modules'ta Genel CSS
Kapsama alınmaması gereken sınıfları belirtmek için :global kullanın. Bu, üçüncü taraf kitaplık sınıflarının geçersiz kılınması için yararlıdır.
/* Scoped: */
.container { padding: 16px; }
/* Global (not scoped): */
:global(.react-datepicker) {
font-family: inherit;
}Composition — Sınıfları Genişletme
CSS Modules, başka bir sınıftan ve diğer modüllerdeki sınıflardan stil devralmak için composes kullanımını destekler.
/* utilities.module.css */
.flexRow {
display: flex;
align-items: center;
gap: 8px;
}
/* Button.module.css */
.button {
composes: flexRow from './utilities.module.css';
background: #6366f1;
}CSS Modules ve Kapsamlı Stiller (Vue)
Vue'nun kapsamlı stilleri ile CSS Modules, genel sızıntıları önler; ancak yöntemleri farklıdır: kapsamlı stiller veri öznitelikleri ekler, CSS Modules ise sınıf adlarını dönüştürür. İkisi de geçerlidir; CSS Modules React'te de çalışır.
Vite'ta CSS Modules
Vite, .module.css ile biten dosyalar için CSS Modules'u kutudan çıktığı hâliyle destekler. Ek yapılandırma gerekmez.
CSS Modules için TypeScript
Sınıf adlarında otomatik tamamlama elde etmek için typescript-plugin-css-modules yükleyin veya typed-css-modules aracıyla CSS Modules için .d.ts dosyaları oluşturun.
CSS Modules'ta Adlandırma Kuralları
Sınıf adları JavaScript özelliklerine dönüştüğünden CSS Modules'ta sınıf adları için camelCase kullanın: .button-primary yerine .buttonPrimary. Tire, köşeli parantezle erişim gerektirir.
CSS Modules Ne Zaman Kullanılmalı
CSS Modules, bileşen kapsamlı stillerin gerektiği ancak tam bir CSS-in-JS çözümünün gereğinden fazla kapsamlı olacağı React uygulamaları için mükemmeldir. Vite + CSS Modules, hafif ve çalışma zamanı yükü olmayan bir stillendirme çözümüdür.
CSS Modules ve CSS-in-JS
CSS Modules: çalışma zamanı yükü yoktur, düz CSS kullanır ve daha iyi performans sağlar. CSS-in-JS (styled-components): stiller çalışma zamanında dinamik olarak oluşturulur ve JS önceliklidir. Çoğu uygulama için CSS Modules daha basit ve daha hızlıdır.
Hızlı Kontrol
CSS Modules kullandığınızda bir CSS sınıfı adına ne olur?
Özet: CSS Modules
.module.css dosyalarını nesne olarak içe aktarın. Sınıf adları benzersiz bir karma ile otomatik olarak kapsamlandırılır. İstenerek genel stiller oluşturmak için :global() kullanın. Modüller arası kalıtım için composes kullanın. Koşullu sınıf adları için clsx kullanın. Vite, CSS Modules'u yerel olarak destekler. CSS-in-JS'e kıyasla çalışma zamanı yükü yoktur.
Sıkça Sorulan Sorular
“CSS Modülleri: Kapsamlı Sınıf Adları” dersi ücretsiz mi?
Evet — “CSS Modülleri: Kapsamlı Sınıf Adları” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve Frontend Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Frontend Academy kursu toplamda 4 dersten oluşur.
“CSS Modülleri: Kapsamlı Sınıf Adları” dersinde ne öğreneceğim?
Bir Vite veya webpack projesinde CSS Modüllerini etkinleştirerek sınıf adlarını bileşen dosyasına otomatik olarak kapsamlandırın ve genel stil sızıntılarını ortadan kaldırın. Frontend Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.
Frontend Academy öğrenmeye başlamak için deneyim gerekli mi?
Önceden deneyim gerekmez. CoddyKit'te Frontend Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 2. dersidir.
“CSS Modülleri: Kapsamlı Sınıf Adları” dersi ne kadar sürer?
Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.
Bu Frontend Academy dersinde kod yazıp çalıştırabilir miyim?
Evet. Her Frontend Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.
Bu kursun tüm dersleri
- BEM Metodolojisi: Block Element Modifier
- CSS Modülleri: Kapsamlı Sınıf Adları
- CSS-in-JS: Styled-components ve Emotion
- Tailwind CSS: Önce Yardımcı Sınıflar Yaklaşımı