Süper hızlı CSS için 5 ipucu

Feb 1, 2026

Nasıl Yapılır

Sitenizin CSS'nin boyutunu düşündünüz mü? Stil sayfanız balonlarsa, sayfa oluşturma işlemini geciktirebilir.

16 üst CSS animasyon örnekleri

CSS, hizmet edeceğiniz en büyük varlık türü olmasa da, tarayıcının keşfedilmesinin ilklerinden biridir. Tarayıcı, sayfayı CSS indirilinceye ve ayrıştırılıncaya kadar engellendiğinden, mümkün olduğu kadar yalın olması gerekir. İşte oraya ulaşmanıza yardımcı olacak beş ipucu.

Karmaşık bir site var mı? Mükemmelliğe ihtiyacın var ağ sağlayıcısı hizmet. Ya da, telaşsız bir site yapmak istiyorsanız, deneyin Web Sitesi Oluşturucu .

01. Sığ seçiciler kullanın

Ailen sana sığlığın bir erdem olmadığını söyledi, ancak CSS'ye gelince, yanlışlar. Sürekli olarak kullanılır, sığ seçiciler Kilobytes'i büyük stil sayfalarından kesebilir. Bu seçiciyi al:

nav ul li.nav-item

Bu daha belirgin şekilde ifade edilebilir:

.nav-item

CSS Svelte'nizi korumanın yanı sıra, tarayıcı ayrıca sığ seçiciler tarafından hedeflenen elemanları daha hızlı hale getirecektir. Tarayıcılar seçicileri sağdan sola okur. Seçiciler daha derin, tarayıcının, bu seçicilerin uygulandığı elemanları oluşturulması ve yeniden oluşturulması gerektiğidir. Kompleks Kompleks Domlar için, sık sık tekrarlayan, kısa seçiciler de JANK'ı kesebilir.

İdeal olarak, seçicilerin mümkün olduğu kadar sığ olmasını istiyorsunuz, ancak bu, her şeyi kemiğe kadar kesmeniz gerektiği anlamına gelmez. Bazen bileşenleri genişletmek için ek bir özgüllüğe ihtiyacınız var. Doğru dengeyi vurun, ancak pragmatik olun.

02. Shorthand özelliklerini kullanın

Using shorthand CSS will speed up your site — Shorthand CSS'yi kullanmak sitenizi hızlandıracak

Bu sağduyulu gibi görünüyor, ancak Longhand özelliklerinin ne sıklıkla kullanılacağına dikkat edilmesine şaşıracaksınız. İşte kullanımdaki bazı Longhand özelliklerine bir örnek:

 Yazı tipi boyutu: 1.5rem;
Hat yüksekliği: 1.618;
Yazı Tipi ailesi: "Arial", "Helvetica", Sans-Serif;

Bu çok fazla CSS! Bunu düzenleyelim:

 Yazı Tipi: 1.5rem / 1.618 "Arial", "Helvetica", Sans-Serif;

yazı tipi Shorthand özelliği, çok daha az yer kaplayan kullanışlı bir tek astar haline gelen çeşitli beyanları yoğunlaştırır.

Yukarıda gösterilen örnekte, Shorthand, Longhand eşdeğerine göre yaklaşık yüzde 40 daha az yer kullanır. İlk bakışta okunabilir değil, ancak bir süre kullandıktan sonra sözdizimi ikinci doğa haline gelir.

Elbette, yazı tipi Size sunulan tek shorthand değil. Örneğin, marj gibi daha uzun özelliklerin yerine kullanılabilir marjlı , kenar boşluğu ve bunun gibi.

dolgu malzemesi Mülkiyet aynı şekilde çalışır. CSS'nizi temizlemenin daha fazla yolu için Mozilla Developer Network, faydalı bir listesi sunar. Shorthand Emlak Referansları .

Cascade'de daha fazla bir değeri geçersiz kılmanız gerekirse? Örneğin, daha büyük ekranlar için yazı tipi boyutunu değiştirmesi gereken bir başlık öğünüzü olduğunu söyleyelim.

Bu durumda, daha spesifik kullanmalısınız. yazı Boyutu yerine mülk:

 h1 {
    Yazı Tipi: 1.5rem / 1.618 "Arial", "Helvetica", Sans-Serif;
}
@Media (min-genişlik: 60rem) {
    h1 {
        Yazı tipi boyutu: 2rem;
    }
}

Bu sadece uygun değil, aynı zamanda bileşen esnekliğini de artırır. Altlığın herhangi bir kısmı ise yazı tipi Özellik değiştirilir, bu değişiklikler daha büyük ekranlara kadar süzülecektir. Bu, yeni bir bağlamın farklı bir tedavi gerektirdiği bileşen için harika çalışır.

03. Preload kaynak ipucunu kullanın

preload Kaynak İpucu Tarayıcıya, sitenizin CSS'sini yüklemeye başlamaya başlayabilir. preload Kaynak İpucu Tarayıcıya bir varlık için erken bir alım başlatmasını söyler.

Olarak ayarlayabilirsiniz LINK & GT; HTML'de etiket:


    & l l l l l l l l-rel = "preload" href = "/ css / styles.css" as = "stil" & gt;

Veya sunucu yapılandırmanızda bir HTTP başlığı olarak:


  link: & lt; /css/styles.css> ;; rel = preload; = stil

Bu senaryoların her ikisinde de, preload tarayıcıya bir kafa yüklemeye başlar /css/styles.css . Kullanma preload Bir HTTP başlığında tercih edilir, çünkü bu, tarayıcının müdahale bedeninde daha sonra yanıt başlıklarında daha önce olan ipucunu keşfedeceği anlamına gelir.

