Il modo migliore per includere CSS? Perché usare @import?

Fondamentalmente mi chiedo quale sia il vantaggio / lo scopo dell'utilizzo @importper importare fogli di stile in un foglio di stile esistente rispetto al solo aggiungerne un altro ...

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

alla testa del documento?

Dal punto di vista della velocità della pagina, @importda un file CSS non dovrebbe quasi mai essere usato, poiché può impedire il download simultaneo di fogli di stile. Ad esempio, se il foglio di stile A contiene il testo:

@import url("stylesheetB.css");

quindi il download del secondo foglio di stile potrebbe non iniziare fino a quando non è stato scaricato il primo foglio di stile. Se, d'altra parte, entrambi i fogli di stile fanno riferimento a <link>elementi nella pagina HTML principale, entrambi possono essere scaricati contemporaneamente. Se entrambi i fogli di stile vengono sempre caricati insieme, può anche essere utile combinarli semplicemente in un singolo file.

Occasionalmente ci sono situazioni in cui @importè appropriato, ma sono generalmente l'eccezione, non la regola.

Interpreterò l'avvocato del diavolo, perché lo odio quando le persone sono troppo d'accordo.

1. Se hai bisogno di un foglio di stile che dipende da un altro, usa @import. Esegui l'ottimizzazione in un passaggio separato.

Esistono due variabili per le quali stai ottimizzando in qualsiasi momento: le prestazioni del tuo codice e le prestazioni dello sviluppatore . In molti, se non nella maggior parte dei casi, è più importante rendere lo sviluppatore più efficiente e solo allora rendere il codice più performante .

Se hai un foglio di stile che dipende da un altro, la cosa più logica da fare è metterli in due file separati e usare @import. Ciò avrà il senso più logico per la prossima persona che guarda il codice.

(Quando accadrebbe una dipendenza del genere? È piuttosto raro, secondo me - di solito è sufficiente un foglio di stile. Tuttavia, ci sono alcuni posti logici per mettere le cose in diversi file CSS :)

• Temi: se hai combinazioni di colori o temi diversi per la stessa pagina, potrebbero condividerne alcuni, ma non tutti i componenti.
• Sottocomponenti: un esempio inventato: supponiamo che tu abbia una pagina di ristorante che include un menu. Se il menu è molto diverso dal resto della pagina, sarà più facile da mantenere se si trova nel suo file.

Di solito i fogli di stile sono indipendenti, quindi è ragionevole includerli tutti usando <link href>. Tuttavia, se sono una gerarchia dipendente, dovresti fare la cosa che ha il senso più logico da fare.

Python utilizza l'importazione; C usi includono; JavaScript ha richiesto. CSS ha importazione; quando ne hai bisogno, usalo!

2. Una volta arrivato al punto in cui il sito deve essere ridimensionato, concatena tutti i CSS.

Molteplici richieste CSS di qualsiasi tipo, sia tramite link che tramite @imports, sono una cattiva pratica per i siti Web ad alte prestazioni. Una volta che sei nel punto in cui l'ottimizzazione conta, tutto il tuo CSS dovrebbe fluire attraverso un minificatore. Cssmin combina dichiarazioni di importazione; come sottolinea @Brandon, grunt ha anche più opzioni per farlo. ( Vedi anche questa domanda ).

Una volta che sei nella fase ridotta, <link>è più veloce, come hanno sottolineato le persone, quindi al massimo collegalo ad alcuni fogli di stile e non importare nessuno se possibile.

Prima che il sito raggiunga la scala di produzione, è più importante che il codice sia organizzato e logico, piuttosto che andare leggermente più veloce.

Si consiglia di NON utilizzare @importper includere CSS in una pagina per motivi di velocità. Leggi questo eccellente articolo per sapere perché no: http://www.stevesouders.com/blog/2009/04/09/dont-use-import/

Inoltre è spesso più difficile minimizzare e combinare i file CSS serviti tramite il tag @import, perché gli script di minimizzazione non possono "staccare" le righe @import da altri file CSS. Quando li includi come tag <link, puoi usare i moduli phify / dotnet / java minify esistenti per eseguire la minimizzazione.

Quindi: usa <link />invece di @import.

usando il metodo link, i fogli di stile vengono caricati in parallelo (più veloce e migliore) e quasi tutti i browser supportano il link

import carica tutti i file CSS aggiuntivi uno per uno (più lento) e potrebbe fornire Flash di contenuti non stilati

@Nebo Iznad Mišo Grgur

Di seguito sono riportati tutti i modi corretti per utilizzare @import

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

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

