CSS eklemenin en iyi yolu? Neden @import kullanıyorsunuz?

Temelde ben @importsadece başka bir ekleme yerine mevcut bir stil sayfasına stil sayfaları almak için kullanmanın avantajı / amacı nedir merak ediyorum ...

<link rel="stylesheet" type="text/css" href="" />

belgenin başına?

Sayfa hızı açısından, @importbir CSS dosyasından neredeyse hiç kullanılmamalıdır, çünkü stil sayfalarının aynı anda indirilmesini önleyebilir. Örneğin, stil sayfası A metni içeriyorsa:

@import url("stylesheetB.css");

ikinci stil sayfasının indirilmesi, ilk stil sayfası indirilene kadar başlamayabilir. Öte yandan, her iki stil <link>sayfasına ana HTML sayfasındaki öğelerde referans verilirse, her ikisi de aynı anda indirilebilir. Her iki stil sayfası da her zaman birlikte yüklüyse, bunları tek bir dosyada birleştirmek de yararlı olabilir.

Bazen @importuygun olan durumlar vardır , ancak bunlar kural değil, genellikle istisnadır.

Şeytanın avukatını oynayacağım, çünkü insanlar çok fazla anlaştıklarında bundan nefret ediyorum.

1. Başka bir stile bağlı bir stil sayfasına ihtiyacınız varsa, @import kullanın. Optimizasyonu ayrı bir adımda yapın.

Herhangi bir zamanda optimizasyon yaptığınız iki değişken vardır - kodunuzun performansı ve geliştiricinin performansı . Çoğu durumda, çoğu durumda olmasa da, geliştiriciyi daha verimli hale getirmek ve ancak o zaman kodu daha performanslı hale getirmek daha önemlidir .

Bir diğerine bağlı bir stil sayfanız varsa , yapılacak en mantıklı şey bunları iki ayrı dosyaya koymak ve @import kullanmaktır. Bu, koda bakan bir sonraki kişi için en mantıklı mantıklı olacaktır.

(Böyle bir bağımlılık ne zaman olur? Bence oldukça nadirdir - genellikle bir stil sayfası yeterlidir. Ancak, farklı CSS dosyalarına bir şeyler koymak için bazı mantıklı yerler vardır :)

• Tema: Aynı sayfa için farklı renk şemalarınız veya temalarınız varsa, bazı bileşenleri paylaşabilir, ancak tüm bileşenleri paylaşmayabilir.
• Alt bileşenler: Çağdaş bir örnek - menü içeren bir restoran sayfanız olduğunu varsayalım. Menü sayfanın geri kalanından çok farklıysa, kendi dosyasında olup olmadığını korumak daha kolay olacaktır.

Genellikle stil sayfaları bağımsızdır, bu yüzden hepsini kullanarak dahil etmek mantıklıdır <link href>. Ancak, bağımlı bir hiyerarşi ise, en mantıklı olanı yapmalısınız.

Python içe aktarma kullanır; C kullanımları arasında; JavaScript gerektiriyor. CSS'nin içe aktarımı vardır; İhtiyacınız olduğunda kullanın!

2. Sitenin ölçeklenmesi gereken noktaya geldiğinizde, tüm CSS'yi birleştirin.

Bağlantılar veya @imports aracılığıyla her türden birden fazla CSS isteği, yüksek performanslı web siteleri için kötü bir uygulamadır . Optimizasyonun önemli olduğu bir noktaya geldiğinizde, tüm CSS'niz bir küçültücüden akmalıdır. Cssmin , içe aktarma ifadelerini birleştirir; @Brandon'un işaret ettiği gibi, grunt'ın bunu yapmak için birden fazla seçeneği vardır. ( Ayrıca bu soruya bakın ).

Küçültülmüş aşamada olduğunuzda, <link>insanların işaret ettiği gibi daha hızlıdır, bu yüzden en fazla birkaç stil sayfasına bağlantı verin ve mümkünse @ ithalat yapmayın.

Site üretim ölçeğine ulaşmadan önce, kodun düzenli ve mantıklı olması, biraz daha hızlı gitmesinden daha önemlidir.

@importHız nedeniyle bir sayfaya CSS eklemek DEĞİLDİR . Neden olmasın öğrenmek için bu mükemmel makaleye bakın: http://www.stevesouders.com/blog/2009/04/09/dont-use-import/

