Modern CSS Guide 2024

Modern Layout Techniques

Flexbox Layout

Modern approach for one-dimensional layouts:

.flex-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}

CSS Grid

Powerful two-dimensional layout system:

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

Modern CSS Features

CSS Variables (Custom Properties)

:root {
  --primary-color: #2563eb;
  --spacing: 1rem;
}

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

Container Queries

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

Modern Animations

Keyframe Animations

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.element {
  animation: fadeIn 0.3s ease-in-out;
}

Transitions

.button {
  transition: all 0.2s ease;
}

.button:hover {
  transform: translateY(-2px);
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

Responsive Design

Modern Media Queries

/* Mobile First Approach */
.card {
  padding: 1rem;
}

@media (min-width: 768px) {
  .card {
    padding: 2rem;
  }
}

/* Dark Mode */
@media (prefers-color-scheme: dark) {
  :root {
    --bg-color: #1a1a1a;
    --text-color: #ffffff;
  }
}

CSS Best Practices