CSS Academy · Ders

Dosya Düzenleme: ITCSS ve 7-1 Kalıbı

Ölçeklenebilir projeler için CSS dosyalarını Ters Üçgen veya 7-1 kalıbını kullanarak yapılandırın.

Dosya Düzenleme: ITCSS ve 7-1 Kalıbı, 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 dosyaları neden düzenlenir?

Projeler büyüdükçe tek bir CSS dosyasını yönetmek zorlaşır. Dosya düzenleme yapıları, ekiplerin CSS'i doğru sırada yüklenen ve kolayca gezilebilen mantıksal katmanlara ayırmasına yardımcı olur.

ITCSS: Ters üçgen CSS

ITCSS, CSS'i artan özgüllüğe göre sıralanmış katmanlar hâlinde düzenler. Ters üçgen gibi, en geniş (en genel) kurallar üstte, en özgül kurallar altta bulunur. Bu yapı doğal cascade'e uyar.

ITCSS katmanları

ITCSS'in 7 katmanı (en genelden en özele):

Ayarlar — Değişkenler ve tasarım belirteçleri
Araçlar — Karışımlar ve işlevler
Genel — Sıfırlama/normalleştirme
Öğeler — Temel HTML öğesi stilleri
Nesneler — Yerleşim soyutlamaları (görsel özellik yok)
Bileşenler — Kullanıcı arayüzü bileşenleri
Yardımcılar — Geçersiz kılmalar, yardımcılar; burada !important kullanımına izin verilir

ITCSS dosya yapısı

Tipik bir ITCSS dosya düzeni:

  <pre class="file-tree">src/styles/
  01-settings/
    _colors.scss
    _typography.scss
    _spacing.scss
  02-tools/
    _mixins.scss
  03-generic/
    _reset.scss
  04-elements/
    _headings.scss
    _links.scss
  05-objects/
    _container.scss
    _media.scss
  06-components/
    _button.scss
    _card.scss
  07-utilities/
    _text-align.scss
    _display.scss</pre>

7-1 deseni

7-1 deseni, Sass'ı her şeyi içe aktaran 7 klasör ve 1 ana dosya hâlinde düzenler:

abstracts/ — değişkenler, işlevler, karışımlar
base/ — sıfırlama, tipografi, temel öğeler
components/ — düğmeler, kartlar, modallar
layout/ — üst bilgi, alt bilgi, kenar çubuğu, grid
pages/ — sayfaya özgü stiller
themes/ — birden çok tema
vendors/ — üçüncü taraf CSS

Ana giriş dosyası

Bir ana main.scss dosyası tüm parçalı dosyaları sırayla içe aktarır:

  <pre class="file-tree">@use 'abstracts/variables';
@use 'abstracts/mixins';
@use 'base/reset';
@use 'base/typography';
@use 'components/button';
@use 'components/card';
@use 'layout/header';</pre>

Düzenleme için CSS katmanları (@layer)

Modern CSS @layer, bir ön işlemci olmadan ITCSS ile aynı cascade sıralama avantajlarını sağlar. Katmanlar bir kez bildirilir ve öncelikleri kaynak sırasından bağımsız olarak sabit kalır.

  <div class="card text-primary">Layered card text</div>

Birlikte konumlandırma ve merkezileştirme

Merkezî stil dosyalarına bir alternatif: birlikte konumlandırma; bileşen CSS'ini bileşen dosyasının yanına yerleştirin. Bu yaklaşım, CSS Modules veya CSS-in-JS kullanan React/Vue projelerinde yaygındır.

Sass parçalı dosyalarını adlandırma

Sass parçalı dosyaları alt çizgiyle başlar (_button.scss). Alt çizgi, Sass'a dosyanın bağımsız olarak derlenmediğini, bir ana dosyaya aktarılması gerektiğini bildirir.

Alternatif olarak PostCSS

Sass kullanmıyorsanız, @import eklentisiyle PostCSS veya @layer ile birlikte yerel CSS @import, bir ön işlemci olmadan aynı dosya düzenlemesini sağlar.

Bileşen CSS dosyaları

ITCSS, 7-1 veya birlikte konumlandırılmış dosyaları kullanmanız fark etmeksizin her bileşenin kendi dosyası olmalıdır. Dosyayı, stillendirdiği bileşenin adını kullanarak adlandırın: _card.scss, button.css, Nav.module.css.

Hızlı kontrol

ITCSS'te ters üçgenin en üstünde (en geniş/en az özgül) hangi katman bulunur?

Özet

ITCSS, cascade'i izleyerek CSS katmanlarını genelden özele doğru sıralar. 7-1 deseni, Sass'ı tek bir ana dosya üzerinden içe aktarılan 7 klasörde düzenler. Modern CSS @layer, aynı cascade denetimini yerel olarak sağlar. Dosyalar merkezî olarak veya birlikte konumlandırılmış olsa da temel ilke şudur: her bileşen için bir dosya ve tutarlı içe aktarma sırası.

Sıkça Sorulan Sorular

“Dosya Düzenleme: ITCSS ve 7-1 Kalıbı” dersi ücretsiz mi?

Evet — “Dosya Düzenleme: ITCSS ve 7-1 Kalıbı” 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.

“Dosya Düzenleme: ITCSS ve 7-1 Kalıbı” dersinde ne öğreneceğim?

Ölçeklenebilir projeler için CSS dosyalarını Ters Üçgen veya 7-1 kalıbını kullanarak yapılandırı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.

“Dosya Düzenleme: ITCSS ve 7-1 Kalıbı” 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

← CSS Academy Sayfasına Dön