Best of CSS — November 2025

1. 1
   Article

   Facebook Engineering·27w

   StyleX: A Styling Library for CSS at Scale

   StyleX is Meta's open-source styling system that combines CSS-in-JS ergonomics with static CSS performance through build-time compilation. It generates atomic CSS classes to reduce bundle sizes by 80% while providing type-safe, predictable style authoring. The compiler uses Babel to extract styles, handle specificity automatically, and support features like theming, dynamic styles, and CSS variables. StyleX powers Facebook, Instagram, WhatsApp, and other major applications, enforcing constraints that prevent common CSS pitfalls like specificity wars and styling conflicts. The system includes tooling like ESLint plugins, CLI tools, and bundler integrations, with an active open-source community contributing extensions and improvements.

   110

   7
2. 2
   Video

   developedbyed·26w

   Animations that should not exist on the web

   Common web animation mistakes include typewriter effects, slow fade-ins exceeding 750ms, scroll jacking, auto-playing carousels, and excessive simultaneous movements causing anti-focus. Best practices involve keeping animations subtle and under 750ms, allowing users to pause auto-animations, maintaining consistent timing, and using libraries like Motion (formerly Framer Motion) or Tailwind CSS animation plugins instead of custom implementations.

   95

   3
3. 3
   Article

   Cloud Four·27w

   Simple One-Time Passcode Inputs

   Build fully functional one-time passcode (OTP) inputs using semantic HTML with proper attributes like inputmode, autocomplete, and pattern validation. The approach demonstrates how to create accessible, progressively enhanced OTP forms without complex JavaScript frameworks or multiple input elements, using a single text input with clear labeling and optional styling enhancements through CSS and lightweight web components.

   62

   1
4. 4
   Article

   Blogging and all that Malarkey·25w

   My CSS layout strategy

   A practical approach to CSS layout decisions that prioritizes content over predefined containers. The strategy involves studying content hierarchy first, choosing appropriate grid types (12-column, compound, modular, or none) based on design needs, implementing grids using CSS custom properties for consistency, and organizing child elements with data-attributes. The author uses creative naming conventions (cartoon characters, composers) for layout patterns and decides between Grid, Flexbox, and Multi-column layouts based on dimensional needs and content behavior.

   49

   2
5. 5
   Video

   Kevin Powell·27w

   Masonry layout is coming, but it's got a new name

   The CSS Working Group has officially named the masonry layout feature 'grid lanes' after over a year of community debate. All major browsers already have some implementation of the feature, with Firefox having a partial implementation for 5 years, Safari offering it in technical preview, and Chrome supporting it behind a flag. The naming decision followed extensive public polling and feedback, with the working group deliberately taking time to gather community input before finalizing the specification. Now that the display type has been named, the associated properties and values should be standardized quickly, potentially leading to rapid browser adoption.

   47

   2
6. 6
   Article

   Brad Woods' Digital Garden·29w

   View Transition API

   Explores the View Transition API for creating smooth page transitions in web applications. Covers default cross-fade animations, custom keyframe animations, page-based transitions using pageswap and pagereveal events, connecting elements across pages with view-transition-name, and practical UI examples like animated menus. Includes working code examples and discusses limitations like overflow:hidden breaking during transitions.

   44

   1
7. 7
   Article

   Jhojan·26w

   Buttony UI — Modern Button Collection

   Buttony UI is a curated collection of modern button designs featuring original creations and works from talented designers like ibelick and guhrodrrigues. The collection includes various styles ranging from glassmorphism and minimalist designs to advanced effects like 3D transforms, magnetic interactions, and animated borders. Each button style offers unique visual effects including scaling, sliding, stretching, glitch effects, and cursor-following parallax, providing developers with ready-to-use UI components for web projects.

   44

   6
8. 8
   Article

   CodePen·27w

   Chris’ Corner: Cursors

   CSS provides built-in cursor styles that can enhance user experience when applied thoughtfully. OS-supplied cursors support accessibility features like size adjustments, while custom cursors can create problems. The article explores cursor best practices, highlighting how tools like Figma extend cursor functionality with contextual information, preview states, and collaborative features without replacing the default cursor entirely.

   43
