1 views collected around this technical thread.
This tutorial explains how to build a glitch‑style clock animation in CSS by leveraging clip‑path, keyframe animations, random SCSS functions, and layered pseudo‑elements to achieve flickering, distortion, and color‑shift effects.
An in‑depth comparison of Less and SCSS explores their syntax, features, compilation environments, community support, and ideal use cases, providing code examples and guidance to help developers choose the most suitable CSS preprocessor for projects ranging from small sites to large‑scale applications.
This article explains how to off‑load SCSS‑to‑CSS compilation to a Web Worker in a React‑based frontend, providing code examples for the worker script, the main thread integration, and demonstrating the performance benefits of keeping the UI responsive during heavy processing.
This article explains how Element Plus applies CSS architecture concepts such as OOCSS and BEM, demonstrates generating BEM class names with JavaScript hooks and SCSS mixins, and compares the approach with classic ITCSS layering to improve maintainability and scalability of front‑end styles.
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.
This tutorial demonstrates how to build a playful orange‑cat mood‑changing animation using Vite and SCSS, relying solely on HTML and CSS (including variables, pseudo‑elements, transitions, and keyframe animations) without any JavaScript, and explains each step from project setup to final interactive effect.
This article explores the challenges of CSS class naming, reviews the evolution from chaotic early practices through atomic and modular approaches, explains BEM conventions, and provides practical rules and code examples for creating clear, maintainable class structures in modern front‑end development.
This article explores advanced Sass techniques, comparing mixins and %placeholder selectors, demonstrating best and bad practices, and highlighting ES6‑like features such as interpolation, rest parameters, and @each loops, with code examples to help frontend developers write more efficient and maintainable stylesheets.
This article explains why pure CSS wave effects are challenging, demonstrates how to achieve them using SVG and Canvas, and then provides a step‑by‑step pure‑CSS technique—including border‑radius tricks, animations, and SCSS code—to build wave backgrounds and progress charts.
Explore the CSS conic-gradient function in depth—its syntax, differences from linear and radial gradients, practical examples like color wheels, pie charts, animated backgrounds, and polyfill support—while learning how to combine percentages, background-size, and blend modes to create dynamic, cross-browser visual designs.
This tutorial walks through building a mobile-friendly form component with clickable input areas, interactive right‑arrow icons, error‑handling icons, a fake search box, and a custom range slider, showcasing HTML structure, SCSS flex layout, and reusable code snippets.
This tutorial explains how to implement enter and exit animations using Sandal's SCSS mixins and an ES6 JavaScript class, covering mixin usage, generated CSS, customizable parameters, and practical usage examples for seamless UI effects.
This tutorial walks through building a versatile mobile line‑list component with retina‑level 1px borders, full‑row click handling, arrow navigation, and selectable modes, providing complete HTML structures, SCSS snippets, and practical implementation tips for modern front‑end development.