20 CSS One-Liners Every CSS Expert Needs to Know

1. Prevent Text Selection

.no-select { user-select: none; }

2. Responsive Text Size

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

3. Maintain Aspect Ratio

.aspect-ratio { aspect-ratio: 16 / 9; }

4. Automatic Smooth Scrolling

html { scroll-behavior: smooth; }

5. Scroll Snapping

.scroll-snap { scroll-snap-type: x mandatory; }

6. Responsive Dark Mode

@media (prefers-color-scheme: dark) {
  body {
    background-color: #333;
    color: #fff;
  }
}

7. Full-width Responsive Images

.cover-img { object-fit: cover; }

8. Disable Pointer Interactions

.no-pointer { pointer-events: none; }

9. Blurry Background or Elements

.blur { filter: blur(20px); }

10. Dynamic Content from HTML Attributes

.dynamic-content::before { content: attr(class); }

11. Automatic PDF Indicator

a[href$=".pdf"][download]::after { content: " (PDF)"; }

12. Counting with CSS

.list { counter-reset: list-counter; }
.item { counter-increment: list-counter; }
.item::before { content: counter(list-counter) ". "; }

13. Grayscale Image Hover

img:hover { filter: grayscale(100%); }

14. Perfect Circles

.circle { clip-path: circle(50%); }

15. Blend Backgrounds

.blend-background { background-blend-mode: multiply; }

16. Gradient Text

.gradient-text {
  background: linear-gradient(to top, red 0%, blue 100%);
  color: transparent;
  -webkit-background-clip: text;
}

17. First Line Emphasis

p::first-line {
  font-weight: bold;
  color: #333;
}

18. Dynamic Sibling Influence

.sibling:hover ~ .target { color: #007bff; }
.sibling:hover + .target { color: #007bff; }

19. Empty Element

.element:empty { display: none; }

20. Responsive Styling based on Orientation

@media (orientation: landscape) {
  body {
    background-color: #333;
  }
}

These one-liners demonstrate the power of CSS in creating responsive, interactive, and visually appealing web elements with minimal code.

Ref: Mate Marschalko - Medium