Melhor maneira de incluir CSS? Por que usar @import?

Basicamente, estou me perguntando qual é a vantagem / objetivo de usar @importpara importar folhas de estilo para uma folha de estilo existente, em vez de apenas adicionar outra ...

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

para o cabeçalho do documento?

Do ponto de vista da velocidade da página, @importum arquivo CSS quase nunca deve ser usado, pois pode impedir o download simultâneo de folhas de estilo. Por exemplo, se a folha de estilo A contiver o texto:

@import url("stylesheetB.css");

o download da segunda folha de estilo poderá não começar até que a primeira folha de estilo tenha sido baixada. Se, por outro lado, as duas folhas de estilo forem referenciadas em <link>elementos na página HTML principal, ambas poderão ser baixadas ao mesmo tempo. Se as duas folhas de estilo estiverem sempre carregadas juntas, também poderá ser útil combiná-las em um único arquivo.

Ocasionalmente, há situações em que @importé apropriado, mas geralmente são a exceção, não a regra.

Vou bancar o advogado do diabo, porque odeio quando as pessoas concordam demais.

1. Se você precisar de uma folha de estilo que dependa de outra, use @import. Faça a otimização em uma etapa separada.

Há duas variáveis ​​para as quais você está otimizando a qualquer momento - o desempenho do seu código e o desempenho do desenvolvedor . Em muitos casos, se não na maioria dos casos, é mais importante tornar o desenvolvedor mais eficiente e só então tornar o código mais eficiente .

Se você tem uma folha de estilo que depende de outra, a coisa mais lógica a fazer é colocá-las em dois arquivos separados e usar @import. Isso fará o sentido mais lógico para a próxima pessoa que examinar o código.

(Quando essa dependência aconteceria? Na minha opinião, é muito raro - geralmente basta uma folha de estilo. No entanto, existem alguns lugares lógicos para colocar as coisas em diferentes arquivos CSS :)

• Tema: se você tiver diferentes esquemas de cores ou temas para a mesma página, eles poderão compartilhar alguns, mas não todos os componentes.
• Subcomponentes: um exemplo artificial - digamos que você tenha uma página de restaurante que inclua um menu. Se o menu for muito diferente do restante da página, será mais fácil mantê-lo se estiver em seu próprio arquivo.

Normalmente, as folhas de estilo são independentes, por isso é razoável incluí-las todas <link href>. No entanto, se eles são uma hierarquia dependente, você deve fazer o que faz mais sentido lógico.

Python usa importação; C usa incluem; JavaScript requer. CSS tem importação; quando precisar, use-o!

2. Quando você chegar ao ponto em que o site precisa ser escalonado, concatene todo o CSS.

Várias solicitações de CSS de qualquer tipo - seja por meio de links ou por meio de @imports - são uma prática recomendada para sites de alto desempenho. Quando você estiver no ponto em que a otimização é importante, todo o seu CSS deve fluir através de um minificador. Cssmin combina instruções de importação; como o @Brandon aponta, o grunt também tem várias opções para fazê-lo. ( Veja também esta pergunta ).

Quando você está no estágio minificado, <link>fica mais rápido, como as pessoas apontaram, então, no máximo, vincule a algumas folhas de estilo e não importe nenhuma, se possível.

Antes que o site atinja a escala de produção, é mais importante que o código seja organizado e lógico, do que um pouco mais rápido.

É melhor NÃO usar @importpara incluir CSS em uma página por motivos de velocidade. Veja este excelente artigo para saber por que não: http://www.stevesouders.com/blog/2009/04/09/dont-use-import/

Além disso, muitas vezes é mais difícil minificar e combinar arquivos css que são veiculados por meio da tag @import, porque os scripts minify não podem "separar" as linhas @import de outros arquivos css. Quando você os inclui como tags de link, você pode usar os módulos existentes do minify php / dotnet / java para fazer a minificação.

Então: use em <link />vez de @import.

usando o método link, as folhas de estilo são carregadas em paralelo (mais rápido e melhor) e quase todos os navegadores suportam o link

A importação carrega todos os arquivos css extras, um por um (mais lento), e pode fornecer Flash de conteúdo não estilizado

@Nebo Iznad Mišo Grgur

A seguir, estão todas as maneiras corretas de usar @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

