CSS Academy · Ders

CSS Modules: Kapsamlandırılmış Stiller

Derleme ayarınızda CSS Modules kullanarak class adlarının kapsamını otomatik olarak bileşenlerle sınırlayın.

CSS Modules: Kapsamlandırılmış Stiller, CoddyKit'te ücretsiz bir CSS Academy dersidir. Bu, 4 dersinin 3. 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, CSS Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. CSS Academy kursu toplamda 4 dersten oluşur.

CSS Modülleri nedir

CSS Modülleri, CSS sınıf adlarını tanımlandıkları bileşen dosyasıyla otomatik olarak sınırlar. Her sınıf adı derleme zamanında benzersiz bir tanımlayıcıya dönüştürülür; böylece stillerin genel alana sızması önlenir.

Dosya kuralı

CSS dosyanızı .module.css (Sass için .module.scss) uzantısıyla adlandırın:

/* Button.module.css */
.button {
  background: royalblue;
  color: white;
  padding: 10px 20px;
  border-radius: 4px;
}

CSS Modüllerini içe aktarma

Modülü bir JavaScript nesnesi olarak içe aktarın. Sınıf adları özelliklere dönüşür:

import styles from './Button.module.css';

function Button({ children }) {
  return <button className={styles.button}>{children}</button>;
}
// Renders as: class="Button_button__aB2cD" (unique hash)

Birleştirilmiş sınıflar

Başka bir modüldeki sınıfı genişletmek için composes kullanın:

/* Button.module.css */
.primary {
  composes: base from "./Base.module.css";
  background: royalblue;
}

Genel sınıflar

Belirli bir sınıf için yerel kapsamlandırmadan çıkmak üzere :global() kullanın:

/* styles.module.css */
.container :global(.third-party-class) {
  /* targets third-party className without scoping */
  color: red;
}

Vite'ta CSS Modülleri

Vite, yerleşik CSS Modülleri desteğine sahiptir. *.module.css ile eşleşen dosyalar otomatik olarak işlenir:

// vite.config.js
export default {
  css: {
    modules: {
      localsConvention: 'camelCase' // .my-class → styles.myClass
    }
  }
}

webpack'te CSS Modülleri

css-loader yapılandırmasında modülleri etkinleştirin:

{
  loader: 'css-loader',
  options: {
    modules: {
      localIdentName: '[name]__[local]--[hash:base64:5]'
    }
  }
}

Sınıf adı birleştirme

Şablon dizgelerini veya clsx/classnames kitaplığını kullanarak birden fazla modül sınıfını birleştirin:

import styles from './Card.module.css';
import clsx from 'clsx';

function Card({ featured }) {
  return (
    <div className={clsx(styles.card, featured && styles.featured)}>
      Content
    </div>
  );
}

Çalışma zamanı maliyeti yoktur

CSS Modülleri tamamen derleme zamanında çözümlenir; çalışma zamanında JavaScript ek yükü yoktur. Çıktı, yeniden adlandırılmış sınıf adlarına sahip standart CSS'dir. Bu özellik, onları performansa duyarlı uygulamalar için ideal hâle getirir.

TypeScript desteği

CSS Modülleri için tür güvenli sınıf adı erişimi sağlamak üzere typed-css-modules veya Vite'ın cssModuleTypes yapılandırmasını kullanarak TypeScript tür tanımlarını oluşturun.

CSS Modülleri ve CSS-in-JS karşılaştırması

CSS Modülleri karşılaştırması:

Yalnızca derleme zamanında çalışır — çalışma zamanında JS maliyeti yoktur
Standart CSS/Sass ile bütünleşir — tanıdık söz dizimi
JS aradeğerlemesiyle dinamik stiller kullanılamaz
Temaya dayalı dinamik stiller için styled-components/Emotion kadar esnek değildir

Hızlı kontrol

Bir CSS Modülü, iki farklı bileşen dosyasındaki sınıf adı çakışmalarını nasıl önler?

Özet

CSS Modülleri, sınıf adlarını derleme zamanında benzersiz tanımlayıcılara dönüştürerek otomatik olarak kapsamlandırır. Bunları JavaScript nesneleri olarak içe aktarabilir ve sınıflara özellik olarak erişebilirsiniz. Genel seçiciler için kapsamlandırmadan çıkmak üzere :global(), sınıf birleştirme için composes kullanın. Çalışma zamanı maliyetinin olmaması ve tam CSS/Sass söz dizimi desteği, CSS Modüllerini statik stiller için CSS-in-JS'e hafif bir alternatif hâline getirir.

Sıkça Sorulan Sorular

“CSS Modules: Kapsamlandırılmış Stiller” dersi ücretsiz mi?

Evet — “CSS Modules: Kapsamlandırılmış Stiller” 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 CSS Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. CSS Academy kursu toplamda 4 dersten oluşur.

“CSS Modules: Kapsamlandırılmış Stiller” dersinde ne öğreneceğim?

Derleme ayarınızda CSS Modules kullanarak class adlarının kapsamını otomatik olarak bileşenlerle sınırlayın. CSS 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.

CSS Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te CSS 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 3. dersidir.

“CSS Modules: Kapsamlandırılmış Stiller” 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 CSS Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her CSS 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

Styled-components: Etiketli Şablon Değişmezleri
Emotion: css() ve styled()
CSS Modules: Kapsamlandırılmış Stiller
Vanilla Extract: Sıfır Çalışma Zamanlı CSS-in-JS

← CSS Academy Sayfasına Dön