Büyük projelerde CSS mimarisi
Adlandırma düzenleri, basamak katmanları, tasarım belirteçleri ve derleme araçlarıyla büyüyen bir projede CSS’i düzenli, öngörülebilir ve bakımı kolay tutarsın.
Seviye 301 · 16 ders · 15 pratik lab
Dersler
Düzen ve adlandırma
- Büyüyen CSS’in sorunları: çakışma ve ölü kod
- BEM ile adlandırma
- Yardımcı sınıflar ve bileşen sınıfları
- Basamak katmanları: @layer
- @scope ile kapsamı sınırlamak
- Kısa görev: dağınık bir stil dosyasını düzenle
Tasarım sistemi
- Tasarım belirteçleri: renk, boşluk, yazı
- CSS değişkenleriyle çoklu tema
- Sass: değişken, iç içe yazım ve karışımlar
- Yerel CSS iç içe yazımı
- PostCSS ve tarayıcı önekleri
- Kısa görev: belirteçlerden açık ve koyu tema
Kalite
- Stylelint ile kural denetimi
- Kullanılmayan CSS’i bulmak
- Görsel gerileme sınaması
- Bitirme görevi: bir sitenin stillerini katmanlı mimariye taşı
Pratik lablar
- Sınıfları BEM'e göre yeniden adlandır: Rastgele adlandırılmış kart bileşeninin sınıflarını blok, öğe ve değiştirici yapısına çevir.
- Çakışan stilleri ayıkla: İki ekibin yazdığı .button kuralları birbirini eziyor; kapsamları ayırıp çakışmayı bitir.
- Dağınık stil dosyasını topla: Üç bin satırlık stil dosyasında tekrarları, ölü kuralları ve aşırı özgül seçicileri bulup sadeleştir.
- Katmanları sırala: reset, base, components ve utilities katmanlarını @layer ile tanımla ve sıranın etkisini göster.
- Üçüncü taraf stilini katmana al: Hazır tarih seçicinin stilleri sayfayı eziyor; onu düşük öncelikli bir katmana alıp sorunu çöz.
- @scope ile bileşen sınırı çiz: İç içe kart bileşenlerinde stillerin alt kartlara sızmasını @scope ve sınır seçicisiyle engelle.
- Renk ve boşluk belirteçleri tanımla: Sabit renk ve boşluk değerlerini anlamlı adlı CSS değişkenlerine taşı.
- Belirteçlerden açık ve koyu tema üret: Temel ve anlamsal belirteç katmanı kurup tek bir öznitelikle tema değiştiren yapı yaz.
- Üç markaya tek kod tabanı: Aynı arayüzü üç kardeş şirketin renk ve yazı belirteçleriyle, bileşen koduna dokunmadan giydir.
- Sass ile tekrarı azalt: Tekrarlanan düğme stillerini Sass değişkenleri ve bir mixin ile sadeleştir.
- Sass'tan yerel iç içe yazıma geç: Sass iç içe kurallarını yerel CSS iç içe yazımına çevir ve davranış farklarını kontrol et.
- PostCSS hattı kur: Önekleme, küçültme ve modern sözdizimi dönüştürmesi yapan PostCSS hattını kurup çıktıyı doğrula.
- Stylelint uyarılarını düzelt: Projeye Stylelint ekle ve ilk çalıştırmada çıkan uyarıları tek tek düzelt.
- Kullanılmayan CSS'i bul: Kapsama aracıyla sayfaların kullanmadığı kuralları bul ve güvenle kaldırılabilecekleri ayır.
- Görsel gerileme testi kur: Beş sayfanın ekran görüntüsünü referans al, bir stil değişikliğinin yarattığı farkı testle yakala.
Kurs hakkında
Adlandırma düzenleri, basamak katmanları, tasarım belirteçleri ve derleme araçlarıyla büyüyen bir projede CSS’i düzenli, öngörülebilir ve bakımı kolay tutarsın.
Ne öğreneceksin
- Düzen ve adlandırma
- Tasarım sistemi
- Kalite
Ön koşullar
Aynı yolun 101 ve 201 düzeyindeki konularına hâkim olmalısın.
Lab ortamı
Dersler, tarayıcında açılan sana özel bir Kali Linux masaüstünde geçer; araçlar pencereli arayüzleriyle hazırdır. Kurulum gerekmez, bilgisayar ekranı önerilir.
Sık sorulan sorular
- Bu kurs benim düzeyime uygun mu?
- Kurs 301 düzeyindedir; daha düşük düzeydeki kursların konularını bildiğin varsayılır.
- Kurulum gerekir mi?
- Hayır. Her ders tarayıcında açılan sana özel bir lab ortamında geçer.
- Dersler nasıl işleniyor?
- Her ders 8 ile 10 adımdan ve bir kısa sınavdan oluşur. İlk adımlarda yazman gereken komut gösterilir, sonraki adımlarda yardım azalır; iki denemede takılırsan çözüm açılır.
- Ücretsiz deneyebilir miyim?
- Evet. Her kursun ilk üç dersi ücretsizdir.