Leveraging modern CSS native features in client web development — Reducing JS dependencies with @function and offset-path

CSS-Tricks has published a series of articles on modern CSS native features such as @function, offset-path, and @custom-media. Capabilities that previously required JavaScript or preprocessors like Sass—such as value calculations, motion along a path, and shared media queries—can now be handled entirely with standard CSS features.

Meanwhile, client web development continues to face the recurring problem where “JavaScript is added for minor interactions and conditional logic, resulting in delivered websites that are bloated and easily broken.” Supporting client web development, we see this not as a matter of “whether you can build flashy features,” but as a design challenge of “ensuring the client or subsequent agency can maintain the site without breaking it after handover.” Connecting with the page speed covered in our Core Web Vitals Improvement Guide (GH Media), the modern production foundations covered in Corporate Website Revamps with Astro 6.4 (GH Media), and the native page transitions covered in Client Implementation of Cross-Document View Transitions (GH Media), this article organizes “modern CSS native adoption” into a client development service package.

Why modern CSS matters right now

Because browsers can now natively parse advanced CSS, achieving “both expressive presentation and maintainability using CSS alone, without relying on JS and build tools,” has become a practical option in client development. This enables us to guarantee lightweight, resilient websites as our deliverables.

Three structural changes beneficial to custom development projects

Structure 1: Moving from animating with JS to animating with CSS

Injecting heavy JS for scroll-linked effects or path-based animations slows page loads and hurts SEO. In custom development, we move animations into CSS using features like offset-path to trim JS bundles and lighten page loads.

Structure 2: Moving from Sass-dependent setups to pure CSS

Relying on Sass mixins and variables requires handing over the entire build environment to the next team. In custom development, we bring logic into native CSS via @function and @custom-media, handing over sites in a state where they can be maintained without specialized build knowledge.

Structure 3: Moving from ad-hoc CSS to engineered CSS architectures

Ad-hoc CSS quickly bloats. In custom development, we centrally manage values and breakpoints using custom properties and @function to deliver designs resilient to change.

The 5 phases of modern CSS native adoption delivered in custom development

Phase 1: Current state audit (1 week)

• Audit JS and CSS dependencies on existing sites
• Measure performance (Core Web Vitals)
• Confirm browser support requirements (no IE / modern browsers only)
• Identify replacement candidates (animations, conditional logic, breakpoints)

Phase 2: Architecture and token organization (1 week)

• Define design tokens using custom properties
• Standardize breakpoints using @custom-media
• Consolidate calculation logic into CSS using @function
• Determine fallback strategy (legacy browsers)

Phase 3: Implementation and replacement (2–3 weeks)

• Migrate JS animations to offset-path and related features
• Replace Sass mixins and variables with native CSS
• Remove unnecessary JS bundles
• Perform phased replacement and regression testing

Phase 4: Validation and optimization (1 week)

• Remeasure Core Web Vitals (quantify improvements)
• Validate rendering across major browsers and devices
• Test fallback behavior

Phase 5: Handover and maintenance (ongoing)

• Prepare CSS architecture documentation (tokens / naming conventions)
• Provide maintenance runbooks and update procedures
• Conduct regular browser compatibility reviews

Standard technology stack set for custom development

Which projects need this and which do not

Six clauses to include in client contracts

Client-side ROI estimate (assuming corporate website / page speed improvements)

Even with a reasonable upfront investment, dropping bounce rates by several percentage points through page speed gains provides ample justification.

Five common pitfalls

Pitfall 1: Omitting fallbacks

Cutting-edge features are ignored by older environments. Apply them progressively using techniques like @supports.

Pitfall 2: Trying to push everything into CSS

JavaScript remains better suited for complex interactions. Separate responsibilities based on role.

Pitfall 3: Postponing design token setup

Ad-hoc values will bloat code again. Define tokens upfront.

Pitfall 4: Claiming “it got lighter” without measuring

Subjective impressions are unreliable. Evaluate quantitatively using Core Web Vitals.

Pitfall 5: Failing to leave documentation

Without clear design intent, future updates will break things. Leaving naming conventions and update procedures is essential.

90-day action plan

Conclusion — Moving from loading up JS to delivering lightweight CSS

With the widespread adoption of modern native CSS features such as @function, offset-path, and @custom-media, styling presentation and logic can now be handled entirely within CSS. From our perspective supporting client web development, “modern CSS native adoption”—reducing JS dependencies, designing around tokens, powering animations natively, and handing over code that can be maintained without build expertise—is our new flagship offering for delivering lightweight, resilient websites.

If you are looking to solve issues like “slow sites weighed down by heavy JS,” “fragile handed-over sites,” or “improving Core Web Vitals,” please feel free to reach out via our contact form.

Sources

• @function（CSS-Tricks Almanac）
• offset-path（CSS-Tricks Almanac）
• @custom-media（CSS-Tricks Almanac）
• Core Web Vitals Improvement Guide (GH Media)
• Corporate Website Revamps with Astro 6.4 (GH Media)
• Client Implementation of Cross-Document View Transitions (GH Media)