Best of CSS — January 2026

1. 1
   Article

   John Liter·17w

   Why W3Schools Became the Foundation of My Coding Journey and Why I’m Passing It On

   W3Schools served as a foundational learning platform that emphasized understanding over memorization through simple explanations, immediate feedback loops, and hands-on experimentation. The platform has evolved to include structured learning paths, in-browser editors, and progress tracking while maintaining its focus on teaching fundamentals. In an era of AI-generated code, understanding how to read code and reason through problems remains crucial, making platforms that teach core concepts more relevant than ever.

   835

   65
2. 2
   Article

   Hacker News·20w

   A Website To End All Websites

   The modern internet has devolved from a creative, educational space into an attention-extracting machine dominated by algorithmic feeds and corporate platforms. Drawing on Ivan Illich's concept of convivial tools, the piece argues that personal websites—hand-coded, independently owned, and syndicated through protocols like RSS and Webmentions—represent the antidote to platform monopolies. By building small, reducing friction to publishing, and leveraging IndieWeb standards, developers can reclaim autonomy, creativity, and meaningful connection online.

   302

   33
3. 3
   Article

   Hacker News·20w

   CSS sucks because we don't bother learning it.

   CSS gets a bad reputation not because it's inherently flawed, but because developers rarely invest time to properly learn it. While backend developers spend years mastering their craft, CSS is often treated as an afterthought—learned and applied simultaneously under time pressure. This leads to googling solutions, using hacks, and creating unmaintainable code with excessive `!important` declarations and absolute positioning. Like any skill, CSS requires dedicated study and practice to understand its behavior and use it effectively. The solution isn't more frameworks, but taking time to learn CSS through structured courses with experienced instructors.

   239

   43
4. 4
   Video

   Lun Dev Code·19w

   The game changed when CSS introduced the IF-ELSE function

   CSS is introducing an if-else function that could fundamentally change how developers write responsive styles. Instead of using multiple media queries to handle different screen sizes and themes, developers can now write conditional logic directly in CSS properties. The feature enables nested conditionals for complex scenarios like theme switching (light/dark/auto) and is currently supported in Chrome and Edge, though not yet in Firefox or Safari. This addition makes CSS more programming-like and could make it more accessible to backend developers.

   232

   35
5. 5
   Article

   Lobsters·18w

   The Incredible Overcomplexity of the Shadcn Radio Button

   Modern UI libraries like Shadcn and Radix add significant complexity to simple HTML radio buttons, requiring multiple dependencies, hundreds of lines of React code, and several kilobytes of JavaScript. These libraries rebuild radio buttons from scratch using buttons with ARIA attributes instead of native HTML inputs, despite the fact that radio buttons can be easily styled with basic CSS techniques like `appearance: none`, pseudo-elements, and pseudo-classes. This overcomplexity violates ARIA best practices, increases cognitive load, and degrades performance for a feature browsers have supported natively for 30 years.

   180

   26
6. 6
   Article

   CSS-Tricks·16w

   CSS-Tricks

   ReliCSS is a tool that identifies outdated CSS code in your projects and suggests modern alternatives. It categorizes legacy code by severity: high (IE6/7 hacks, dangerous techniques), medium (IE8-10 hacks), and low (vendor prefixes better handled by Autoprefixer). The tool helps developers clean up technical debt like unnecessary !important declarations, checkbox hacks replaceable by :has(), and old vendor prefixes from outdated build configurations.

   155

   4
7. 7
   Article

   CodePen·20w

   Chris’ Corner: Freshly-Fallen CSS

   CSS Grid Lanes (formerly masonry) is coming to browsers with a new display property. New CSS features include text-grow and text-shrink for automatic text sizing, and scroll-triggered animations that complement existing scroll-driven animations. Customizable select elements are gaining traction with advanced styling and interactivity options now available in browsers.

   146

   8
8. 8
   Article

   Bytes by ui.dev·16w

   Firefox is cooking again

   Firefox 147 shipped with major web platform features including Navigation API, CSS Anchor Positioning, and View Transition upgrades after Mozilla backtracked on AI-focused plans following user backlash. The release also includes updates on Vercel RSC vulnerabilities, Yarn 6 rewrite in Rust, Expo SDK 55 beta dropping legacy architecture support, and Node.js 25.5 adding simplified Single Executable App building.

   147

   38
