Scaling design delivery through CSS architecture and workflow improvements

Summary

Led a CSS architecture overhaul and workflow transformation within Artlogic’s Design Studio, addressing critical delivery delays and technical debt across a platform of 3,000+ gallery websites. By modernising our SCSS structure, improving selector specificity, and introducing tooling like Browsersync, we dramatically improved development speed, platform performance, and internal collaboration.

Role and timeline

• Role: Lead Designer & Developer (Design Studio)
• Team: Myself + 1 front-end collaborator, plus coordination with the platform team
• Timeline: Ongoing project (core phase ~3 months)

The challenge: slow delivery and unmaintainable CSS

The Design Studio was responsible for delivering both templated and bespoke websites for Artlogic’s gallery clients. But the underlying system was difficult to work with:

• A three-tier CSS stack: deeply embedded core CSS (uneditable), layered theme styles, and final layer custom overrides
• Highly specific selectors, no naming conventions, and 10,000+ line files
• No modularity, which made debugging and onboarding difficult
• Redundant and conflicting styles often bloated output and confused the QA process
• Slow reload times (2+ minutes) while editing styles created major flow blockers for the dev team

We were regularly missing deadlines, extending QA cycles, and delivering inconsistent work. We needed a solution that improved both delivery speed and long-term maintainability.

My approach: technical investigation, system redesign, and developer enablement

1. Technical audit and prototyping

As the lead developer on fully bespoke projects, I began by trialling a modular SCSS structure on our most complex builds. This helped:

• Identify scalable patterns and repeat pain points
• Establish a base layer of mixins, variables, and partials for reuse

At the same time, I worked with a collaborator to:

• Audit the CMS’ hidden theme creation functionality
• Identify a way to safely disable the default core CSS for custom projects
• Surface performance issues and opportunities for streamlining

2. Modular SCSS structure

We implemented a scalable system based on the Sass 7–1 pattern:

• abstracts/ – tokens, variables, functions
• base/ – resets, typography, utilities
• components/ – modular UI pieces
• layout/ – grid, nav, spacing
• pages/ – specific overrides
• themes/ – client variations

We paired this with:

• CSS Custom Properties for theme flexibility
• Consistent naming and selector hygiene
• Modern layout practices (Grid/Flexbox) in place of floats

3. Tackling the selector problem

Due to legacy CMS constraints, we couldn’t modify HTML structure or add new classes. This forced us to work with inconsistent IDs and undocumented classnames.

To address this:

• I created a suite of mixins to encapsulate complex selector logic (e.g. @mixin scope-all-panel-titles, @mixin scope-prose)
• These hid complexity and made styling more predictable
• I introduced the use of [id="foo"] attribute selectors to reduce specificity without breaking compatibility

These decisions gave us a safer, more readable way to work with legacy markup, while slowly improving the system.

4. Browsersync & workflow transformation

CSS changes were painfully slow to test—waiting 2 minutes for page refreshes killed productivity. I was initially told that Browsersync integration was impossible.

I investigated the architecture and discovered:

• Development environments exposed both secure and insecure ports
• The insecure port posed no risk (VPN protected), enabling local Browsersync use

I implemented Browsersync with:

• Instant CSS injection (no refresh needed)
• Multi-device preview and scroll sync
• HTTP/2 detection, which led to platform-wide rollout

This single workflow improvement changed the speed and feel of every developer interaction.

Results & impact

• 4x faster delivery speed across custom builds
• Reduced QA overhead due to more predictable styling
• Platform performance gains from reduced CSS weight and HTTP/2 rollout
• Improved developer morale and contribution through modular architecture and instant preview tooling
• Long-term scalability via a standardised SCSS foundation adopted by the full team

Reflection

This project was a strong reminder that good UX includes internal tooling. Developers are users too—and giving them a better system led to:

• Better output for clients
• Stronger cross-team contribution
• Less time wasted on repeat problems

The work also seeded the foundation for a future component-based theme system—where even non-technical users might one day customise layouts with confidence.