Modern CSS techniques

CSS has evolved tremendously. Let's explore modern features that make styling easier and more powerful.

CSS Grid

Create complex layouts with ease:

.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
}

Style components based on their container size:

@container (min-width: 400px) {
  .card {
    display: flex;
  }
}

Create maintainable, themeable designs:

:root {
  --primary-color: #007bff;
  --spacing: 1rem;
}

.button {
  background: var(--primary-color);
  padding: var(--spacing);
}

Use modern selectors for cleaner code:

/* :has() selector */
.card:has(img) {
  padding: 0;
}

/* :is() selector */
:is(h1, h2, h3) {
  font-family: 'Fira Code', monospace;
}

Modern CSS provides powerful tools for creating beautiful, responsive designs with less code.