Non c'è molta differenza nell'aggiungere un foglio di stile CSS nella testa rispetto all'uso della funzionalità di importazione. utilizzando@import viene generalmente utilizzato per concatenare i fogli di stile in modo da poter essere facilmente estesi. Potrebbe essere utilizzato per scambiare facilmente diversi layout di colore, ad esempio in combinazione con alcune definizioni generali di CSS. Direi che il principale vantaggio / scopo è l'estensibilità.

Concordo anche con il commento di xbonez in quanto la portabilità e la manutenibilità sono ulteriori vantaggi.

Sono molto simili. Alcuni potrebbero sostenere che @import è più gestibile. Tuttavia, ogni @import ti costerà una nuova richiesta HTTP allo stesso modo dell'utilizzo del metodo "link". Quindi nel contesto della velocità non è più veloce. E come diceva "duskwuff", non si carica contemporaneamente che è una caduta.

Un posto dove uso @import è quando sto realizzando due versioni di una pagina, inglese e francese. Costruirò la mia pagina in inglese, usando un main.css. Quando creerò la versione francese, collegherò ad un foglio di stile francese (main_fr.css). Nella parte superiore del foglio di stile francese, importerò main.css e quindi ridefinirò regole specifiche solo per le parti di cui ho bisogno diverse nella versione francese.

Citato da http://webdesign.about.com/od/beginningcss/f/css_import_link.htm

Lo scopo principale del metodo @import è utilizzare più fogli di stile su una pagina, ma solo un link nella tua <head>. Ad esempio, una società potrebbe avere un foglio di stile globale per ogni pagina del sito, con sottosezioni con stili aggiuntivi che si applicano solo a quella sottosezione. Collegandosi al foglio di stile della sottosezione e importando gli stili globali nella parte superiore di quel foglio di stile, non è necessario mantenere un foglio di stile gigantesco con tutti gli stili per il sito e ogni sottosezione. L'unico requisito è che qualsiasi regola @import debba precedere il resto delle regole di stile. E ricorda che l'eredità può ancora essere un problema.

A volte devi usare @import invece di inline. Se stai lavorando su un'applicazione complessa che ha 32 o più file CSS e devi supportare IE9 non c'è scelta. IE9 ignora qualsiasi file CSS dopo i primi 31 e questo include e inline CSS. Tuttavia, ogni foglio può importarne altri 31.

Ci sono molti buoni motivi per usare @import.

Un motivo valido per l'utilizzo di @import è la progettazione cross-browser. I fogli importati, in generale, sono nascosti da molti browser meno recenti, il che consente di applicare una formattazione specifica per browser molto vecchi come Netscape 4 o serie precedenti, Internet Explorer 5.2 per Mac, Opera 6 e precedenti e IE 3 e 4 per PC.

Per fare ciò, nel tuo file base.css potresti avere quanto segue:

@import 'newerbrowsers.css';

body {
  font-size:13px;
}

Nel tuo foglio personalizzato importato (newerbrowsers.css) applica semplicemente il nuovo stile a cascata:

html body {
  font-size:1em;
}

