Thủ thuật CSS nâng cao cho Developer

Những thủ thuật CSS nâng cao

Các technique CSS hữu ích giúp bạn viết code hiệu quả hơn.

1. CSS Custom Properties (Variables)

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

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

2. CSS Grid Auto-fit

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

3. Clamp() Function

.responsive-text {
  font-size: clamp(1rem, 2.5vw, 2rem);
}

4. Container Queries

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

@container (min-width: 400px) {
  .card-title {
    font-size: 1.5rem;
  }
}

5. Logical Properties

.element {
  margin-inline: 1rem; /* margin-left + margin-right */
  padding-block: 0.5rem; /* padding-top + padding-bottom */
}