CSS variables | BestHub

Sohu Tech Products

Jul 10, 2024 · Frontend Development

Implementing an Infinite 3D Carousel Animation with Pure CSS

The article shows how to build a smooth, infinite 3D carousel using only CSS by sharing a common motion path, staggering items with negative animation delays, defining keyframes (including optional pauses), and optionally leveraging @property and @container style for smoother or declarative control, while noting browser compatibility and hover‑pause tips.

3D carouselCSS variablesKeyframes

0 likes · 12 min read

Implementing an Infinite 3D Carousel Animation with Pure CSS

Rare Earth Juejin Tech Community

Feb 20, 2024 · Frontend Development

Theme Color Switching Solutions for Frontend Projects: Hard Coding, SASS Variables, CSS Variables, Filters, and Grayscale

This article compares five practical methods for changing theme colors in frontend applications—hard‑coded global replacements, SASS variable configuration, combined CSS‑variable and data‑theme approach, CSS filter hue‑rotate, and grayscale filter—detailing implementation steps, code snippets, advantages, and drawbacks to help teams choose the most suitable solution.

CSS variablesSASSfilter

0 likes · 12 min read

Theme Color Switching Solutions for Frontend Projects: Hard Coding, SASS Variables, CSS Variables, Filters, and Grayscale

Rare Earth Juejin Tech Community

Nov 24, 2022 · Frontend Development

Implementing an Icon Component in Vue3: Structure, Props, CSS Variables, and Global Registration

This article walks through building a reusable Icon component with Vue3's Composition API, covering directory layout, prop definitions, TypeScript typing, CSS variable styling, local and global registration, type augmentation, and the use of the defineOptions macro for component naming.

CSS variablesComponent RegistrationComposition API

0 likes · 25 min read

Implementing an Icon Component in Vue3: Structure, Props, CSS Variables, and Global Registration

政采云技术

Feb 8, 2022 · Frontend Development

Implementing One‑Click Theme Switching with SCSS in a Vue Project

This article explains how to build a one‑click skin‑changing system for a Vue application by defining SCSS variables, creating theme maps, configuring webpack and vue.config.js to inject global styles, and using both CSS custom properties and advanced SCSS features such as loops, maps, and mixins to dynamically switch colors, fonts, and sizes.

CSS variablesFrontend DevelopmentSCSS

0 likes · 13 min read

Implementing One‑Click Theme Switching with SCSS in a Vue Project

Xueersi 1-on-1 Technology Team

Oct 14, 2021 · Frontend Development

Mastering Theme Switching: 8 Proven Methods to Implement Dark/Light Modes in Web Apps

This article explores eight practical techniques for implementing theme switching in web applications—including class toggling, stylesheet swapping, CSS variables, alternate rel links, Less modifyVars, Ant Design/Vant custom themes, Element‑UI dynamic theming, and JSS—detailing code snippets, advantages, and limitations of each approach.

CSS variablesJSSLess

0 likes · 11 min read

Mastering Theme Switching: 8 Proven Methods to Implement Dark/Light Modes in Web Apps

ByteDance Dali Intelligent Technology Team

Jul 28, 2021 · Frontend Development

Advanced Techniques and Best Practices for Using styled-components in React

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.

CSS variablesCSS-in-JSPerformance

0 likes · 19 min read

Advanced Techniques and Best Practices for Using styled-components in React

vivo Internet Technology

Aug 26, 2020 · Frontend Development

Adaptive Grid Layout Solutions for Management Backend Pages

To solve inconsistent PC resolutions and the lack of multiple design drafts in backend management pages, we evaluated fixed‑width, fixed‑count, Material Design, and custom grids, then built a reusable adaptive‑grid component that recalculates card width, margin, and padding on resize using CSS variables, delivering responsive card‑lists while minimizing design overhead.

CSS variablesGrid LayoutVue

0 likes · 16 min read

Adaptive Grid Layout Solutions for Management Backend Pages