Cara terbaik untuk memasukkan CSS? Mengapa menggunakan @import?

Pada dasarnya saya bertanya-tanya apa keuntungan / tujuan menggunakan @importuntuk mengimpor stylesheet ke stylesheet yang ada versus hanya menambahkan ...

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

ke kepala dokumen?

Dari sudut pandang kecepatan halaman, @importdari file CSS seharusnya hampir tidak pernah digunakan, karena dapat mencegah stylesheet diunduh secara bersamaan. Misalnya, jika stylesheet A berisi teks:

@import url("stylesheetB.css");

maka unduhan stylesheet kedua mungkin tidak dimulai sampai stylesheet pertama telah diunduh. Sebaliknya, jika kedua stylesheet direferensikan dalam <link>elemen-elemen di halaman HTML utama, keduanya dapat diunduh secara bersamaan. Jika kedua stylesheet selalu dimuat bersama, akan sangat membantu jika Anda hanya menggabungkannya menjadi satu file.

Kadang-kadang ada situasi di mana @importsesuai, tetapi mereka umumnya pengecualian, bukan aturan.

Aku akan berperan sebagai advokat iblis, karena aku benci kalau orang terlalu setuju.

1. Jika Anda membutuhkan stylesheet yang bergantung pada yang lain, gunakan @import. Lakukan optimasi dalam langkah terpisah.

Ada dua variabel yang Anda optimalkan pada waktu tertentu - kinerja kode Anda, dan kinerja pengembang . Dalam banyak kasus, jika bukan sebagian besar kasus, lebih penting untuk membuat pengembang lebih efisien, dan hanya kemudian membuat kode lebih berkinerja baik .

Jika Anda memiliki satu stylesheet yang bergantung pada yang lain, hal yang paling logis untuk dilakukan adalah meletakkannya dalam dua file terpisah dan menggunakan @import. Itu akan masuk akal paling logis untuk orang berikutnya yang melihat kode.

(Kapan ketergantungan seperti itu terjadi? Agak jarang, menurut saya - biasanya satu stylesheet sudah cukup. Namun, ada beberapa tempat logis untuk meletakkan sesuatu di file CSS yang berbeda :)

• Mereka: Jika Anda memiliki skema warna atau tema yang berbeda untuk halaman yang sama, mereka mungkin berbagi beberapa, tetapi tidak semua komponen.
• Subkomponen: Contoh yang dibuat-buat - misalnya Anda memiliki halaman restoran yang menyertakan menu. Jika menu ini sangat berbeda dari halaman lainnya, akan lebih mudah untuk mempertahankannya jika itu ada di file sendiri.

Biasanya stylesheet bersifat independen, jadi masuk akal untuk memasukkan semuanya menggunakan <link href>. Namun, jika mereka adalah hierarki dependen, Anda harus melakukan hal yang paling masuk akal untuk dilakukan.

Python menggunakan impor; Penggunaan C meliputi; JavaScript membutuhkan. CSS telah mengimpor; ketika Anda membutuhkannya, gunakan!

2. Setelah Anda sampai pada titik di mana situs perlu untuk skala, gabungkan semua CSS.

Beberapa permintaan CSS dalam bentuk apa pun - baik melalui tautan atau melalui @import - adalah praktik yang buruk untuk situs web berkinerja tinggi. Setelah Anda berada di titik di mana optimasi penting, semua CSS Anda harus mengalir melalui sebuah minifier. Cssmin menggabungkan pernyataan impor; seperti yang ditunjukkan @Brandon, grunt memiliki banyak opsi untuk melakukannya juga. ( Lihat juga pertanyaan ini ).

Setelah Anda berada di tahap minified, <link>lebih cepat, seperti yang ditunjukkan orang, jadi paling banyak tautan ke beberapa stylesheet dan jangan @import apa pun jika memungkinkan.

Sebelum situs mencapai skala produksi, lebih penting bahwa kode diatur dan logis, daripada berjalan sedikit lebih cepat.