9. 9
   Article

   CSS-Tricks·19w

   Future CSS: :drag (and Maybe ::dragged-image?)

   A proposed CSS pseudo-class `:drag` would enable styling elements during drag interactions without JavaScript. Currently, developers must use the HTML Drag and Drop API with JavaScript event listeners and class toggling to achieve this effect. The proposal would simplify the process by allowing direct CSS styling when elements are being dragged. The author also suggests a `::drag-image` pseudo-element for customizing the preview image shown during dragging, which currently requires JavaScript's `dataTransfer.setDragImage()` method. Both proposals aim to reduce JavaScript dependencies and improve performance for common drag-and-drop UI patterns.

   98

   3
10. 10
    Article

    Smashing Magazine·17w

    Rethinking “Pixel Perfect” Web Design — Smashing Magazine

    The concept of "pixel perfect" web design is outdated and counterproductive in modern web development. Born from print design and early web constraints, it fails to account for the fluid, multi-device reality of today's web with infinite viewport sizes, dynamic content, and accessibility needs. Instead of matching static mockups pixel-by-pixel, teams should focus on "design intent" using design tokens, relative units, container queries, and component-based systems. This shift from rigid pixel values to flexible, logical implementations creates more maintainable code, better accessibility, and interfaces that adapt gracefully across all contexts while preserving visual integrity.

    95

    6
11. 11
    Article

    CSS-Tricks·18w

    “I Heart CSS” DailyDev Squad

    CSS-Tricks announces their presence on DailyDev through two channels: an automated content feed and a curated community squad called 'I Heart CSS' that shares CSS-related links and resources. The squad serves as an additional way for developers to follow CSS-Tricks content alongside existing options like RSS, Bluesky, and Mastodon.

    81

    4
12. 12
    Article

    Hacker News·18w

    CSS Web Components for marketing sites

    CSS Web Components are a JavaScript-free approach to building marketing site design systems using custom HTML elements styled entirely with CSS. Unlike traditional web components that require Shadow DOM and JavaScript for registration, this pattern wraps standard HTML in custom element tags and uses CSS attribute selectors to implement component variants and functionality. The approach enables progressive enhancement, minimal dependencies, full SSR support, and leverages modern CSS features like cascade layers, container queries, :has(), and CSS variables for theming and conditional styling.

    81

    4
13. 13
    Article

    Netguru·20w

    Frontend Design Patterns That Actually Work in 2026

    Component-driven development with atomic design methodology forms the foundation of modern frontend architecture, breaking interfaces into reusable atoms, molecules, and organisms. Container queries enable context-aware responsive designs by adapting to parent containers rather than viewports. State management has evolved with Signals and Context API offering alternatives based on application complexity. CSS variables simplify dark mode and theming implementation. AI tools now accelerate design-to-code workflows through Figma plugins and GPT-powered code generation. Performance optimization through lazy loading, code splitting, and tree shaking remains essential. Design systems using Figma and Storybook create shared languages between designers and developers, reducing handoff friction and improving consistency.

    79

    1
14. 14
    Article

    Stack Overflow Blog·16w

    Wanna see a CSS magic trick?

    CSS has evolved significantly from table-based layouts to modern techniques with powerful new features. Recent additions include conditional logic with IF functions, anchor positioning for tooltips and UI elements, scroll-driven animations, and typed custom properties (variables). These features eliminate the need for JavaScript in many common patterns like carousels and animations, while improving performance and accessibility. CSS now supports media queries for user preferences like reduced motion, and new functions like sibling-index and sibling-count reduce the need for loops. The language is approaching maturity with a well-designed API that handles edge cases thoughtfully.

    76

    4
15. 15
    Article

    Collections·19w

    The Impact of AI on Tailwind CSS and Open-Source Sustainability

    Tailwind CSS experienced a 40% drop in documentation traffic and 80% revenue decline since early 2023 as developers increasingly use AI tools to generate code instead of visiting documentation. This forced the company to lay off 75% of its engineering team despite remaining the most popular CSS framework. The situation highlights challenges for open-source monetization models in the AI era, though major sponsors like Vercel, Supabase, and Google AI Studio have pledged support to help Tailwind adapt.

    76

    15
16. 16
    Article

    Hacker News·16w

    beginner-jhj/mini_browser

    A high school student built a functional browser engine from scratch in C++ over 8 weeks to understand how browsers work internally. The project implements HTML/CSS parsing, DOM tree construction, layout calculation, and rendering using Qt6. It covers the complete browser rendering pipeline: tokenization, DOM construction, style calculation (CSSOM), layout computation, and painting. The implementation supports core CSS properties, image loading with caching, navigation with history, and handles both block and inline layouts. Beyond technical achievements, the author emphasizes lessons in systematic debugging, persistence, pragmatism over perfection, and the importance of asking "why" when learning.

    69

    3