Kullanmak için başka bir neden preload Bir HTTP başlığında, çoğu HTTP / 2 uygulamasında bir sunucu basma olayını başlatacak olmasıdır. Sunucu itme, içerik talepleri yapıldığında, varlıkların müşterinin önleyici olarak itileceği bir mekanizmadır ve CSS'ye benzer performans yararları sunar.

Sunucu itme http / 1'de mevcut değildir. Ancak, kullanma preload HTTP / 1 ortamında hala performansı artırabilir.

04. CSSCSS'li Cull Forundanları

csscss will analyse any CSS files you give it and let you know which rulesets have duplicated declarations — CSSCSS, verdiğiniz herhangi bir CSS dosyalarını analiz eder ve hangi kuralların kopyalanmış beyanlara sahip olduğunu bildirir.

CSS'inizi bir yedeklilik denetleyicisiyle yinelenen kurallar için kontrol etmek için ödeme yapabilir. Örneğin, yakut tabanlı aracı CSSCSS'leri alın.

Yakut kullanıcıları şunlarla yükleyebilir:


  Gem Kurulumu CSSCSS

Kurulduktan sonra, böyle bir işlem için CSS'inizi inceleyebilirsiniz:

CSSCSS -V styles.cssss

Bu komut, hangi seçicilerin, yerden tasarruf etmek için çoğaltabileceğiniz kuralları paylaştığını listeler:

 {h1} ve {p} Paylaş 3 beyanname
  - Renk: # 000
  - Hat yüksekliği: 1.618
  - Marj: 0 0 1.5REM

Yinelenen kuralları tek bir seçici altında taşıyabilirsiniz:

 H1, P {
    Renk: # 000;
    Hat yüksekliği: 1.618;
    Marj: 0 0 1.5rem;
}

Bu sürecin büyük projelerde ne kadar uzayabileceğine şaşırırsınız. Kullan --Yardım Edin Daha fazla komutu görmek için seçeneği daha fazla tweak için kullanabilirsiniz.

05. CSSNANO ile ekstra mil gidin

cssnano takes your nicely formatted CSS and runs it through many focused optimisations — Cssnano, güzel biçimlendirilmiş CSS'inizi alır ve birçok odaklı optimizasyon yoluyla çalıştırır

Üstteki kiraz için, kullanabilirsiniz cssnano - Bir düğüm ve postcss bağımlı bir araç. Cssnano, yalnızca CSS'yi eşleştirmez, CSS'inizi daha da azaltabilecek birçok odaklı optimizasyon yapar. NPM gibi sisteminize yükleyin:

 NPM I -G CSSNANO-CLI

Sonra CSS'nizi optimize etmek için kullanın:

 cssnano styles.css optimize-stilleri.cssss

Koşu komutları reklam hoc sizin tarzınız değilse, CSSNANO'yu bir derleme sistemi ile otomatikleştirebilirsiniz. İşte bir GulpFile'de CSSNANO'yu nasıl kullanacaksınız:

 Const Gulp = gerektirir ("gulp");
Const Postcss = gerektirir ("gulp-postcss");
const cssnano = gerektirir ("cssnano");

const buildcsss = () = & gt; {
    geri dönüş gulp.src ("css / styles.css")
        .Pipe (POSTCSS ([CSSNANO ()])
        .Pipe (Gulp.Dest ("CSS / Optimize edilmiş"));
};
const watch = () = & gt; {
    gulp.watch ("css / styles.css", buildcss);
};
ihracat.buildcss = buildCSS'ler;
Exports.watch = Watch;

buildcss Görev, yazdığınız CSS'yi okur CSS / stilleri.css , sonra optimize edilmiş çıktıyı borular CSS / Optimize edilmiş dizin. izlemek Görev başladı buildcss Ne zaman değişiklik olursa CSS / stilleri.css .

izlemek Görev daha sonra terminalde böyle bir şekilde çağrılabilir:

 Gulp İzle

Bazı tweaking ile, bu özel optimizasyonu yapan bu özel optimizasyonu yapan bir iş akışı yapabilirsiniz.

Web sitesi sayfalarınızı kaydetmek ister misiniz? PDF olarak ihracat ve güvenilir bir şekilde kaydet Bulut depolama .

Bu makale başlangıçta ortaya çıktı ağ , Web tasarımcıları için dünyanın önde gelen dergisi. Abone olun .

İlgili Makaleler:

CSS ekran özelliğini anlama
CSS animasyonunun yeni sınırı
CSS kullanarak karmaşık düzenler nasıl oluşturulur

Süper hızlı CSS için 5 ipucu

01. Sığ seçiciler kullanın

02. Shorthand özelliklerini kullanın

03. Preload kaynak ipucunu kullanın

04. CSSCSS'li Cull Forundanları

05. CSSNANO ile ekstra mil gidin

Nasıl Yapılır - En Popüler Makaleler

Eski okul anaglif etkisi yaratın

Adobe XD ile prototipler oluşturun

Bir fil nasıl çizilir

Photoshop'taki dokuların nasıl kullanılacağı

Yağlı boya için ihtiyacınız olan 5 şey

Photoshop'ta atmosferik bir portre nasıl boyanır

Bir 3D Splash oluşturmak için parçacıkları kullanın

Zbrush'ta bir yaratığı şekillendirmek için en üst uçlar

Kategoriler