Não há realmente muita diferença em adicionar uma folha de estilo css na cabeça em comparação ao uso da funcionalidade de importação. @importGeralmente, o uso é usado para encadear folhas de estilo para que uma possa ser facilmente estendida. Pode ser usado para trocar facilmente layouts de cores diferentes, por exemplo, em conjunto com algumas definições gerais de CSS. Eu diria que a principal vantagem / objetivo é a extensibilidade.

Concordo com o comentário do xbonez, pois a portabilidade e a manutenção são benefícios adicionais.

Eles são muito parecidos. Alguns podem argumentar que o @import é mais sustentável. No entanto, cada @import custará uma nova solicitação HTTP da mesma maneira que o método "link". Portanto, no contexto da velocidade, não é mais rápido. E como o "crepúsculo" disse, ele não carrega simultaneamente, o que é uma queda.

Um lugar onde eu uso @import é quando estou fazendo duas versões de uma página, inglês e francês. Vou construir minha página em inglês, usando o arquivo main.css. Quando criar a versão em francês, vincularei a uma folha de estilo em francês (main_fr.css). Na parte superior da folha de estilo francesa, importarei o main.css e depois redefinirei regras específicas para apenas as partes necessárias na versão francesa.

Citado em http://webdesign.about.com/od/beginningcss/f/css_import_link.htm

O principal objetivo do método @import é usar várias folhas de estilo em uma página, mas apenas um link em seu <cabeçalho>. Por exemplo, uma empresa pode ter uma folha de estilos global para todas as páginas do site, com as subseções com estilos adicionais que se aplicam apenas a essa subseção. Ao vincular à folha de estilo da subseção e importar os estilos globais na parte superior dessa folha de estilo, você não precisa manter uma folha de estilo gigantesca com todos os estilos do site e todas as subseções. O único requisito é que todas as regras de @import precisem vir antes do restante das regras de estilo. E lembre-se de que a herança ainda pode ser um problema.

Às vezes, você precisa usar @import em vez de inline. Se você estiver trabalhando em um aplicativo complexo com 32 ou mais arquivos css e precisar oferecer suporte ao IE9, não há opção. O IE9 ignora qualquer arquivo css após os primeiros 31 e isso inclui e css embutido. No entanto, cada planilha pode importar 31 outras.

Existem muitas BOAS razões para usar o @import.

Uma razão poderosa para usar o @import é fazer o design entre navegadores. As folhas importadas, em geral, estão ocultas em muitos navegadores mais antigos, o que permite aplicar formatação específica a navegadores muito antigos, como o Netscape 4 ou mais antigo, o Internet Explorer 5.2 para Mac, Opera 6 e versões mais antigas e IE 3 e 4 para PC.

Para fazer isso, em seu arquivo base.css, você pode ter o seguinte:

@import 'newerbrowsers.css';

body {
  font-size:13px;
}

Na planilha personalizada importada (newerbrowsers.css), basta aplicar o novo estilo em cascata:

html body {
  font-size:1em;
}

O uso de unidades "em" é superior às unidades "px", pois permite que as fontes e o design se expandam com base nas configurações do usuário, onde navegadores mais antigos se saem melhor com base em pixel (que são rígidos e não podem ser alterados nas configurações do usuário do navegador) . A planilha importada não seria vista pela maioria dos navegadores mais antigos.

Você pode sim, quem se importa! Tente acessar alguns sistemas corporativos ou governamentais antigos e antigos e você ainda verá os navegadores mais antigos usados. Mas é realmente apenas um bom design, porque o navegador que você ama hoje também será um dia antiquado e desatualizado. E usar CSS de maneira limitada significa que agora você tem um grupo ainda maior e crescente de user-agents que não funcionam bem com seu site.

Usando @import, a compatibilidade de sites entre navegadores alcançará 99,9% de saturação, simplesmente porque muitos navegadores mais antigos não lêem as folhas importadas. Ele garante que você aplique um conjunto de fontes simples básico para seu html, mas CSS mais avançado é usado por agentes mais recentes. Isso permite que o conteúdo seja acessível para agentes mais antigos sem comprometer as exibições visuais necessárias em navegadores de desktop mais recentes.

Lembre-se de que navegadores modernos armazenam em cache estruturas HTML e CSS extremamente bem após a primeira chamada para um site. Várias chamadas para o servidor não são o gargalo de antes.