17. 17
    Video

    Web Dev Simplified·17w

    My Honest Thoughts on AI and the Job Market in 2026

    The web development job market is recovering after the 2022-2024 downturn, with listings up 12-13% since May 2025. AI model improvements are plateauing while tooling continues advancing steadily. AI won't replace developers but will become a required skill, similar to autopilot requiring pilots. Junior developers should focus on three areas: mastering fundamentals by writing code manually, learning to work with AI tools and prompt engineering, and developing deep expertise in advanced features (like modern CSS) where AI performs poorly. Code review and reading skills are now critical. The job outlook for 2026-2027 is positive, especially for junior roles.

    70

    10
18. 18
    Article

    OddBird·19w

    CSS IS AWESOME Game 2

    The second annual CSS is Awesome Game features a competitive challenge between CSS professionals Adam Argyle, Cassondra Roberts, Dave Rupert, and Miriam Suzanne. The episode is part of the Winging It podcast series, which regularly discusses CSS features, design systems, and web development topics with industry experts.

    70
19. 19
    Article

    Simple Thread·19w

    Building Better Buttons

    Buttons require careful consideration for accessibility. Use semantic HTML `<button>` elements instead of `<div>` or links to ensure proper keyboard navigation and screen reader support. Add `aria-label` or visually-hidden text for icon-only buttons, use `aria-pressed` to convey toggle states, and choose between `disabled` and `aria-disabled` attributes based on whether users need to know the button exists. Proper button implementation ensures keyboard users and screen reader users can effectively interact with web applications.

    67

    5
20. 20
    Article

    Cloudflare·16w

    Building vertical microfrontends on Cloudflare’s platform

    Cloudflare introduces a Vertical Microfrontends template that enables teams to deploy multiple independent Workers under a single domain, each owning complete vertical slices by URL path (e.g., /docs, /dash). Using service bindings for routing, CSS View Transitions for seamless navigation, and Speculation Rules for instant-feeling page loads, teams can work in isolation with their own frameworks, libraries, and CI/CD pipelines while presenting a unified user experience. The Router Worker handles path-based routing, HTML rewriting for asset paths, and automatically injects transition code to make separate projects feel like a single-page application.

    62

    2
21. 21
    Article

    Adam Argyle·19w

    4 CSS Features Every Front-End Developer Should Know In 2026 · January 7, 2026

    Four modern CSS features shipped in 2025 enable powerful new capabilities: sibling-index() and sibling-count() for position-based calculations and staggered animations, scroll-state container queries for detecting stuck/snapped/scrollable states, text-box for trimming typographic whitespace to achieve pixel-perfect alignment, and typed attr() for passing type-safe values from HTML attributes to CSS with validation and fallbacks.

    60
22. 22
    Article

    Weekly Vue News·18w

    Weekly Vue News #233 - Hydration Fixes, Global Store Pitfalls & the CSS of the Future

    A curated newsletter covering Vue.js development topics including hydration bug fixes, common pitfalls when using global state stores, and emerging CSS features and patterns.

    45
23. 23
    Article

    Frontend Focus·16w

    Frontend Focus Issue 726: January 28, 2026

    Chrome Canary now supports testing the new text-scale meta tag, which allows websites to respect user text size preferences more effectively than traditional zooming. The newsletter also covers CSS stacking contexts, introduces Color Palette Pro (a color palette tool with a synth-inspired UI), mentions Typed.js reaching version 3.0, and highlights impressive web ports of classic games including Super Monkey Ball and Quake using Three.js.

    36
24. 24
    Article

    Ben Bandel·18w

    Opening The Dialog Element As A Fly-out Sidebar

    The native HTML dialog element can be styled as a fly-out sidebar by overriding browser user-agent styles. Key CSS properties like inset, max-height, height, and padding need to be explicitly reset to prevent the default centered positioning. Once these defaults are unset, the dialog can be positioned as a sidebar with custom styling and CSS keyframe animations for smooth entry transitions.

    35

    1
25. 25
    Article

    Cassidy's blog·16w

    Making interesting borders with CSS corner-shape

    The CSS corner-shape property enables creating beveled, rounded, notched, scooped, and elliptical borders without pseudo-elements or workarounds. It works with border-radius and includes a superellipse function for numerical control, enabling animations and transitions. Browser support is currently limited to Chromium-based browsers, with Safari and Firefox support pending.

    22

    2