9. 9
   Video

   YouTube·28w

   CSS Flexbox vs Grid - Are you using them right?

   38

   1
10. 10
    Article

    Hacker News·28w

    This Month in Ladybird

    Ladybird browser engine merged 217 PRs in October, achieving over 90% Web Platform Tests pass rate—a milestone for iOS alternative browser eligibility. Major updates include HTTP disk caching, audio/video synchronization with multi-track support, Trusted Types DOM integration, XPath evaluation support via libxml2, and CSS Typed OM progress. Performance improvements span JavaScript string operations, object property access, and rendering optimizations. WebGL enhancements fixed Google Maps Globe View issues and improved buffer support. The project added pinch-to-zoom on macOS, accessibility DevTools, CSS gradient improvements, and achieved first successful runs on Windows with Gamepad API support.

    36

    3
11. 11
    Article

    Bram.us·27w

    Animating CSS width or height no longer force a Main Thread animation (in Chrome, under the right conditions)

    Chrome 144 introduces a performance optimization where width and height animations no longer force execution on the Main Thread if these values don't actually change during the animation. This particularly benefits View Transitions, where ::view-transition-group pseudos often have static width/height keyframes that can now run on the Compositor. The Blink engine now intelligently checks whether width/height values actually change across keyframes, including handling implicit keyframes and keywords like 'auto'. For animations where dimensions do change, developers can still optimize by converting width/height animations to scale transforms, either manually or using frameworks like Motion.

    36
12. 12
    Article

    web.dev·27w

    New to the web platform in October

    Chrome 142 and Firefox 144 released in October 2025 with significant web platform updates. Firefox 144 adds same-document view transitions (making them Baseline Newly available), command/commandfor attributes, and moveBefore() method. Chrome 142 introduces :target-before/:target-after pseudo-classes, range syntax for style container queries, and interestfor attribute for interest invokers. Beta releases include Firefox 145 with ToggleEvent.source and Atomics.waitAsync(), and Chrome 143 with CSS anchored fallback container queries.

    35
13. 13
    Article

    Bram.us·28w

    Combining Scroll-Driven Animations with @starting-style

    Explores the technical challenges of combining CSS scroll-driven animations with @starting-style for fade-in effects. The cascade, animation-fill-mode, and implicit keyframes create unexpected behavior when trying to transition opacity during page load while also animating it on scroll. The solution involves using a registered custom property as an indirection layer, transitioning it from 0 to 1 and referencing it in an explicit 'to' keyframe. Includes practical examples with view timelines and demonstrates additional techniques like using sibling-index() with min() to limit transition delays.

    30
14. 14
    Article

    C# Corner·26w

    Advanced CSS Grid Layouts for Professional UI Design (2025 Guide)

    A comprehensive guide to CSS Grid for building professional two-dimensional layouts. Covers advanced features like grid-template-areas, minmax(), auto-fit/auto-fill, and the fr unit. Includes five real-world examples with code: admin dashboards, Pinterest-style masonry layouts, landing pages with overlapping elements, e-commerce product grids, and dual-sidebar layouts. Demonstrates responsive design techniques that minimize media queries and explains when to use Grid over Flexbox for complex UI structures.

    29

    4
15. 15
    Video

    Josh tried coding·26w

    This New Tailwind Plugin is Awesome

    The new CSS corner-shape property enables native support for squircles (square-circle hybrids) and other corner shapes that were previously difficult to implement. Currently supported in Chrome and Edge, the property works with border-radius to create smoother, more visually appealing corners. A Tailwind plugin by Brandon Mecconell provides utility classes for easy implementation, with graceful fallbacks for unsupported browsers like Firefox and Safari that default to standard border-radius styling.

    28
16. 16
    Article

    CSS-Tricks·29w

    The “Most Hated” CSS Feature: tan()

    Explores practical applications of CSS's tan() trigonometric function, demonstrating how to create polygon-shaped layouts and circular menus by calculating triangle dimensions. Shows how tan() works with right-angled triangles to determine element heights based on angles and widths, enabling dynamic sectioned lists, character pickers, and image galleries. Includes interactive examples and mathematical explanations of how tangent relates to sine and cosine in the unit circle.

    28
