CSS is Awesome

A talk by Kevin Powell

What we'll cover

  • Modern CSS features
  • Container queries
  • CSS nesting
  • The :has() selector
  • Scroll-driven animations

Container Queries

Style elements based on their container's size, not just the viewport. 

.card-container {
  container-type: inline-size;
}

@container (width > 400px) {
  .card {
    display: grid;
    grid-template-columns: 1fr 2fr;
  }
}

The best CSS is the CSS you don't have to write.

CSS Nesting

.card {
  padding: 1rem;
  background: white;

  &:hover {
    box-shadow: 0 4px 12px rgb(0 0 0 / 0.1);
  }

  .card-title {
    font-weight: bold;
  }

  @media (width > 768px) {
    padding: 2rem;
  }
}

Thank you!

Questions?

@kevinpowell