Cara terbaik adalah TIDAK menggunakan @importuntuk memasukkan CSS dalam halaman karena alasan kecepatan. Lihat artikel yang bagus ini untuk mempelajari mengapa tidak: http://www.stevesouders.com/blog/2009/04/09/dont-use-import/

Juga seringkali lebih sulit untuk memperkecil dan menggabungkan file css yang disajikan melalui tag @import, karena skrip minify tidak dapat "menghilangkan" baris-baris @import dari file css lainnya. Saat Anda memasukkannya sebagai <tag tautan Anda dapat menggunakan modul php / dotnet / java minify yang ada untuk melakukan minifikasi.

Jadi: gunakan <link />bukan @import.

menggunakan metode tautan, stylesheet dimuat secara paralel (lebih cepat dan lebih baik), dan hampir semua browser mendukung tautan

impor memuat file css tambahan satu per satu (lebih lambat), dan dapat memberi Anda Flash Of Unstyled Content

@Nebo Iznad Mišo Grgur

Berikut ini semua cara yang benar untuk menggunakan impor

@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);

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

Tidak ada banyak perbedaan dalam menambahkan stylesheet css di kepala dibandingkan menggunakan fungsi impor. Menggunakan @importumumnya digunakan untuk chaining stylesheet sehingga seseorang dapat dengan mudah diperpanjang. Ini dapat digunakan untuk dengan mudah bertukar tata letak warna yang berbeda misalnya dalam hubungannya dengan beberapa definisi css umum. Saya akan mengatakan keunggulan / tujuan utama adalah diperpanjang.

Saya setuju dengan komentar xbonez juga bahwa portabilitas dan rawatan merupakan manfaat tambahan.

Mereka sangat mirip. Beberapa orang mungkin berpendapat bahwa @import lebih mudah dikelola. Namun, setiap impor akan dikenakan biaya permintaan HTTP baru dengan cara yang sama seperti menggunakan metode "tautan". Jadi dalam konteks kecepatan itu tidak lebih cepat. Dan seperti kata "duskwuff", itu tidak memuat secara bersamaan yang merupakan kejatuhan.

Satu tempat di mana saya menggunakan @import adalah ketika saya melakukan dua versi halaman, Inggris dan Perancis. Saya akan membangun halaman saya dalam bahasa Inggris, menggunakan main.css. Ketika saya membuat versi Perancis, saya akan menautkan ke stylesheet Prancis (main_fr.css). Di bagian atas stylesheet Prancis, saya akan mengimpor main.css, dan kemudian mendefinisikan kembali aturan khusus untuk hanya bagian yang saya perlukan berbeda dalam versi Perancis.

Dikutip dari http://webdesign.about.com/od/beginningcss/f/css_import_link.htm

Tujuan utama metode impor adalah untuk menggunakan beberapa style sheet pada suatu halaman, tetapi hanya satu tautan di <head> Anda. Misalnya, sebuah perusahaan mungkin memiliki lembar gaya global untuk setiap halaman di situs, dengan sub-bagian memiliki gaya tambahan yang hanya berlaku untuk sub-bagian itu. Dengan menautkan ke lembar gaya sub-bagian dan mengimpor gaya global di bagian atas lembar gaya itu, Anda tidak harus mempertahankan lembar gaya raksasa dengan semua gaya untuk situs dan setiap sub-bagian. Satu-satunya persyaratan adalah bahwa setiap aturan @import harus ada sebelum aturan gaya Anda yang lain. Dan ingat warisan itu masih bisa menjadi masalah.

Terkadang Anda harus menggunakan @import sebagai ganti inline. Jika Anda bekerja pada aplikasi kompleks yang memiliki 32 file css atau lebih dan Anda harus mendukung IE9 tidak ada pilihan. IE9 mengabaikan file css setelah 31 pertama dan ini termasuk dan inline css. Namun, setiap lembar dapat mengimpor 31 lembar lainnya.