17. 17
    Article

    WP Mayor·26w

    Better Block Editor Review: A Lightweight Block Editor Companion for Next-Level Responsive Design

    Better Block Editor is a free WordPress plugin that extends the native Block Editor with responsive controls, animations, and hover effects without requiring custom CSS. It adds breakpoint-specific settings for layouts, visibility controls for different screen sizes, and customizable navigation collapse points. The plugin maintains content portability by building on core WordPress blocks rather than proprietary components, making it suitable for developers who want enhanced responsive design capabilities while staying within the WordPress ecosystem. It includes site templates and works with any Block theme.

    25
18. 18
    Article

    Hacker News·28w

    512KB Club

    The 512KB Club showcases websites that keep their total uncompressed resources under 512 kilobytes, challenging the trend of bloated web pages filled with heavy JavaScript libraries and unnecessary assets. The initiative highlights performance-focused sites organized into tiers (Green Team under 100KB, Orange Team under 250KB), demonstrating that meaningful web content doesn't require massive file sizes. Sites must contain substantial information to qualify, not just minimal placeholder content.

    19

    1
19. 19
    Video

    Kevin Powell·28w

    CSS Attribute Selectors

    Explores advanced CSS attribute selectors beyond basic usage, covering operators like tilde (~=), pipe (|=), caret (^=), dollar ($=), and asterisk (*=). Demonstrates practical applications including styling links based on file types (PDFs) and external URLs using prefix/suffix matching. Addresses common performance concerns, clarifying that modern browsers handle attribute selectors efficiently.

    18
20. 20
    Video

    DesignCourse·28w

    Go from VIBE DESIGNS to PRO DESIGN - 2 TIPS

    Two practical methods transform basic website layouts into polished, professional designs: using curated design inspiration from real, live applications to inform unique section designs, and implementing strategic animations and interactions using tools like CSS keyframes, Rive, and Framer Motion. The approach emphasizes making each section contextually relevant to the specific business rather than relying on generic templates, while leveraging AI-assisted development to implement complex animations without manual coding.

    15
21. 21
    Article

    All Frontend·26w

    Buttony UI — Modern Button Collection

    Buttony UI is a curated collection of modern button designs featuring original creations alongside works from notable UI designers like ibelick and guhrodrrigues. The collection includes various button styles ranging from glassmorphism and minimalist designs to advanced effects like 3D transforms, magnetic cursor interactions, and animated borders. Each collection is properly attributed to its creator with links to their official profiles.

    14
22. 22
    Article

    CSS-Tricks·28w

    Headings: Semantics, Fluidity, and Styling — Oh My!

    Explores three key aspects of HTML headings: proper semantic placement of h1 elements relative to header and main landmarks for screen reader accessibility, implementing fluid typography using clamp() with viewport-relative units while maintaining zoom accessibility, and the new CSS :heading pseudo-class in Firefox Nightly that simplifies heading selection beyond traditional element selectors.

    13

    1
23. 23
    Article

    freeCodeCamp·25w

    Learn CSS Flexbox for Beginners [Free 2-hour course]

    A free 2-hour beginner course on CSS Flexbox teaches how to build responsive user interfaces through hands-on projects. The course covers core Flexbox properties like flex-grow, flex-shrink, and flex-basis, demonstrates alignment techniques along main and cross axes, and includes practical examples from GitHub and DataDog. Two projects guide learners through centering elements and building a navigation bar using Flexbox.

    10

    1
24. 24
    Article

    Hacker News·27w

    AI World Clocks

    An interactive project that generates analog clock visualizations every minute using nine different AI models. Each model receives the same prompt with a 2000-token limit to create HTML/CSS code for a responsive analog clock with CSS-animated second hands, demonstrating how different AI models interpret and execute the same creative coding task.

    10

    1
25. 25
    Article

    CSS-Tricks·28w

    Explaining the Accessible Benefits of Using Semantic HTML Elements

    Semantic HTML elements like <button> provide built-in accessibility features that generic <div> elements lack, including proper role exposure, automatic focus management, keyboard support for Space and Return keys, and accessible labeling. While developers might choose <div> for easier styling, recreating these native behaviors requires significant JavaScript and ARIA attributes. Browser DevTools can inspect these semantic differences directly, revealing how assistive technologies interpret elements differently.

    10

    2