Ayrıca, @import etiketi aracılığıyla sunulan css dosyalarını küçültmek ve birleştirmek genellikle daha zordur, çünkü komut dosyalarını küçültmek @import satırlarını diğer css dosyalarından "çıkaramaz". Bunları <link etiketleri olarak eklediğinizde, minyatür yapmak için mevcut minify php / dotnet / java modüllerini kullanabilirsiniz.

Yani: <link />yerine kullanın @import.

link yöntemini kullanarak, stil sayfaları paralel olarak yüklenir (daha hızlı ve daha iyi) ve neredeyse tüm tarayıcılar bağlantıyı destekler

import, ekstra css dosyalarını tek tek yükler (daha yavaş) ve size Unstyled İçeriği Flash verebilir

@Nebo Iznad Mišo Grgur

@İmport'u kullanmanın doğru yolları şunlardır

@import url("fineprint.css") print;
@import url("bluish.css") projection, tv;
@import 'custom.css';
@import url("chrome://communicator/skin/");
@import "common.css" screen, projection;
@import url('landscape.css') screen and (orientation:landscape);

kaynak: https://developer.mozilla.org/en-US/docs/Web/CSS/@import

İçe aktarma işlevini kullanmak yerine, kafaya bir css stil sayfası eklemede pek bir fark yoktur. Kullanımı @importgenellikle stil sayfalarını zincirlemek için kullanılır, böylece kolayca genişletilebilir. Örneğin, bazı genel css tanımlarıyla birlikte farklı renk düzenlerini kolayca değiştirmek için kullanılabilir. Ana avantaj / amaç genişletilebilirlik olduğunu söyleyebilirim.

Taşınabilirlik ve sürdürülebilirliğin ilave faydalar olduğunu da xbonez yorumuna katılıyorum.

Çok benzerler. Bazıları @import'un daha sürdürülebilir olduğunu iddia edebilir. Ancak, her @import size "link" yöntemini kullandığınız şekilde yeni bir HTTP isteğine mal olacaktır. Yani hız bağlamında daha hızlı değil. Ve "duskwuff" dediği gibi, aynı anda yüklenmez ki bu bir çöküştür.

@İmport kullandığım bir yer, bir sayfanın iki sürümünü İngilizce ve Fransızca yaptığım zamandır. Bir main.css kullanarak sayfamı İngilizce olarak oluşturacağım. Fransızca sürümünü oluşturduğumda, bir Fransızca stil sayfasına (main_fr.css) bağlayacağım. Fransızca stil sayfasının en üstünde main.css dosyasını içe aktaracağım ve daha sonra yalnızca Fransızca sürümde ihtiyacım olan parçalar için belirli kuralları yeniden tanımlayacağım.

Alıntı sahibi http://webdesign.about.com/od/beginningcss/f/css_import_link.htm

@İmport yönteminin temel amacı bir sayfada birden çok stil sayfası kullanmak, ancak <head> öğenizde yalnızca bir bağlantı kullanmaktır. Örneğin, bir şirketin sitedeki her sayfa için genel bir stil sayfası olabilir ve alt bölümler yalnızca bu alt bölüm için geçerli olan ek stillere sahip olabilir. Alt bölüm stil sayfasına bağlanarak ve bu stil sayfasının üst kısmındaki global stilleri içe aktararak, site ve her alt bölüm için tüm stilleri içeren devasa bir stil sayfası tutmanız gerekmez. Tek gereksinim, herhangi bir @import kuralının stil kurallarınızın geri kalanından önce gelmesi gerektiğidir. Ve kalıtımın hala bir sorun olabileceğini unutmayın.

Bazen satır içi yerine @import kullanmanız gerekir. 32 veya daha fazla css dosyası olan karmaşık bir uygulama üzerinde çalışıyorsanız ve IE9'u desteklemeniz gerekiyorsa, başka seçenek yoktur. IE9 ilk 31'den sonra herhangi bir css dosyasını yok sayar ve bu satır içi ve satır içi css'i içerir. Ancak, her sayfa diğer 31 sayfayı içe aktarabilir.

@İmport kullanmak için birçok İYİ neden vardır.

@İmport kullanmanın güçlü bir nedeni, tarayıcılar arası tasarım yapmaktır. İçe aktarılan sayfalar, genellikle, Netscape 4 veya daha eski seriler, Mac için Internet Explorer 5.2, Opera 6 ve daha eski sürümler ve PC için IE 3 ve 4 gibi çok eski tarayıcılar için belirli biçimlendirme uygulamanıza izin veren birçok eski tarayıcıdan gizlenir.

