Usando @import en Cascading Style Sheets (CSS)

Existen varias maneiras de aplicar estilos de CSS a unha páxina web, incluíndo as follas de estilo externas ou incluso os estilos en liña . Se está a usar unha folla de estilo externa, que é a forma recomendada de dictar o aspecto dun documento HTML, un enfoque é usar @import.

A regra @import permítelle importantes follas de estilo externas no documento, xa sexa nunha páxina HTML ou mesmo noutros documentos CSS. O feito de romper moitos estilos nunha serie de ficheiros máis pequenos e enfocados (un para o deseño, outro para tipografía , outro para imaxes, etc.) ás veces pode facilmente xestionar eses arquivos e os diversos estilos que conteñen. Se desexa gozar deste beneficio, entón importar eses varios ficheiros é o que terá que facer para que todos funcionen para a visualización da súa páxina web.

Importando en HTML

Para usar a regra @import no seu HTML, engadirá o seguinte ao do documento:
:

url @import ("/ estilos / default.css");

Este código importará agora esta folla de estilo para usar nesta páxina HTML e poderá xestionar todos os seus estilos nese único ficheiro. A desvantaxe das follas de estilo importantes deste xeito é que este método non permite descargas paralelas. A páxina debe descargar unha folla de estilo completa antes de que se mova ao resto da páxina, incluídos os outros ficheiros CSS que está a importar usando este método. Isto terá un efecto negativo na velocidade da páxina e no rendemento da descarga. Tendo en conta o importante rendemento da páxina para o éxito do sitio web actual, este inconveniente por si só pode ser un motivo polo que desexa evitar usar @import.

Enfoque alternativo

Como alternativa ao uso de @import no teu HTML, podes vincular a ese ficheiro CSS coma este:

Isto funciona de forma similar ao @importo xa que permite administrar todo o CSS desde unha localización / ficheiro central, pero este método é preferible desde unha perspectiva de descarga. Se aínda queres segmentar diferentes tipos de estilos en ficheiros separados, podes continuar facelo e usar a funcionalidade @import dentro do teu arquivo mestre CSS. Isto significa que os teus ficheiros CSS externos aínda se poden xestionar de forma individual, pero como todos importan nun único CSS mestre, mellórase o rendemento.

Importando a CSS

Usando o exemplo de código de arriba, o ficheiro "default.css" úsase na súa páxina HTML. Dentro dese ficheiro CSS, terías varios estilos de páxina. Pode ter todos os estilos detallados na páxina, ou pode usar @import para separalos para facilitar a xestión. Unha vez máis, digamos que estamos a usar 4 ficheiros CSS separados: un para o deseño, outro para tipografía e outro para imaxes. O cuarto arquivo é o noso ficheiro "principal" que é o que enlaza a nosa páxina (para este exemplo, isto é "default.css"). Na parte superior deste arquivo mestre CSS podemos engadir as regras que se mostran a continuación:

url @import ('/ styles / layout.css');
url @import ('/ styles / type.css');
url @import ('/ styles / images.css');

Ten en conta que estas regras deben ser antes que o resto do contido do seu ficheiro CSS para que funcionen. Non podes ter outro estilo CSS antes de estas regras de importación.

Debaixo destas regras de importación, pode engadir calquera outro estilo de CSS que desexe ter na súa folla predefinida. Cando se cargue o ficheiro CSS principal, primeiro importará estes ficheiros por separado e engadirá os seus estilos na parte superior da folla de estilo. Despois terá todos os outros estilos debaixo destes importados, creando o ficheiro CSS completo que o navegador web usará para mostrar o seu sitio. Obterá o beneficio de xestionar ficheiros máis pequenos e centrados mentres aínda ten unha única folla de estilo ligada a ese HTML.

Usando a & # 64; importación para consultas multimedia

Unha cousa que pode considerar facelo separando as consultas multimedia dos seus sitios web para que os estilos do sitio sexan sensibles nun arquivo separado. Debido a que estes estilos de resposta poden ser confusos cando se ven xunto coas outras regras de estilo do seu sitio, ter-lles por conta propia nun arquivo diferente pode ser atractivo. Unha das preocupacións con este enfoque é que, dado que as súas regras de importación deben ser as primeiras, isto significa que as súas consultas multimedia se cargarían antes que o resto dos estilos do seu sitio. Ao crear un sitio de resposta móbil primeiro que teña en conta o rendemento, é probable que isto sexa un problema. Por este motivo, proponse que non separe os estilos de resposta dos seus sitios por separado e que use importar para traelos ao seu sitio. Si, pode parecer que hai beneficios de facelo, pero as desvantaxes superan eses beneficios.

¿Necesito usar & # 64; importar?

Non, non o fas. Moitos sitios simplemente amosan todos os seus estilos principais dentro dun arquivo e, tan grande como o ficheiro, pode manexarse ​​así (así é como o fago no meu propio traballo). Se atopas @import útil, entón pode ser parte do teu fluxo de traballo. Se non, podes crear páxinas web con seguridade que a túa folla de estilo única de todas as regras de CSS.

Apoio ao navegador

Os navegadores moi antigos teñen problemas con algunhas destas regras de importación, pero estes navegadores non son probables de ser un problema para vostedes nestes días. Isto é especialmente certo agora que o prazo de fin de vida das versións anteriores de Internet Explorer pasou. En última instancia, se decide empregar as regras de importación @ no seu HTML ou CSS, non debería executar problemas con versións antigas de navegadores web a menos que teña algunha estraña necesidade de admitir versións increíblemente antigas de IE.

Artigo orixinal de Jennifer Krynin. Editado por Jeremy Girard.