{"id":723,"date":"2024-04-22T23:23:08","date_gmt":"2024-04-23T02:23:08","guid":{"rendered":"https:\/\/thiagorossi.com.br\/blog\/?p=723"},"modified":"2025-11-07T13:11:53","modified_gmt":"2025-11-07T16:11:53","slug":"import-no-css","status":"publish","type":"post","link":"https:\/\/thiagorossi.com.br\/blog\/import-no-css\/","title":{"rendered":"Import no CSS"},"content":{"rendered":"<span class=\"span-reading-time rt-reading-time\" style=\"display: block;\"><span class=\"rt-label rt-prefix\">Tempo de leitura: <\/span> <span class=\"rt-time\"> 4<\/span> <span class=\"rt-label rt-postfix\">minutos<\/span><\/span>\n<p class=\"has-medium-font-size wp-block-paragraph\"><strong>Import no CSS<\/strong>: O CSS (Cascading Style Sheets) oferece diversas ferramentas para organizar e modularizar o c\u00f3digo. Uma dessas ferramentas \u00e9 a diretiva <strong><code>@import<\/code><\/strong>, que permite incluir o conte\u00fado de um arquivo CSS dentro de outro.<\/p>\n\n\n\n<p class=\"has-medium-font-size wp-block-paragraph\">Historicamente, o <code>@import<\/code> foi uma forma de estruturar projetos. No entanto, devido a severas implica\u00e7\u00f5es de <strong>performance<\/strong>, ele se tornou um recurso <strong>altamente desaconselhado<\/strong> no desenvolvimento web moderno.<\/p>\n\n\n\n<p class=\"has-medium-font-size wp-block-paragraph\">Neste artigo, exploraremos o que \u00e9 o <code>@import<\/code>, sua sintaxe e, o mais importante, o porqu\u00ea de ele ser inferior \u00e0 sua alternativa, a tag <code>&lt;link&gt;<\/code> do HTML.<\/p>\n\n\n\n<div style=\"height:35px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading has-large-font-size\">1. O Que \u00e9 e Como Funciona o <code>@import<\/code>?<\/h2>\n\n\n\n<p class=\"has-medium-font-size wp-block-paragraph\">O <code>@import<\/code> \u00e9 uma diretiva CSS que instrui o navegador a buscar regras de estilo em outro arquivo CSS e inclu\u00ed-las no arquivo atual.<\/p>\n\n\n\n<div style=\"height:35px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">Sintaxe e Coloca\u00e7\u00e3o<\/h3>\n\n\n\n<p class=\"has-medium-font-size wp-block-paragraph\">A sintaxe \u00e9 simples e deve ser colocada <strong>no topo<\/strong> do arquivo CSS, antes de qualquer outra regra de estilo (exceto <code>@charset<\/code>).<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">CSS<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/* styles.css *\/\n\n@import url('reset.css'); \/* Importa os estilos de reset *\/\n@import 'componentes\/botoes.css'; \/* Outra sintaxe v\u00e1lida *\/\n\n\/* Regras de estilo deste arquivo come\u00e7am aqui *\/\nbody {\n  font-family: Arial, sans-serif;\n}\n<\/code><\/pre>\n\n\n\n<div style=\"height:35px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">Vantagens (Contexto Hist\u00f3rico)<\/h3>\n\n\n\n<p class=\"has-medium-font-size wp-block-paragraph\">Em projetos grandes, a modularidade oferecida pelo <code>@import<\/code> era vista como uma vantagem de organiza\u00e7\u00e3o:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li class=\"has-medium-font-size\"><strong>Organiza\u00e7\u00e3o:<\/strong> Permite dividir o c\u00f3digo em arquivos l\u00f3gicos (reset, vari\u00e1veis, componentes).<\/li>\n\n\n\n<li class=\"has-medium-font-size\"><strong>Reutiliza\u00e7\u00e3o:<\/strong> Estilos comuns podem ser agrupados em m\u00f3dulos separados.<\/li>\n<\/ul>\n\n\n\n<div style=\"height:35px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading has-large-font-size\">2. A Desvantagem Cr\u00edtica: Performance<\/h2>\n\n\n\n<p class=\"has-medium-font-size wp-block-paragraph\">A principal raz\u00e3o pela qual o <code>@import<\/code> \u00e9 obsoleto \u00e9 o seu impacto negativo no tempo de carregamento da p\u00e1gina.<\/p>\n\n\n\n<div style=\"height:35px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">O Problema do Carregamento em S\u00e9rie (Serial Loading)<\/h3>\n\n\n\n<p class=\"has-medium-font-size wp-block-paragraph\">Quando um navegador encontra um arquivo CSS, ele tenta baix\u00e1-lo o mais r\u00e1pido poss\u00edvel.<\/p>\n\n\n\n<ol start=\"1\" class=\"wp-block-list\">\n<li class=\"has-medium-font-size\"><strong>Com <code>&lt;link><\/code> (M\u00e9todo Recomendado):<\/strong> O navegador encontra v\u00e1rias tags <code>&lt;link><\/code> no HTML e come\u00e7a a baixar todos os arquivos CSS <strong>em paralelo<\/strong> (simultaneamente). Isso acelera o carregamento.<\/li>\n\n\n\n<li class=\"has-medium-font-size\"><strong>Com <code>@import<\/code>:<\/strong> O navegador primeiro deve baixar e analisar o arquivo CSS principal. Somente <strong>depois<\/strong> de ler o comando <code>@import<\/code> \u00e9 que ele inicia a requisi\u00e7\u00e3o HTTP para baixar o segundo arquivo. Isso cria uma <strong>cadeia de requisi\u00e7\u00f5es<\/strong> (serial), bloqueando a renderiza\u00e7\u00e3o e atrasando a exibi\u00e7\u00e3o do conte\u00fado ao usu\u00e1rio.<\/li>\n<\/ol>\n\n\n\n<div style=\"height:35px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p class=\"has-medium-font-size wp-block-paragraph\"><strong>Regra pr\u00e1tica:<\/strong> No mundo da web, tempo de carregamento lento significa pior experi\u00eancia do usu\u00e1rio e pior ranqueamento no Google.<\/p>\n<\/blockquote>\n\n\n\n<div style=\"height:35px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading has-large-font-size\">3. A Alternativa Superior: HTML <code>&lt;link&gt;<\/code><\/h2>\n\n\n\n<p class=\"has-medium-font-size wp-block-paragraph\">Para a grande maioria dos casos de uso, o <strong>CSS Externo<\/strong> atrav\u00e9s da tag <code>&lt;link&gt;<\/code> no HTML \u00e9 o m\u00e9todo de importa\u00e7\u00e3o preferencial.<\/p>\n\n\n\n<figure class=\"wp-block-table has-medium-font-size\"><table class=\"has-fixed-layout\"><thead><tr><td><strong>Recurso<\/strong><\/td><td><strong>@import (Diretiva CSS)<\/strong><\/td><td><strong>&lt;link&gt; (Tag HTML)<\/strong><\/td><\/tr><\/thead><tbody><tr><td><strong>Local de Inclus\u00e3o<\/strong><\/td><td>Dentro de um arquivo CSS.<\/td><td>Dentro da tag <code>&lt;head&gt;<\/code> do HTML.<\/td><\/tr><tr><td><strong>Performance<\/strong><\/td><td>Carregamento <strong>serial<\/strong> (em cadeia). Lento.<\/td><td>Carregamento <strong>paralelo<\/strong> (simult\u00e2neo). R\u00e1pido.<\/td><\/tr><tr><td><strong>Padr\u00e3o Moderno<\/strong><\/td><td><strong>Desaconselhado.<\/strong><\/td><td><strong>Padr\u00e3o da Ind\u00fastria.<\/strong><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<div style=\"height:35px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p class=\"has-medium-font-size wp-block-paragraph\"><strong>Como Substituir o <code>@import<\/code>:<\/strong><\/p>\n\n\n\n<p class=\"has-medium-font-size wp-block-paragraph\">Se voc\u00ea tinha tr\u00eas arquivos (reset, bot\u00f5es, main), em vez de import\u00e1-los via <code>@import<\/code>, voc\u00ea os adiciona todos diretamente no HTML:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">HTML<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;head&gt;\n  &lt;link rel=\"stylesheet\" href=\"reset.css\"&gt;\n  &lt;link rel=\"stylesheet\" href=\"componentes\/botoes.css\"&gt;\n  &lt;link rel=\"stylesheet\" href=\"main.css\"&gt;\n&lt;\/head&gt;\n<\/code><\/pre>\n\n\n\n<div style=\"height:35px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading has-large-font-size\">4. Solu\u00e7\u00f5es Modernas de Modularidade (Pr\u00e9-processadores)<\/h2>\n\n\n\n<p class=\"has-medium-font-size wp-block-paragraph\">Para resolver o problema de modularidade e organiza\u00e7\u00e3o em grandes projetos (sem o custo de performance), os pr\u00e9-processadores e as ferramentas de <em>bundling<\/em> se tornaram a solu\u00e7\u00e3o padr\u00e3o:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li class=\"has-medium-font-size\"><strong>Sass\/Less\/Stylus:<\/strong> Usam diretivas como <code>@use<\/code> (Sass) ou <code>@import<\/code> (Less\/Stylus) para combinar os arquivos <strong>durante a compila\u00e7\u00e3o<\/strong>, e n\u00e3o no navegador. O resultado final \u00e9 um \u00fanico arquivo CSS grande e otimizado que \u00e9 carregado via <code>&lt;link><\/code>.<\/li>\n\n\n\n<li class=\"has-medium-font-size\"><strong>Web Bundlers (Webpack, Vite):<\/strong> Agregam todos os arquivos CSS e m\u00f3dulos em um ou poucos arquivos finais (<code>bundle.css<\/code>), garantindo carregamento r\u00e1pido.<\/li>\n<\/ul>\n\n\n\n<div style=\"height:35px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading has-large-font-size\">\u2705 Conclus\u00e3o Import no CSS<\/h2>\n\n\n\n<p class=\"has-medium-font-size wp-block-paragraph\">Embora o <code>@import<\/code> seja uma ferramenta que permite a organiza\u00e7\u00e3o do c\u00f3digo, seu custo em performance devido ao carregamento serial \u00e9 inaceit\u00e1vel para sites de produ\u00e7\u00e3o.<\/p>\n\n\n\n<p class=\"has-medium-font-size wp-block-paragraph\"><strong>Regra Final:<\/strong> Para linkar arquivos CSS externos, <strong>sempre utilize a tag <code>&lt;link&gt;<\/code> no seu HTML<\/strong>. Reserve o uso do <code>@import<\/code> apenas para bibliotecas que o exigem ou para ambientes de desenvolvimento com pr\u00e9-processadores.<\/p>\n\n\n\n<p class=\"has-medium-font-size wp-block-paragraph\">Toda jornada tem um in\u00edcio, e o in\u00edcio para se tornar um desenvolvedor web \u00e9 dominar as seguintes tecnologias, que voc\u00ea encontra aqui mesmo:<\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-8f761849 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-full\"><a href=\"\/category\/html\"><img loading=\"lazy\" decoding=\"async\" width=\"758\" height=\"426\" src=\"https:\/\/thiagorossi.com.br\/blog\/wp-content\/uploads\/2024\/04\/html.webp\" alt=\"HTML\" class=\"wp-image-600\" srcset=\"https:\/\/thiagorossi.com.br\/blog\/wp-content\/uploads\/2024\/04\/html.webp 758w, https:\/\/thiagorossi.com.br\/blog\/wp-content\/uploads\/2024\/04\/html-300x169.webp 300w\" sizes=\"auto, (max-width: 758px) 100vw, 758px\" \/><\/a><figcaption class=\"wp-element-caption\">HTML<\/figcaption><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-full\"><a href=\"\/category\/css\"><img loading=\"lazy\" decoding=\"async\" width=\"758\" height=\"426\" src=\"https:\/\/thiagorossi.com.br\/blog\/wp-content\/uploads\/2024\/04\/Capa-Artigos-Linux.webp\" alt=\"CSS\" class=\"wp-image-702\" srcset=\"https:\/\/thiagorossi.com.br\/blog\/wp-content\/uploads\/2024\/04\/Capa-Artigos-Linux.webp 758w, https:\/\/thiagorossi.com.br\/blog\/wp-content\/uploads\/2024\/04\/Capa-Artigos-Linux-300x169.webp 300w\" sizes=\"auto, (max-width: 758px) 100vw, 758px\" \/><\/a><figcaption class=\"wp-element-caption\">CSS<\/figcaption><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-full\"><a href=\"\/category\/javascript\"><img loading=\"lazy\" decoding=\"async\" width=\"758\" height=\"426\" src=\"https:\/\/thiagorossi.com.br\/blog\/wp-content\/uploads\/2024\/04\/javascript.webp\" alt=\"Javascript\" class=\"wp-image-804\" srcset=\"https:\/\/thiagorossi.com.br\/blog\/wp-content\/uploads\/2024\/04\/javascript.webp 758w, https:\/\/thiagorossi.com.br\/blog\/wp-content\/uploads\/2024\/04\/javascript-300x169.webp 300w\" sizes=\"auto, (max-width: 758px) 100vw, 758px\" \/><\/a><figcaption class=\"wp-element-caption\">JavaScript<\/figcaption><\/figure>\n<\/div>\n<\/div>\n\n\n\n<p class=\"has-medium-font-size wp-block-paragraph\">E se voc\u00ea gosta do nosso conte\u00fado, n\u00e3o deixe de contribuir adquirindo os servi\u00e7os e produtos dos nossos apoiadores e empresas que somos associados:<\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-8f761849 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/hostinger.com.br\/?REFERRALCODE=1THIAGO62\"><img loading=\"lazy\" decoding=\"async\" width=\"300\" height=\"250\" src=\"https:\/\/thiagorossi.com.br\/blog\/wp-content\/uploads\/2024\/03\/hostinger.png\" alt=\"Hospedagem Hostinger\" class=\"wp-image-92\"\/><\/a><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/amzn.to\/3SNDYlc\"><img loading=\"lazy\" decoding=\"async\" width=\"300\" height=\"250\" src=\"https:\/\/thiagorossi.com.br\/blog\/wp-content\/uploads\/2024\/08\/ofertas-amazon.webp\" alt=\"Ofertas Amazon\" class=\"wp-image-1308\"\/><\/a><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/amzn.to\/3SNKmt0\"><img loading=\"lazy\" decoding=\"async\" width=\"300\" height=\"250\" src=\"https:\/\/thiagorossi.com.br\/blog\/wp-content\/uploads\/2024\/08\/amazonprime.webp\" alt=\"Amazon Prime\" class=\"wp-image-1307\"\/><\/a><\/figure>\n<\/div>\n<\/div>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p><span class=\"span-reading-time rt-reading-time\" style=\"display: block;\"><span class=\"rt-label rt-prefix\">Tempo de leitura: <\/span> <span class=\"rt-time\"> 4<\/span> <span class=\"rt-label rt-postfix\">minutos<\/span><\/span>Import no CSS: O CSS (Cascading Style Sheets) oferece diversas ferramentas para organizar e modularizar&#8230;<\/p>\n","protected":false},"author":1,"featured_media":702,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7],"tags":[],"class_list":["post-723","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-css","wpcat-7-id"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.7 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Import no CSS - BLOG THIAGO ROSSI<\/title>\n<meta name=\"description\" content=\"Import no CSS: Neste artigo, vamos explorar a fundo o que \u00e9 o @import, sua sintaxe, vantagens, desvantagens e como ele funciona.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/thiagorossi.com.br\/blog\/import-no-css\/\" \/>\n<meta property=\"og:locale\" content=\"pt_BR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Import no CSS - BLOG THIAGO ROSSI\" \/>\n<meta property=\"og:description\" content=\"Import no CSS: Neste artigo, vamos explorar a fundo o que \u00e9 o @import, sua sintaxe, vantagens, desvantagens e como ele funciona.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/thiagorossi.com.br\/blog\/import-no-css\/\" \/>\n<meta property=\"og:site_name\" content=\"BLOG THIAGO ROSSI\" \/>\n<meta property=\"article:published_time\" content=\"2024-04-23T02:23:08+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-11-07T16:11:53+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/thiagorossi.com.br\/blog\/wp-content\/uploads\/2024\/04\/Capa-Artigos-Linux.webp\" \/>\n\t<meta property=\"og:image:width\" content=\"758\" \/>\n\t<meta property=\"og:image:height\" content=\"426\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/webp\" \/>\n<meta name=\"author\" content=\"Thiago Rossi\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Thiago Rossi\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. tempo de leitura\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/import-no-css\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/import-no-css\\\/\"},\"author\":{\"name\":\"Thiago Rossi\",\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/#\\\/schema\\\/person\\\/5f28286948ec2afdeb2e044a2196cd87\"},\"headline\":\"Import no CSS\",\"datePublished\":\"2024-04-23T02:23:08+00:00\",\"dateModified\":\"2025-11-07T16:11:53+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/import-no-css\\\/\"},\"wordCount\":660,\"publisher\":{\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/import-no-css\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/wp-content\\\/uploads\\\/2024\\\/04\\\/Capa-Artigos-Linux.webp\",\"articleSection\":[\"CSS\"],\"inLanguage\":\"pt-BR\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/import-no-css\\\/\",\"url\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/import-no-css\\\/\",\"name\":\"Import no CSS - BLOG THIAGO ROSSI\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/import-no-css\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/import-no-css\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/wp-content\\\/uploads\\\/2024\\\/04\\\/Capa-Artigos-Linux.webp\",\"datePublished\":\"2024-04-23T02:23:08+00:00\",\"dateModified\":\"2025-11-07T16:11:53+00:00\",\"description\":\"Import no CSS: Neste artigo, vamos explorar a fundo o que \u00e9 o @import, sua sintaxe, vantagens, desvantagens e como ele funciona.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/import-no-css\\\/#breadcrumb\"},\"inLanguage\":\"pt-BR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/import-no-css\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/import-no-css\\\/#primaryimage\",\"url\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/wp-content\\\/uploads\\\/2024\\\/04\\\/Capa-Artigos-Linux.webp\",\"contentUrl\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/wp-content\\\/uploads\\\/2024\\\/04\\\/Capa-Artigos-Linux.webp\",\"width\":758,\"height\":426,\"caption\":\"CSS\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/import-no-css\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Import no CSS\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/\",\"name\":\"THIAGO ROSSI\",\"description\":\"Mais de 20 anos de experi\u00eancia no mercado de TI!\",\"publisher\":{\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/#organization\"},\"alternateName\":\"TR | CURSO WEB DEV\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"pt-BR\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/#organization\",\"name\":\"THIAGO ROSSI\",\"alternateName\":\"TR | CURSO WEB DEV\",\"url\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/wp-content\\\/uploads\\\/2024\\\/04\\\/new-logo.webp\",\"contentUrl\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/wp-content\\\/uploads\\\/2024\\\/04\\\/new-logo.webp\",\"width\":300,\"height\":300,\"caption\":\"THIAGO ROSSI\"},\"image\":{\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/linkedin.com\\\/in\\\/thiagox86\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/#\\\/schema\\\/person\\\/5f28286948ec2afdeb2e044a2196cd87\",\"name\":\"Thiago Rossi\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/bb28b4665f4162bab9fbef8db5a7f00597f79ab90ece9a67189bb6bce78d5786?s=96&d=retro&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/bb28b4665f4162bab9fbef8db5a7f00597f79ab90ece9a67189bb6bce78d5786?s=96&d=retro&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/bb28b4665f4162bab9fbef8db5a7f00597f79ab90ece9a67189bb6bce78d5786?s=96&d=retro&r=g\",\"caption\":\"Thiago Rossi\"},\"description\":\"Com mais de 20 anos de jornada na tecnologia, minha trajet\u00f3ria evoluiu do ensino t\u00e9cnico \u00e0 arquitetura de sistemas complexos. Hoje, foco minha expertise no desenvolvimento de solu\u00e7\u00f5es de Intelig\u00eancia Artificial nativa e an\u00e1lise de dados p\u00fablicos, utilizando o ecossistema PHP para transformar dados brutos em transpar\u00eancia e efici\u00eancia. Como autor e desenvolvedor, acredito na democratiza\u00e7\u00e3o do conhecimento. Essa vis\u00e3o resultou em uma biblioteca de mais de 530 artigos gratuitos, cobrindo desde a base do WebDev e Infraestrutura at\u00e9 os bastidores da ind\u00fastria de Jogos e IA. No universo de Game Design, sou autor do livro \\\"GDD \u2013 O Guia Definitivo\\\" e documento ativamente meus processos atrav\u00e9s de DevLogs, unindo rigor t\u00e9cnico e criatividade em projetos desenvolvidos com GDevelop 5. Meu compromisso \u00e9 conectar engenharia de ponta com as reais oportunidades do mercado de tecnologia.\",\"sameAs\":[\"https:\\\/\\\/thiagorossi.com.br\\\/blog\",\"https:\\\/\\\/instagram.com\\\/thiagorossix86\",\"https:\\\/\\\/linkedin.com\\\/in\\\/thiagox86\"],\"url\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/author\\\/thiagorossi\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Import no CSS - BLOG THIAGO ROSSI","description":"Import no CSS: Neste artigo, vamos explorar a fundo o que \u00e9 o @import, sua sintaxe, vantagens, desvantagens e como ele funciona.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/thiagorossi.com.br\/blog\/import-no-css\/","og_locale":"pt_BR","og_type":"article","og_title":"Import no CSS - BLOG THIAGO ROSSI","og_description":"Import no CSS: Neste artigo, vamos explorar a fundo o que \u00e9 o @import, sua sintaxe, vantagens, desvantagens e como ele funciona.","og_url":"https:\/\/thiagorossi.com.br\/blog\/import-no-css\/","og_site_name":"BLOG THIAGO ROSSI","article_published_time":"2024-04-23T02:23:08+00:00","article_modified_time":"2025-11-07T16:11:53+00:00","og_image":[{"width":758,"height":426,"url":"https:\/\/thiagorossi.com.br\/blog\/wp-content\/uploads\/2024\/04\/Capa-Artigos-Linux.webp","type":"image\/webp"}],"author":"Thiago Rossi","twitter_card":"summary_large_image","twitter_misc":{"Escrito por":"Thiago Rossi","Est. tempo de leitura":"5 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/thiagorossi.com.br\/blog\/import-no-css\/#article","isPartOf":{"@id":"https:\/\/thiagorossi.com.br\/blog\/import-no-css\/"},"author":{"name":"Thiago Rossi","@id":"https:\/\/thiagorossi.com.br\/blog\/#\/schema\/person\/5f28286948ec2afdeb2e044a2196cd87"},"headline":"Import no CSS","datePublished":"2024-04-23T02:23:08+00:00","dateModified":"2025-11-07T16:11:53+00:00","mainEntityOfPage":{"@id":"https:\/\/thiagorossi.com.br\/blog\/import-no-css\/"},"wordCount":660,"publisher":{"@id":"https:\/\/thiagorossi.com.br\/blog\/#organization"},"image":{"@id":"https:\/\/thiagorossi.com.br\/blog\/import-no-css\/#primaryimage"},"thumbnailUrl":"https:\/\/thiagorossi.com.br\/blog\/wp-content\/uploads\/2024\/04\/Capa-Artigos-Linux.webp","articleSection":["CSS"],"inLanguage":"pt-BR"},{"@type":"WebPage","@id":"https:\/\/thiagorossi.com.br\/blog\/import-no-css\/","url":"https:\/\/thiagorossi.com.br\/blog\/import-no-css\/","name":"Import no CSS - BLOG THIAGO ROSSI","isPartOf":{"@id":"https:\/\/thiagorossi.com.br\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/thiagorossi.com.br\/blog\/import-no-css\/#primaryimage"},"image":{"@id":"https:\/\/thiagorossi.com.br\/blog\/import-no-css\/#primaryimage"},"thumbnailUrl":"https:\/\/thiagorossi.com.br\/blog\/wp-content\/uploads\/2024\/04\/Capa-Artigos-Linux.webp","datePublished":"2024-04-23T02:23:08+00:00","dateModified":"2025-11-07T16:11:53+00:00","description":"Import no CSS: Neste artigo, vamos explorar a fundo o que \u00e9 o @import, sua sintaxe, vantagens, desvantagens e como ele funciona.","breadcrumb":{"@id":"https:\/\/thiagorossi.com.br\/blog\/import-no-css\/#breadcrumb"},"inLanguage":"pt-BR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/thiagorossi.com.br\/blog\/import-no-css\/"]}]},{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/thiagorossi.com.br\/blog\/import-no-css\/#primaryimage","url":"https:\/\/thiagorossi.com.br\/blog\/wp-content\/uploads\/2024\/04\/Capa-Artigos-Linux.webp","contentUrl":"https:\/\/thiagorossi.com.br\/blog\/wp-content\/uploads\/2024\/04\/Capa-Artigos-Linux.webp","width":758,"height":426,"caption":"CSS"},{"@type":"BreadcrumbList","@id":"https:\/\/thiagorossi.com.br\/blog\/import-no-css\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/thiagorossi.com.br\/blog\/"},{"@type":"ListItem","position":2,"name":"Import no CSS"}]},{"@type":"WebSite","@id":"https:\/\/thiagorossi.com.br\/blog\/#website","url":"https:\/\/thiagorossi.com.br\/blog\/","name":"THIAGO ROSSI","description":"Mais de 20 anos de experi\u00eancia no mercado de TI!","publisher":{"@id":"https:\/\/thiagorossi.com.br\/blog\/#organization"},"alternateName":"TR | CURSO WEB DEV","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/thiagorossi.com.br\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"pt-BR"},{"@type":"Organization","@id":"https:\/\/thiagorossi.com.br\/blog\/#organization","name":"THIAGO ROSSI","alternateName":"TR | CURSO WEB DEV","url":"https:\/\/thiagorossi.com.br\/blog\/","logo":{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/thiagorossi.com.br\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/thiagorossi.com.br\/blog\/wp-content\/uploads\/2024\/04\/new-logo.webp","contentUrl":"https:\/\/thiagorossi.com.br\/blog\/wp-content\/uploads\/2024\/04\/new-logo.webp","width":300,"height":300,"caption":"THIAGO ROSSI"},"image":{"@id":"https:\/\/thiagorossi.com.br\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/linkedin.com\/in\/thiagox86"]},{"@type":"Person","@id":"https:\/\/thiagorossi.com.br\/blog\/#\/schema\/person\/5f28286948ec2afdeb2e044a2196cd87","name":"Thiago Rossi","image":{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/secure.gravatar.com\/avatar\/bb28b4665f4162bab9fbef8db5a7f00597f79ab90ece9a67189bb6bce78d5786?s=96&d=retro&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/bb28b4665f4162bab9fbef8db5a7f00597f79ab90ece9a67189bb6bce78d5786?s=96&d=retro&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/bb28b4665f4162bab9fbef8db5a7f00597f79ab90ece9a67189bb6bce78d5786?s=96&d=retro&r=g","caption":"Thiago Rossi"},"description":"Com mais de 20 anos de jornada na tecnologia, minha trajet\u00f3ria evoluiu do ensino t\u00e9cnico \u00e0 arquitetura de sistemas complexos. Hoje, foco minha expertise no desenvolvimento de solu\u00e7\u00f5es de Intelig\u00eancia Artificial nativa e an\u00e1lise de dados p\u00fablicos, utilizando o ecossistema PHP para transformar dados brutos em transpar\u00eancia e efici\u00eancia. Como autor e desenvolvedor, acredito na democratiza\u00e7\u00e3o do conhecimento. Essa vis\u00e3o resultou em uma biblioteca de mais de 530 artigos gratuitos, cobrindo desde a base do WebDev e Infraestrutura at\u00e9 os bastidores da ind\u00fastria de Jogos e IA. No universo de Game Design, sou autor do livro \"GDD \u2013 O Guia Definitivo\" e documento ativamente meus processos atrav\u00e9s de DevLogs, unindo rigor t\u00e9cnico e criatividade em projetos desenvolvidos com GDevelop 5. Meu compromisso \u00e9 conectar engenharia de ponta com as reais oportunidades do mercado de tecnologia.","sameAs":["https:\/\/thiagorossi.com.br\/blog","https:\/\/instagram.com\/thiagorossix86","https:\/\/linkedin.com\/in\/thiagox86"],"url":"https:\/\/thiagorossi.com.br\/blog\/author\/thiagorossi\/"}]}},"_links":{"self":[{"href":"https:\/\/thiagorossi.com.br\/blog\/wp-json\/wp\/v2\/posts\/723","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/thiagorossi.com.br\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/thiagorossi.com.br\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/thiagorossi.com.br\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/thiagorossi.com.br\/blog\/wp-json\/wp\/v2\/comments?post=723"}],"version-history":[{"count":1,"href":"https:\/\/thiagorossi.com.br\/blog\/wp-json\/wp\/v2\/posts\/723\/revisions"}],"predecessor-version":[{"id":4394,"href":"https:\/\/thiagorossi.com.br\/blog\/wp-json\/wp\/v2\/posts\/723\/revisions\/4394"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/thiagorossi.com.br\/blog\/wp-json\/wp\/v2\/media\/702"}],"wp:attachment":[{"href":"https:\/\/thiagorossi.com.br\/blog\/wp-json\/wp\/v2\/media?parent=723"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/thiagorossi.com.br\/blog\/wp-json\/wp\/v2\/categories?post=723"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/thiagorossi.com.br\/blog\/wp-json\/wp\/v2\/tags?post=723"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}