marco.vilella
← Voltar ao blog

CSS moderno sem frameworks: custom properties e grid

CSS moderno sem frameworks: custom properties e grid

Nao precisa de Tailwind para ter um site bonito. CSS puro evoluiu muito.

Custom Properties (variaveis CSS)

:root {
  --bg: #f8f9fa;
  --text: #1a1a2e;
  --accent: #2563eb;
  --radius: 12px;
}

Mudar o tema inteiro e questao de trocar algumas variaveis.

CSS Grid

Grid e perfeito para layouts de portfolio:

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 24px;
}

Responsivo sem media queries!

CSS Modules no Next.js

Cada componente tem seu proprio arquivo .module.css, evitando conflitos de nomes:

import styles from './Card.module.css';

export function Card() {
  return <div className={styles.card}>...</div>;
}

Conclusao

CSS moderno e poderoso o suficiente para a maioria dos projetos. Frameworks sao opcionais.

CSS moderno sem frameworks: custom properties e grid | Blog - Marco Vilella