Bunu yapmak için base.css dosyanızda aşağıdakiler olabilir:

@import 'newerbrowsers.css';

body {
  font-size:13px;
}

İçe aktarılan özel sayfanızda (newerbrowsers.css) daha yeni basamaklı stili uygulamanız yeterlidir:

html body {
  font-size:1em;
}

"Em" birimlerini kullanmak, hem yazı tiplerinin hem de tasarımın kullanıcı ayarlarına göre genişlemesine olanak tanıdığından "px" birimlerinden daha üstündür; daha eski tarayıcılar piksel tabanlı (daha katıdır ve tarayıcı kullanıcı ayarlarında değiştirilemez) gibi daha iyi sonuçlar verir. . İçe aktarılan sayfa çoğu eski tarayıcı tarafından görülmez.

Öyle olabilir, kimin umurunda! Bazı daha eski antika hükümetlere veya kurumsal sistemlere gitmeye çalışın ve eski tarayıcıların kullanıldığını göreceksiniz. Ama gerçekten sadece iyi bir tasarım, çünkü bugün sevdiğiniz tarayıcı bir gün de eski ve modası geçmiş olacak. Sınırlı bir şekilde CSS kullanmak, artık sitenizle iyi çalışmayan daha büyük ve büyüyen bir kullanıcı aracısı grubuna sahip olduğunuz anlamına gelir.

@İmport kullanıldığında, tarayıcılar arası web sitesi uyumluluğunuz artık% 99,9 doygunluğa ulaşacaktır, çünkü çok sayıda eski tarayıcı içe aktarılan sayfaları okumaz. Html'leri için basit bir basit yazı tipi seti uygulamanızı garanti eder, ancak daha yeni ajanlar tarafından daha gelişmiş CSS kullanılır. Bu, yeni masaüstü tarayıcılarda gereken zengin görsel ekranlardan ödün vermeden içeriğin eski ajanlar için erişilebilir olmasını sağlar.

Unutmayın, modern tarayıcılar bir web sitesine yapılan ilk çağrıdan sonra HTML yapılarını ve CSS'yi çok iyi önbelleğe alır. Sunucuya yapılan birden fazla çağrı bir zamanlar tıkanıklık değildir.

Akıllı cihazlara yüklenen megabayt ve megabayt Javascript API'leri ve JSON ve sayfalar arasında tutarlı olmayan kötü tasarlanmış HTML biçimlendirmesi, günümüzde yavaş oluşturmanın ana sürücüsüdür. Ortalama Google haber sayfanız, yalnızca küçük bir metin oluşturmak için 6 megabayttan fazla ECMAScript'in üzerindedir! LOL

Birkaç kilobayt önbelleğe alınmış CSS ve daha küçük javascript ayak izlerine sahip tutarlı temiz HTML, javascript sirk hileleriyle manipüle etmeyi ve değiştirmeyi seçmediğiniz sürece tarayıcı hem tutarlı DOM işaretlemesini ve CSS'yi önbelleğe aldığından, bir kullanıcı aracısında yıldırım hızında görüntülenecektir.

Buradaki anahtarın aslında birden fazla CSS stil sayfası yazmanızın iki nedeni olduğunu düşünüyorum.

1. Web sitenizin farklı sayfaları farklı CSS tanımları gerektirdiğinden birden çok sayfa yazıyorsunuz. Ya da en azından hepsi diğer sayfaların gerektirdiği tüm CSS tanımlarını gerektirmez. Böylece, farklı sayfalara hangi sayfaların yükleneceğini optimize etmek ve çok fazla CSS tanımı yüklemekten kaçınmak için CSS dosyalarını bölebilirsiniz.
2. Akla gelen ikinci sebep, CSS'nizin, işlemek için sakar hale gelen ve büyük CSS dosyasının bakımını kolaylaştırmak için onları birden çok CSS dosyasına bölmeniz.

İlk nedenden dolayı, ek sayfa <link>geçerli olacaktır, çünkü bu, farklı sayfalar için farklı CSS dosyaları seti yüklemenize izin verir.

İkinci nedenden dolayı @import ifade en kullanışlı gibi görünür çünkü birden fazla CSS dosyası alırsınız, ancak yüklenen dosyalar her zaman aynıdır.

Yükleme süresi açısından farklı değildir. Tarayıcı, nasıl uygulandıklarına bakılmaksızın, ayrılmış CSS dosyalarını kontrol etmeli ve indirmelidir.

