Best of CSS — August 2025
- 1
- 2
LogRocket·39w
daisyUI 5 is here: What’s new and what to expect
daisyUI 5 represents a complete rewrite of the popular Tailwind CSS component library, offering significant performance improvements with 75% smaller bundle size and zero dependencies. The major changes include moving configuration from JavaScript to CSS files, introducing a powerful new theming engine with readable CSS variables and oklch color functions, and adding new components like Validator and List. The update also brings new style modifiers such as btn-soft and btn-dash, plus global effect variables for depth and noise. Migration involves updating package versions, moving plugin configuration to CSS, and updating some class names like card-compact to card-sm.
- 3
Acko.net·41w
HTML is Dead, Long Live HTML
The DOM has become bloated with over 350 properties per node and 660 CSS properties, making it unsuitable for modern web applications. CSS's inside-out layout model creates complexity, while features like flexbox require speculative layout passes that can cause performance issues. The author argues for rethinking web UI from first principles, proposing simpler layout models that separate concerns and provide better primitives for building applications. Current proposals like HTML-in-Canvas are insufficient because they don't address the fundamental architectural problems of the web platform.
- 4
WebCraft·41w
Design Resources For Developers 🔥
A curated collection of design and UI resources specifically for developers, including stock photos, web templates, CSS frameworks, UI libraries, and various design tools. The repository serves as a comprehensive reference for developers who need design assets and resources for their projects.
- 5
Web Tools Weekly·39w
CSS Tools, AI & LLMs, Git/CLI Tools
A curated collection of developer tools across three main categories: CSS and HTML tools including pattern generators, hover effect creators, and 3D libraries; AI and LLM tools featuring coding agents, browser automation, and development assistants; and Git/CLI utilities for repository management, documentation generation, and terminal productivity. The newsletter also includes commercial tools and services for development infrastructure and productivity.
- 6
CSS-Tricks·41w
Bringing Back Parallax With Scroll-Driven CSS Animations
CSS scroll-driven animations now enable parallax effects without JavaScript, using scroll() and view() timeline functions to control animation progress based on scroll position. The technique includes animation ranges for precise timing control, accessibility considerations with prefers-reduced-motion, and browser support strategies including polyfills for unsupported browsers.
- 7
Hacker News·38w
You no longer need JavaScript
Modern CSS has evolved significantly with features like nesting, relative colors, container queries, and improved viewport units, making it possible to build interactive web experiences without JavaScript. The post demonstrates practical examples including theming, form validation, animations, and responsive design using only HTML and CSS, while highlighting performance benefits and accessibility advantages of CSS-only solutions.
- 8
Josh W Comeau·40w
An Interactive Guide to SVG Paths • Josh W. Comeau
SVG path elements enable creation of complex curved shapes through a series of drawing commands. The guide covers essential commands including Move (M), Line (L), quadratic (Q) and cubic (C) Bézier curves, and elliptical arcs (A). Special focus is given to understanding arc parameters like radius, rotation, and sweep flags. Additional features include path closing (Z), relative positioning with lowercase commands, and smooth curve chaining with T and S commands.
- 9
What are OKLCH colors?
OKLCH is a perceptually uniform color model that makes working with colors more intuitive than traditional RGB or HSL. It uses three values: Lightness, Chroma, and Hue, allowing developers to create consistent color palettes by changing only one parameter. Unlike other color models, OKLCH maintains visual consistency across different shades and produces cleaner gradients without muddy midpoints. It can access wider color gamuts like Display-P3 and is well-supported in modern browsers, with fallback strategies available for older ones.
- 10
Ahmad Shadeed·40w
Better CSS layouts: Time.com Hero Section
A detailed analysis of Time.com's hero section layout, demonstrating how to rebuild it using modern CSS techniques. The article covers CSS Grid, container queries, the :has() selector, and grid areas to create flexible, responsive layouts that adapt based on content and viewport size. Key techniques include using display: contents for dynamic grouping, query units for fluid typography, and conditional layouts that respond to the number of articles.
- 11
Vincent D. Warmerdam·39w
Overtype markdown
Overtype is a lightweight markdown editor that uses clever CSS styling on top of a standard textarea element. It offers jQuery-like simplicity for integration into websites, requiring only a div with a specific class and a single JavaScript constructor call. The underlying textarea remains accessible for standard DOM manipulation and event handling.
- 12
Sara Soueidan·40w
CSS-only scrollspy effect using scroll-marker-group and :target-current
CSS now offers a JavaScript-free way to create scrollspy effects using the scroll-target-group property and :target-current pseudo-selector. By applying scroll-target-group: auto to a container of anchor links, browsers automatically highlight the active link as users scroll through content sections. However, current implementations lack proper accessibility support, as Chrome doesn't automatically add aria-current attributes to active links, creating WCAG compliance issues that still require JavaScript solutions.
- 13
Telerik·40w
Common Tailwind CSS Patterns
Covers essential Tailwind CSS patterns for creating and positioning elements including cards, flexbox layouts, grid systems, spacing techniques, and fixed positioning for navigation bars. Demonstrates how to use utility classes for alignment, responsive design with breakpoint prefixes, and element ordering across different screen sizes.
- 14
Bootstrap·38w
Bootstrap 5.3.8
Bootstrap 5.3.8 has been released as the final patch before version 5.4.0. This update reverts a dropdown focus bug, includes CSS improvements for WCAG 2.1 compliance and spinner distortion fixes, and removes references to the discontinued Bootstrap Themes site. The release focuses primarily on bug fixes and documentation updates rather than new features.
- 15
MDN Blog·39w
Launching MDN's new front end
MDN Web Docs has launched a completely rebuilt front end, redesigned and reengineered from the ground up. The update focuses on modern web technologies following Baseline compatibility guidelines, featuring improved typography, consistent code rendering, refreshed icons using the Lucide library, a new search modal, and redesigned top navigation. The team used modern CSS and web components while ensuring wide browser compatibility through progressive enhancement.
- 16
CSS-Questions
CSS-Questions is a new educational platform created by Sunkanmi Fafowora that offers over 100 CSS quiz questions to test developers' knowledge. The site provides both a comprehensive exam and a shorter 20-question basic test, making it a valuable resource for developers looking to assess and improve their CSS skills.
- 17
A Radio Button Shopping Cart Trick
A CSS-only technique for animating items into a shopping cart using radio button pairs that toggle states to trigger smooth transitions. Each product contains two radio inputs with the same name attribute, creating a see-saw effect when clicked. When selected, items shrink and move to the cart position using CSS transforms and transitions. The approach includes JavaScript for counting items and discusses accessibility limitations due to duplicate interactive elements. The author suggests modern alternatives like the View Transitions API for better implementation.
- 18
Una Kravets·40w
5 Useful CSS functions using the new @function rule
CSS custom functions using the new @function rule have landed in Chrome 139, enabling developers to write reusable logic that accepts arguments and returns computed values. The article demonstrates five practical examples: a negation function for inverting values, an opacity function for creating transparent color variants, a fluid typography function that scales text responsively, a conditional border radius function that removes rounded corners near viewport edges, and a layout sidebar function for responsive grid layouts. These functions make CSS more organized and dynamic, similar to utility functions in JavaScript, and represent a significant step toward more powerful CSS capabilities with upcoming @mixin and @apply rules.
- 19
Lobsters·40wmissing.css
missing.css version 1.2.0 introduces toggle buttons with ARIA switch roles, print annotations for abbreviations and links, new grid modifiers for print layouts, extensive customization variables for borders and shadows, layout utilities, color scheme support via meta tags, scrollbar theming, progress and meter element styling, improved flexbox classes, Lucide icon integration, breadcrumb enhancements, button colorways, select element improvements, and various bug fixes while deprecating several older classes and variables.
- 20
- 21
Web Dev Simplified·38w
Must Know Dev Tools Feature - Save Hours
Browser developer tools have a "emulate a focused page" feature that prevents dropdown menus and other focus-dependent elements from closing when you try to inspect them. Access it via Ctrl+Shift+B command runner or the rendering tab to keep UI elements open while debugging their CSS and JavaScript code.
- 22
Simple Thread·40w
New and Upcoming CSS Features I’m Excited About
CSS continues evolving with powerful new features that reduce reliance on JavaScript for styling challenges. Recent additions include math functions like sign() and abs(), sibling functions for element relationships, interpolate-size for animating to intrinsic dimensions, and if() for conditional logic. These features enable complex animations, dynamic layouts, and responsive designs with pure CSS, making modern web development more efficient and maintainable.
- 23Lobsters·42w
Why Semantic HTML Still Matters
Semantic HTML provides crucial structure that modern web development often overlooks in favor of component-based approaches and utility classes. Proper HTML semantics improve performance by reducing DOM complexity, enable better accessibility for assistive technologies, help search engines and AI agents understand content, and create more resilient applications. The shift toward meaningless div soup and utility-heavy markup creates performance bottlenecks through layout thrashing, increased rendering costs, and bloated stylesheets. Semantic elements like article, nav, and section provide natural boundaries that browsers can optimize, while also serving as a foundation for modern CSS features like containment and content-visibility.
- 24
Smart Layouts (CSS Day - 06.06.2025) - Video & Slides
Ahmad Shadeed presented at CSS Day 2025 about "Smart Layouts" - CSS layouts that make intelligent decisions autonomously using modern features like clamp, :has selector, and container queries. The talk introduces the concept of Layout Zones where components adapt based on their container's constraints and conditions. Shadeed emphasizes that many developers underutilize well-supported CSS features, despite CSS becoming powerful enough to create designs natively in browsers that previously required design tools. The presentation includes real-world examples and is available with slides and video resources.
