DEV Community

Alex Chen
Alex Chen

Posted on

15 CSS Tricks That Save Me Hours Every Week

15 CSS Tricks That Save Me Hours Every Week

CSS has evolved. These aren't hacks — they're modern features you should be using.

1. Container Queries (Finally!) 

/* Before: Media queries based on viewport */
.card { max-width: 400px; }
@media (min-width: 768px) {
  .card { max-width: 200px; }
}

/* After: Based on parent container! */
.card-container {
  container-type: inline-size;
}

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

@container (max-width: 299px) {
  .card { display: block; }
}
Enter fullscreen mode Exit fullscreen mode

Why it matters: Components that adapt to their container, not the whole page.

2. :has() Selector 

/* Style a card differently when it contains an image */
.card:has(img) {
  padding: 0;
}

/* Highlight form fields with errors */
.field:has(input:invalid:not(:placeholder-shown)) {
  border-color: red;
}

/* Style parent based on children state */
.sidebar:has(.notification.unread) {
  background: highlight;
}
Enter fullscreen mode Exit fullscreen mode

This is CSS's "parent selector" — the most requested feature, finally here.

3. Modern Centering 

/* Flexbox centering (works everywhere) */
.center {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Grid centering (even simpler) */
.center {
  display: grid;
  place-items: center;
}

/* Text centering */
.text-center {
  text-align: center;
}

/* Block-level horizontal center */
.block-center {
  margin-inline: auto;
}
Enter fullscreen mode Exit fullscreen mode

4. Scrollbar Styling 

.custom-scrollbar::-webkit-scrollbar {
  width: 8px;
}

.custom-scrollbar::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 4px;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 4px;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background: #555;
}
Enter fullscreen mode Exit fullscreen mode

5. aspect-ratio Magic 

/* Before: padding-bottom hack for responsive video */
.video-wrapper {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 */
  height: 0;
}
.video-wrapper iframe {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
}

/* After: one line */
.video {
  width: 100%;
  aspect-ratio: 16 / 9;
}

/* Square avatars */
.avatar {
  aspect-ratio: 1;
  object-fit: cover;
}
Enter fullscreen mode Exit fullscreen mode

6. clamp() for Fluid Typography 

/* Font size that scales between viewport sizes */
.title {
  font-size: clamp(1.5rem, 5vw + 0.5rem, 3rem);
  line-height: clamp(1.2, 5vw + 0.8, 1.4);
}

/* No more media queries for font sizes! */
/* At 320px: ~1.5rem */
/* At 768px: ~2.3rem */
/* At 1440px: capped at 3rem */
Enter fullscreen mode Exit fullscreen mode

7. Logical Properties 

/* Instead of direction-specific properties */
.margin-start: 1rem;      /* = margin-left in LTR, margin-right in RTL */
.padding-block: 0.5rem;    /* = padding-top AND padding-bottom */
.inset: 0;                /* = top: 0; right: 0; bottom: 0; left: 0 */
.max-inline-size: 800px;  /* = max-width in horizontal writing mode */

/* Essential for internationalization */
Enter fullscreen mode Exit fullscreen mode

8. gap in Flexbox 

/* Yes, flexbox now supports gap! */
.nav {
  display: flex;
  gap: 1rem;        /* No more negative margins or calc() hacks */
  align-items: center;
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.5rem;       /* Works in both grid and flexbox */
}
Enter fullscreen mode Exit fullscreen mode

9. Subgrid 

/* Child grid inherits parent's column tracks */
.card-grid {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 1rem;
}

.card {
  display: grid;
  grid-template-columns: subgrid; /* Inherits from .card-grid! */
  grid-column: span 2;
}

.card-header { grid-column: 1; }
.card-body   { grid-column: 2; }
/* Now card header/body align perfectly with the parent grid */
Enter fullscreen mode Exit fullscreen mode

10. View Transitions API 

// Smooth page transitions without frameworks!
document.startViewTransition(() => {
  // This DOM change gets animated automatically
  navigateToNewPage();
});
Enter fullscreen mode Exit fullscreen mode 
/* Control the animation */
::view-transition-old(root) {
  animation: fade-out 0.3s ease-out;
}

::view-transition-new(root) {
  animation: fade-in 0.3s ease-in;
}

@keyframes fade-out { from { opacity: 1 } to { opacity: 0 } }
@keyframes fade-in  { from { opacity: 0 } to { opacity: 1 } }
Enter fullscreen mode Exit fullscreen mode

11. @layer for Cascade Control 

/* Define layer order (lower priority → higher priority) */
@layer reset, base, components, utilities;

@layer reset {
  * { margin: 0; padding: 0; box-sizing: border-box; }
}

@layer base {
  body { font-family: system-ui; line-height: 1.6; color: #333; }
}

@layer components {
  .card { border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); }
  .btn { padding: 0.75rem 1.5rem; border-radius: 6px; }
}

@layer utilities {
  .hidden { display: none !important; }
  .sr-only { /* screen reader only */ }
}

/* Unlayered styles beat ALL layers */
.important-override { color: red; } /* Always wins over layered styles */
Enter fullscreen mode Exit fullscreen mode

12. accent-color 

/* One property to style all form elements */
form {
  accent-color: #3b82f6;
}

/* Now checkboxes, radio buttons, range inputs, progress bars 
   all use your brand color — no more vendor prefixes! */
Enter fullscreen mode Exit fullscreen mode

13. content-visibility 

/* Skip rendering off-screen sections */
.section {
  content-visibility: auto;
  contain-intrinsic-size: 0 500px;
}

/* Browser skips layout/paint for off-screen content.
   Can improve initial render time by 50%+ on long pages. */
Enter fullscreen mode Exit fullscreen mode

14. Nesting (No More Sass Needed) 

/* Native CSS nesting is here! */
.card {
  background: white;
  border-radius: 8px;

  & .header {
    padding: 1rem;
    border-bottom: 1px solid #eee;

    & h2 {
      margin: 0;
      font-size: 1.25rem;
    }
  }

  & .body {
    padding: 1rem;

    & p {
      margin-bottom: 0.5rem;

      &:last-child {
        margin-bottom: 0;
      }
    }
  }

  &:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  }

  &[data-featured] {
    border: 2px solid gold;
  }
}
Enter fullscreen mode Exit fullscreen mode

15. light-dark() Color Function 

:root {
  --bg: light-dark(#ffffff, #1a1a1a);
  --text: light-dark(#333333, #e0e0e0);
  --surface: light-dark(#f5f5f5, #2a2a2a);
}

body {
  background: var(--bg);
  color: var(--text);
}

/* Automatically switches between light and dark mode!
   No more prefers-color-scheme media queries for colors. */
Enter fullscreen mode Exit fullscreen mode

Quick Reference Card

Feature Browser Support Use Case
@container All modern Responsive components
:has() All modern Parent selection
aspect-ratio All modern Video/images
clamp() All modern Fluid typography
gap (flex) All modern Spacing
subgrid Firefox, Safari+16.4, Chrome 117+ Nested grids
View Transitions Chrome 111+, Edge Page animations
@layer All modern Cascade control
accent-color All modern Form styling
content-visibility All modern Performance
Nesting All modern Cleaner code
light-dark() Firefox 120+, Chrome 123+ Theming

Which of these do you use daily? Which is new to you?

Follow @armorbreak for more frontend tips.

Top comments (0)