Eric Meyer'ın Reset CSS v2.0 gibi bir CSS RESET kullanıyorsanız, CSS'nizde @import kullanın, bu nedenle CSS'nizi uygulamadan önce iş yapar ve böylece çakışmaları önler.

@İmport en çok birden fazla cihaz için kod yazarken yararlı olduğunu düşünüyorum. Yalnızca söz konusu aygıtın stilini dahil etmek için koşullu bir ifade ekleyin, ardından yalnızca bir sayfa yüklenir. Yine de, ortak stil öğeleri eklemek için bağlantı etiketini kullanabilirsiniz.

Ekleyebileceğiniz bağlantılı stil sayfaları için "yüksek zirve" yaşadım. Bağlantılı Javascript herhangi bir sayıda eklemek benim ücretsiz host sağlayıcı için bir sorun değildi, dış stil sayfaları sayısını iki katına sonra bir çökme / yavaşlama var. Doğru kod örneği:

@import 'stylesheetB.css';

Bu nedenle, tasarımın zor kodlanmasına rağmen Nitram'ın belirttiği gibi iyi bir zihinsel haritaya sahip olmak için yararlı buluyorum. Yolunuz açık olsun. Ve eğer varsa, İngilizce dilbilgisi hatalarından özür dilerim.

@İmport'u kullanmak için, içe aktarılan her CSS dosyasını ayrı ayrı yüklediğinden ve sitenizi önemli ölçüde yavaşlatabildiğinden neredeyse hiçbir neden yoktur. CSS ile başa çıkmak için en uygun yolla ilgileniyorsanız (sayfa hızı söz konusu olduğunda), tüm CSS kodunuzla bu şekilde ilgilenmelisiniz :

• Tüm CSS dosyalarınızı açın ve her dosyanın kodunu kopyalayın
• Tüm kodu, sayfanızın HTML üstbilgisindeki tek bir STYLE etiketi arasına yapıştırın
• Büyük miktarda kodunuz yoksa veya özel bir gereksiniminiz olmadıkça CSS sunmak için asla CSS @import veya ayrı CSS dosyaları kullanmayın.

Burada daha ayrıntılı bilgi: http://www.giftofspeed.com/optimize-css-delivery/

Yukarıdakilerin en iyi çalışmasının nedeni, tarayıcının ele alması için daha az istek oluşturması ve ayrı dosyaları indirmek yerine hemen CSS oluşturmaya başlamasıdır.

Bu, bir PHP geliştiricisinin dışarı çıkmasına yardımcı olabilir. Aşağıdaki işlevler boşluk bırakacak, yorumları kaldıracak ve tüm CSS dosyalarınızı birleştirecektir. Ardından <style>, sayfa yüklenmeden önce kafasındaki bir etikete ekleyin .

Aşağıdaki işlev yorumları keser ve iletilen css değerini en aza indirir. Bir sonraki işlevle birlikte eşleştirilir.

<?php
function minifyCSS($string)
{
    // Minify CSS and strip comments

    # Strips Comments
    $string = preg_replace('!/\*.*?\*/!s','', $string);
    $string = preg_replace('/\n\s*\n/',"\n", $string);

    # Minifies
    $string = preg_replace('/[\n\r \t]/',' ', $string);
    $string = preg_replace('/ +/',' ', $string);
    $string = preg_replace('/ ?([,:;{}]) ?/','$1',$string);

    # Remove semicolon
    $string = preg_replace('/;}/','}',$string);

    # Return Minified CSS
    return $string;
}
?>

Bu işlevi belgenizin başında çağıracaksınız.

<?php
function concatenateCSS($cssFiles)
{
    // Load all relevant css files

    # concatenate all relevant css files
    $css = '';
    foreach ($cssFiles as $cssFile)
    {
        $css = $css . file_get_contents("$cssFile.css");
    }

    # minify all css
    $css = minifyCSS($css);
    echo "<style>$css</style>";
}
?>

İşlevi concatenateCSS()belge başlığınıza ekleyin . IE: yoluyla stil sayfalarınızın adlarını içeren bir dizi geçirin css/styles.css. .cssYukarıdaki fonksiyona otomatik olarak eklendiğinden , uzantıyı eklemenize gerek yoktur .

<head>
    <title></title>
    <?php
    $stylesheets = array(
        "bootstrap/css/bootstrap.min", 
        "css/owl-carousel.min", 
        "css/style"
        );
    concatenateCSS( $stylesheets );
    ?>
</head>