Ada banyak alasan BAIK untuk menggunakan @import.

Salah satu alasan kuat untuk menggunakan @import adalah untuk melakukan desain lintas-browser. Lembar yang diimpor, secara umum, disembunyikan dari banyak browser lama, yang memungkinkan Anda menerapkan pemformatan khusus untuk browser yang sangat lama seperti Netscape 4 atau seri yang lebih lama, Internet Explorer 5.2 untuk Mac, Opera 6 dan yang lebih lama, dan IE 3 dan 4 untuk PC.

Untuk melakukan ini, dalam file base.css Anda, Anda dapat memiliki yang berikut ini:

@import 'newerbrowsers.css';

body {
  font-size:13px;
}

Di lembar khusus yang Anda impor (newerbrowsers.css) cukup terapkan gaya kaskade yang lebih baru:

html body {
  font-size:1em;
}

Menggunakan unit "em" lebih unggul daripada unit "px" karena memungkinkan font dan desain untuk meregangkan berdasarkan pengaturan pengguna, di mana sebagai browser yang lebih tua lebih baik dengan berbasis pixel (yang kaku dan tidak dapat diubah dalam pengaturan pengguna browser) . Lembar yang diimpor tidak akan terlihat oleh sebagian besar browser lama.

Anda mungkin begitu, siapa yang peduli! Coba buka beberapa sistem pemerintahan atau perusahaan kuno yang lebih besar dan Anda masih akan melihat browser yang lebih lama digunakan. Tapi itu benar-benar hanya desain yang bagus, karena browser yang kamu cintai hari ini juga suatu hari akan menjadi kuno dan ketinggalan jaman juga. Dan menggunakan CSS secara terbatas berarti Anda sekarang memiliki kelompok agen pengguna yang lebih besar dan terus bertambah yang tidak berfungsi dengan baik dengan situs Anda.

Menggunakan @import kompatibilitas situs web lintas-browser Anda sekarang akan mencapai 99,9% saturasi hanya karena begitu banyak browser lama tidak akan membaca lembar yang diimpor. Ini menjamin Anda menerapkan font sederhana dasar untuk html mereka, tetapi CSS yang lebih maju digunakan oleh agen yang lebih baru. Hal ini memungkinkan konten dapat diakses oleh agen yang lebih tua tanpa mengorbankan tampilan visual yang kaya diperlukan di browser desktop yang lebih baru.

Ingat, browser modern menyimpan struktur HTML dan CSS dengan sangat baik setelah panggilan pertama ke situs web. Beberapa panggilan ke server bukan hambatan seperti dulu.

Megabita dan megabita API Javascript dan JSON yang diunggah ke perangkat pintar dan markup HTML yang dirancang dengan buruk yang tidak konsisten antar halaman adalah pendorong utama rendering lambat saat ini. Rata-rata halaman berita Google Anda lebih dari 6 megabyte dari ECMAScript hanya untuk membuat sedikit teks! LOL

Beberapa kilobyte dari CSS yang di-cache dan HTML bersih yang konsisten dengan jejak javascript yang lebih kecil akan di-render di agen-pengguna dalam kecepatan kilat hanya karena browser menyimpan cache markup DOM dan CSS yang konsisten, kecuali Anda memilih untuk memanipulasi dan mengubahnya melalui trik sirkus javascript.

Saya pikir kunci dalam hal ini adalah dua alasan mengapa Anda sebenarnya menulis beberapa style sheet CSS.

1. Anda menulis beberapa lembar karena berbagai halaman situs web Anda memerlukan definisi CSS yang berbeda. Atau setidaknya tidak semuanya membutuhkan semua definisi CSS yang dibutuhkan oleh satu halaman lainnya. Jadi Anda membagi file CSS untuk mengoptimalkan lembar apa yang dimuat pada halaman yang berbeda dan menghindari memuat terlalu banyak definisi CSS.
2. Alasan kedua yang terlintas dalam pikiran adalah bahwa CSS Anda semakin besar sehingga menjadi canggung untuk ditangani dan untuk membuatnya lebih mudah untuk mempertahankan file CSS besar Anda membaginya menjadi beberapa file CSS.