L'uso di unità "em" è superiore alle unità "px" in quanto consente di estendere sia i caratteri che il design in base alle impostazioni dell'utente, laddove i browser meno recenti funzionano meglio con i pixel (che sono rigidi e non possono essere modificati nelle impostazioni dell'utente del browser) . Il foglio importato non verrebbe visto dalla maggior parte dei browser più vecchi.

Puoi farlo, chi se ne frega! Prova ad andare in alcuni grandi sistemi governativi o aziendali antiquati e vedrai ancora quei browser più vecchi usati. Ma è davvero un buon design, perché il browser che ami oggi sarà anche un giorno antiquato e obsoleto. E l'uso dei CSS in modo limitato significa che ora hai un gruppo ancora più ampio e crescente di user-agent che non funzionano bene con il tuo sito.

Utilizzando @import la compatibilità del tuo sito web tra browser ora raggiungerà una saturazione del 99,9% semplicemente perché molti browser meno recenti non leggeranno i fogli importati. Ti garantisce di applicare un set di caratteri semplice di base per il loro html, ma CSS più avanzati sono usati dagli agenti più recenti. Ciò consente al contenuto di essere accessibile per gli agenti più vecchi senza compromettere i ricchi display visivi necessari nei browser desktop più recenti.

Ricorda, i browser moderni memorizzano nella cache strutture HTML e CSS estremamente bene dopo la prima chiamata a un sito web. Più chiamate al server non rappresentano il collo di bottiglia di una volta.

Megabyte e megabyte di API Javascript e JSON caricati su dispositivi intelligenti e markup HTML mal progettato che non è coerente tra le pagine è oggi il principale driver del rendering lento. La tua pagina di notizie Google media è di oltre 6 megabyte di ECMAScript solo per rendere un po 'di testo! LOL

Alcuni kilobyte di CSS memorizzati nella cache e HTML pulito coerente con impronte javascript più piccole renderanno in un user-agent alla velocità della luce semplicemente perché il browser memorizza sia markup DOM sia CSS coerenti, a meno che tu non scelga di manipolarlo e modificarlo tramite trucchi circo javascript.

Penso che la chiave in questo sia i due motivi per cui stai effettivamente scrivendo più fogli di stile CSS.

1. Scrivi più fogli perché le diverse pagine del tuo sito Web richiedono definizioni CSS diverse. O almeno non tutte richiedono tutte le definizioni CSS richieste da un'altra pagina. Quindi dividi i file CSS per ottimizzare quali fogli vengono caricati sulle diverse pagine ed evitare di caricare troppe definizioni CSS.
2. Il secondo motivo che viene in mente è che il tuo CSS sta diventando così grande che diventa goffo da gestire e per rendere più semplice la gestione del file CSS di grandi dimensioni, li dividi in più file CSS.

Per la prima ragione l'addizionale <link> si applicherebbe il tag aggiuntivo in quanto ciò consente di caricare diversi set di file CSS per pagine diverse.

Per il secondo motivo, l' @importistruzione appare come la più utile perché si ottengono più file CSS ma i file caricati sono sempre gli stessi.

Dal punto di vista del tempo di caricamento non c'è differenza. Il browser deve controllare e scaricare i file CSS separati, indipendentemente dalla modalità di implementazione.

Usa @import nel tuo CSS se stai usando un RESET CSS, come il Reset CSS v2.0 di Eric Meyer, quindi fa il suo lavoro prima di applicare il tuo CSS, evitando così conflitti.

Penso che @import sia molto utile quando si scrive codice per più dispositivi. Includi un'istruzione condizionale per includere solo lo stile per il dispositivo in questione, quindi viene caricato solo un foglio. Puoi comunque utilizzare il tag link per aggiungere elementi di stile comuni.

Ho riscontrato un "picco elevato" di fogli di stile collegati che è possibile aggiungere. Mentre l'aggiunta di un numero qualsiasi di Javascript collegato non è stato un problema per il mio provider host gratuito, dopo aver raddoppiato il numero di fogli di stile esterni ho avuto un arresto anomalo / rallentamento. E il giusto esempio di codice è:

@import 'stylesheetB.css';

Quindi, lo trovo utile per avere una buona mappa mentale, come menzionato da Nitram, mentre sto ancora programmando il progetto. Godspeed. E mi scuso per eventuali errori grammaticali inglesi, se presenti.

Non c'è quasi motivo di usare @import in quanto carica separatamente ogni singolo file CSS importato e può rallentare significativamente il tuo sito. Se sei interessato al modo ottimale di gestire i CSS (quando si tratta della velocità della pagina), ecco come dovresti gestire tutto il tuo codice CSS:

• Apri tutti i tuoi file CSS e copia il codice di ogni singolo file
• Incolla tutto il codice tra un singolo tag STYLE nell'intestazione HTML della tua pagina
• Non utilizzare mai @import CSS o file CSS separati per fornire CSS a meno che non si disponga di una grande quantità di codice o non sia necessario.

Informazioni più dettagliate qui: http://www.giftofspeed.com/optimize-css-delivery/

Il motivo di cui sopra funziona meglio perché crea meno richieste da gestire per il browser e può immediatamente iniziare il rendering del CSS invece di scaricare file separati.

Questo potrebbe aiutare uno sviluppatore PHP. Le funzioni seguenti rimuoveranno lo spazio bianco, rimuoveranno i commenti e concateneranno tutti i tuoi file CSS. Quindi inserirlo in un <style>tag nella testa prima del caricamento della pagina.

La seguente funzione eliminerà i commenti e minimizzerà il css passato. È associato in combinazione con la funzione successiva.

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

Chiamerai questa funzione in testa al tuo documento.

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

Includi la funzione concatenateCSS()nella testa del documento. Passare in un array con i nomi dei fogli di stile con il suo percorso di IE: css/styles.css. Non è necessario aggiungere l'estensione .csspoiché viene aggiunta automaticamente nella funzione sopra.

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