Multiplos arquivos de CSS

Múltiplas folhas CSS. Dividir o CSS em vários arquivos para organização. A ordem importa: o último pode sobrescrever os anteriores.

Múltiplos arquivos CSS (folhas de estilo)

Em vez de ter um único style.css gigante, você pode dividir em vários arquivos menores, cada um com uma função. Isso deixa tudo:

• mais organizado
• mais fácil de manter
• mais profissional

Como usar vários CSS

Você conecta todos no HTML assim:

<link rel="stylesheet" href="base.css">

<link rel="stylesheet" href="layout.css">

<link rel="stylesheet" href="components.css">

Eles são lidos de cima pra baixo. Se tiver conflito, o que vem depois ganha.

Forma comum de organizar (bem usada mesmo)

base.css: reset, fontes, estilos básicos (body, p, h1)

layout.css: estrutura da página, header, footer, grid, container

components.css: botões, cards, menus, coisas reutilizáveis

theme.css (cores.css): cores, modo claro/escuro, identidade visual

Outra forma (alternativa):

Você também pode usar dentro do CSS:

@import url("base.css");

@import url("layout.css");

Preferencia ao <link> no HTML — é mais performático.