Untuk alasan pertama, <link>tag tambahan akan berlaku karena ini memungkinkan Anda untuk memuat set file CSS yang berbeda untuk halaman yang berbeda.

Untuk alasan kedua, @importpernyataan tersebut muncul sebagai yang paling praktis karena Anda mendapatkan banyak file CSS tetapi file yang dimuat selalu sama.

Dari perspektif waktu pemuatan tidak ada yang berbeda. Peramban harus memeriksa dan mengunduh file CSS yang terpisah, tidak peduli bagaimana penerapannya.

Gunakan @import di CSS Anda jika Anda menggunakan RESET CSS, seperti Reset Reset CSS v2.0 dari Eric Meyer, jadi itu berfungsi sebelum menerapkan CSS Anda, sehingga mencegah konflik.

Saya pikir @import paling berguna saat menulis kode untuk beberapa perangkat. Sertakan pernyataan bersyarat untuk hanya menyertakan gaya untuk perangkat yang dimaksud, kemudian hanya satu lembar yang dimuat. Anda masih dapat menggunakan tag tautan untuk menambahkan elemen gaya umum.

Saya mengalami "puncak tinggi" dari stylesheet tertaut yang dapat Anda tambahkan. Sambil menambahkan sejumlah Javascript yang tertaut bukan masalah bagi penyedia host gratis saya, setelah menggandakan jumlah stylesheet eksternal saya mendapat crash / memperlambat. Dan contoh kode yang benar adalah:

@import 'stylesheetB.css';

Jadi, saya merasa berguna untuk memiliki peta mental yang baik, seperti yang disebutkan Nitram, sementara masih dalam pengodean desain. Hasil positif. Dan saya mengampuni kesalahan tata bahasa Inggris, jika ada.

Hampir tidak ada alasan untuk menggunakan @import karena memuat setiap file CSS yang diimpor secara terpisah dan dapat memperlambat situs Anda secara signifikan. Jika Anda tertarik pada cara optimal untuk berurusan dengan CSS (ketika datang ke kecepatan halaman), ini adalah bagaimana Anda harus berurusan dengan semua kode CSS Anda:

• Buka semua file CSS Anda dan salin kode setiap file
• Rekatkan semua kode di antara satu tag GAYA di tajuk HTML halaman Anda
• Jangan pernah gunakan CSS @import atau pisahkan file CSS untuk mengirim CSS kecuali Anda memiliki kode dalam jumlah besar atau ada kebutuhan khusus untuk itu.

Informasi lebih rinci di sini: http://www.giftofspeed.com/optimize-css-delivery/

Alasan di atas berfungsi paling baik adalah karena itu membuat lebih sedikit permintaan untuk browser untuk berurusan dan dapat segera mulai rendering CSS daripada mengunduh file yang terpisah.

Ini mungkin membantu pengembang PHP keluar. Fungsi di bawah ini akan menghapus spasi, menghapus komentar, dan menggabungkan semua file CSS Anda. Lalu masukkan ke <style>tag di kepala sebelum memuat halaman.

Fungsi di bawah ini akan menghapus komentar dan meminimalkan css yang diteruskan. Dipasangkan dengan fungsi berikutnya.

<?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;
}
?>

Anda akan memanggil fungsi ini di kepala dokumen Anda.

<?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>";
}
?>

Sertakan fungsi concatenateCSS()di kepala dokumen Anda. Lulus dalam sebuah array dengan nama-nama stylesheet Anda dengan jalurnya IE: css/styles.css. Anda tidak diharuskan untuk menambahkan ekstensi .csskarena ekstensi ditambahkan secara otomatis pada fungsi di atas.

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