HN
Today

Modern CSS Code Snippets: Stop writing CSS like it's 2015

The 'Modern CSS Code Snippets' website serves as a living catalog of contemporary CSS features, showcasing how many common UI challenges can now be solved with pure CSS, often eliminating the need for JavaScript. It's a goldmine for developers looking to shed old hacks and embrace declarative, performant styling. The resource appeals to Hacker News's audience by highlighting significant improvements in web development efficiency and maintainability.

14
Score
0
Comments
#4
Highest Rank
3h
on Front Page
First Seen
Feb 15, 8:00 PM
Last Seen
Feb 15, 10:00 PM
Rank Over Time
1254

The Lowdown

The website modern.css provides a valuable collection of code snippets demonstrating how many modern CSS features can replace older, more cumbersome techniques, including those that previously required JavaScript or preprocessors. Each snippet presents a common UI challenge, comparing an 'Old' approach (often relying on JS, complex hacks, or older CSS properties) with a 'Modern' CSS solution, highlighting increased simplicity, performance, and maintainability.

Key areas where modern CSS shines include:

  • Responsive Layouts and Components: Achieve element-level responsiveness with container queries (@container) instead of global media queries, and manage spacing with gap and aspect-ratio without padding hacks.
  • Enhanced Interactivity: Implement complex UI elements like carousels, sticky elements, hover tooltips, and modal dialogs using native CSS features like @container scroll-state, popover, interestfor, commandfor, and the <dialog> element, significantly reducing JavaScript dependency.
  • Advanced Styling and Animations: Utilize features like color-mix, oklch for vivid colors, independent transform properties (translate, rotate, scale), and view-transition-name for smooth page transitions, moving beyond traditional CSS limitations and JavaScript animation libraries.
  • Improved Typography and Accessibility: Implement text-wrap: balance for balanced headlines, initial-letter for elegant drop caps, and :focus-visible for better accessibility without annoying mouse users.
  • Streamlined Development: Leverage CSS nesting (&), @scope for scoped styles, and @property for typed custom properties, bringing capabilities previously confined to preprocessors directly into native CSS.

By illustrating these 'before and after' comparisons, the site effectively makes the case for upgrading CSS development practices, proving that the language has evolved far beyond its 2015 capabilities and offering elegant solutions to modern web design problems.