Megabytes e megabytes de API Javascript e JSON carregados em dispositivos inteligentes e marcação HTML mal projetada que não é consistente entre as páginas é o principal fator de renderização lenta hoje. Sua página de notícias média do Google tem mais de 6 megabytes de ECMAScript apenas para renderizar um pouquinho de texto! ri muito

Alguns kilobytes de CSS em cache e HTML limpo e consistente com pegadas javascript menores serão renderizados em um agente do usuário na velocidade da luz, simplesmente porque o navegador armazena em cache a marcação DOM e o CSS consistentes, a menos que você opte por manipular e alterar isso por meio de truques de circo javascript.

Eu acho que a chave nisso são as duas razões pelas quais você está realmente escrevendo várias folhas de estilo CSS.

1. Você escreve várias planilhas porque as diferentes páginas do seu site exigem diferentes definições de CSS. Ou pelo menos nem todos eles exigem todas as definições de CSS exigidas por outras páginas. Assim, você divide os arquivos CSS para otimizar quais folhas são carregadas nas diferentes páginas e evitar o carregamento de muitas definições CSS.
2. A segunda razão que vem à mente é que seu CSS está ficando tão grande que é desajeitado de manipular e para facilitar a manutenção do arquivo CSS grande que você os divide em vários arquivos CSS.

Pela primeira razão, a <link>tag adicional seria aplicada, pois isso permite que você carregue um conjunto diferente de arquivos CSS para páginas diferentes.

Pela segunda razão, a @importinstrução aparece como a mais útil, porque você obtém vários arquivos CSS, mas os arquivos carregados são sempre os mesmos.

Da perspectiva do tempo de carregamento, não há diferenças. O navegador precisa verificar e baixar os arquivos CSS separados, independentemente de como eles são implementados.

Use @import no seu CSS se estiver usando um RESET CSS, como o Reset CSS v2.0 de Eric Meyer, para que ele funcione antes de aplicar seu CSS, evitando conflitos.

Acho que @import é mais útil ao escrever código para vários dispositivos. Inclua uma declaração condicional para incluir apenas o estilo do dispositivo em questão e apenas uma folha será carregada. Você ainda pode usar a tag link para adicionar quaisquer elementos de estilo comuns.

Eu experimentei um "pico alto" de folhas de estilo vinculadas que você pode adicionar. Embora a adição de qualquer número de Javascript vinculado não tenha sido um problema para o meu provedor de host gratuito, depois de dobrar o número de folhas de estilo externas, ocorreu uma falha / desaceleração. E o exemplo de código correto é:

@import 'stylesheetB.css';

Portanto, acho útil ter um bom mapa mental, como o Nitram mencionou, enquanto ainda codifica o design. Boa Sorte Vá com Deus. E perdoo por erros gramaticais em inglês, se houver.

Não há quase nenhuma razão para usar o @import, pois ele carrega cada arquivo CSS importado separadamente e pode tornar o site significativamente mais lento. Se você está interessado na maneira ideal de lidar com CSS (quando se trata de velocidade da página), é assim que você deve lidar com todo o seu código CSS:

• Abra todos os seus arquivos CSS e copie o código de cada arquivo
• Cole todo o código entre uma única tag STYLE no cabeçalho HTML da sua página
• Nunca use CSS @import ou separe os arquivos CSS para fornecer CSS, a menos que você tenha uma grande quantidade de código ou exista uma necessidade específica.

Informações mais detalhadas aqui: http://www.giftofspeed.com/optimize-css-delivery/

O motivo acima funciona melhor porque ele cria menos solicitações para o navegador lidar e pode começar imediatamente a renderizar o CSS em vez de baixar arquivos separados.

Isso pode ajudar um desenvolvedor PHP. As funções abaixo eliminam o espaço em branco, removem comentários e concatenam todos os seus arquivos CSS. Em seguida, insira-o em uma <style>etiqueta na cabeça antes do carregamento da página.

A função abaixo removerá os comentários e reduzirá os passados ​​em css. É emparelhado em conjunto com a próxima função.

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

Você chamará essa função no cabeçalho do seu 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>";
}
?>

Inclua a função concatenateCSS()no seu cabeçalho do documento. Passe em uma matriz com os nomes de suas folhas de estilo com seu caminho IE: css/styles.css. Você não precisa adicionar a extensão, .csspois ela é adicionada automaticamente na função acima.

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