10 CSS Tips Every Developer Should Know

CSS can be frustrating, but it’s also incredibly powerful. Here are 10 tips that have changed the way I write styles.

1. CSS Grid for complex layouts

Forget Flexbox for two-dimensional layouts:

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

2. CSS Variables for theming

Define your colors once and use them everywhere:

:root {
  --primary-color: #3b82f6;
  --text-color: #1f2937;
  --bg-color: #ffffff;
}

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

3. Aspect ratio without JavaScript

Keep perfect proportions:

.video-container {
  aspect-ratio: 16 / 9;
  width: 100%;
}

4. Scroll snap for carousels

Create smooth carousels without libraries:

.carousel {
  display: flex;
  overflow-x: scroll;
  scroll-snap-type: x mandatory;
}

.carousel-item {
  scroll-snap-align: start;
  flex: none;
}

5. Clamp() for responsive typography

Typography that adapts automatically:

h1 {
  font-size: clamp(1.5rem, 4vw, 3rem);
}

6. Object-fit for images

Full control over how images are displayed:

.hero-image {
  width: 100%;
  height: 400px;
  object-fit: cover;
  object-position: center;
}

7. CSS counters for automatic numbering

Automatically number elements:

.steps {
  counter-reset: step-counter;
}

.step::before {
  counter-increment: step-counter;
  content: counter(step-counter) ". ";
}

8. Logical properties for internationalization

Prepare your CSS for RTL languages:

.sidebar {
  margin-inline-start: 1rem; /* margin-left in LTR, margin-right in RTL */
  padding-block: 1rem; /* padding-top and padding-bottom */
}

9. Container queries (experimental)

Styles based on the container, not the viewport:

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

10. Cascade layers for better organization

Control specificity with layers:

@layer base {
  h1 { font-size: 2rem; }
}

@layer components {
  .title { font-size: 3rem; }
}

Bonus: Debugging with CSS

Quickly visualize the layout:

* {
  outline: 1px solid red;
}

Conclusion

CSS is constantly evolving. These tips will help you write cleaner, more maintainable, and more modern code.

Which of these tips do you find most useful? Do you know any other tricks I should include in a follow-up post?

Share your favorite tips in the comments! 💬