0 views collected around this technical thread.
The article announces that styled-components has moved to maintenance mode due to React API changes and shifting frontend trends, analyzes why usage is declining, and presents emerging atomic CSS frameworks and other modern styling alternatives for new React projects.
The article details a complete redesign of Feishu’s cloud‑document‑to‑HTML‑email converter, introducing IoC/DI architecture, inline‑style utilities, and specialized renderers for headings, lists, tables, images, code blocks, and equations, resulting in high‑fidelity Outlook‑compatible emails while shrinking the core code to under three hundred lines.
This article examines the evolution of Ant Design's theming—from the less‑based Antd 4.x approach to the CSS‑in‑JS design‑token system in Antd 5.x—analyzes the performance trade‑offs of CSS‑in‑JS, and presents the official antd‑style solution for high‑performance, extensible, and compatible style overrides.
This article explains the principles of Atomic CSS, discusses its advantages and drawbacks, shows how Facebook’s open‑source Stylex implements Atomic CSS with Babel, and demonstrates practical usage patterns such as stylex.create, stylex.props, defineVars, and createTheme to improve front‑end performance and maintainability.
The article examines why a Lazada front‑end team is questioning the switch from the long‑standing Alibaba Fusion component library to Ant Design, analyzing design quality, iteration speed, performance, stability, ecosystem impact, CSS‑in‑JS trends, and the overall cost of migration.
The article explains CSS‑in‑JS fundamentals, examines styled‑components’ source code—including its styled function, createStyledComponent factory, and runtime style injection—compares it with emotion, demonstrates a simple SolidJS MVP implementation, and discusses the technique’s rise, limitations, and possible compile‑time or atomic‑CSS future.
The article explains broken-css, a zero‑runtime, atomic CSS‑in‑JS library inspired by linaria and stylex, detailing its design, installation, API, compilation process, support for pseudo‑classes, @‑rules, CSS variables, and integration with webpack and VSCode, while also providing code examples and performance benefits.
This article shares practical tips, patterns, and mental models for mastering styled-components in React, covering CSS variables, context styling, component encapsulation, inheritance, margin handling, z-index management, the "as" prop, priority tricks, and related tooling to write cleaner, more maintainable UI code.
The article explains why traditional global CSS is problematic for component‑based development, reviews several ways to write styles in React—including BEM‑constrained classNames, inline styling, CSS Modules and css‑loader—then introduces CSS‑in‑JS concepts, demonstrates the Emotion library, compares popular packages and offers practical recommendations for choosing a styling solution.
This article outlines the decision‑making process for styling, icon, dark‑mode, RTL, and global configuration choices when building a custom front‑end component library, comparing Sass/Less, Atomic CSS, CSS‑in‑JS, various icon strategies, and implementation patterns for maintainability and scalability.
This article examines the problem of global CSS scope pollution in React components and presents three practical solutions—namespaces, CSS‑in‑JS, and CSS Modules—detailing their implementation, advantages, and trade‑offs, with code examples and guidance on when to use each approach.