What Is Project Wallace? A CSS Analytics Tool for Auditing Entire Stylesheets

Updated

Project Wallace is a web-based CSS analyzer that gives you an "aerial view" of an entire stylesheet or codebase rather than a single component. You paste a URL or raw CSS, and it returns a full x-ray of your styles: colors, typography, specificity, custom properties, cascade layers, and an overall quality score. It's most useful when your CSS has grown large enough that no one person can see the whole picture — the tool's own framing is that "every team reviews components, nobody reviews all stylesheets."

What problem it targets

The site describes a specific failure mode: CSS grows in every direction, and the big picture becomes invisible. Small inconsistencies compound into systemic problems that hide in plain sight. It names three concrete symptoms:

  • Colors multiply quietly — what started as a clean palette becomes 140+ unique values, with off-brand grays, duplicate blues in different formats, and forgotten opacity hacks.
  • Specificity creeps upward — each quick fix adds another layer until selectors fight each other and overrides become the norm.
  • Design systems drift silently — tokens get duplicated, custom properties multiply, font stacks diverge, and nobody notices until the bundle is 300kb and design review falls apart.

The value proposition is detection: catching drift and complexity before they become system-level debt.

Core capabilities

Capability What it does
Full CSS analysis Surfaces, counts, and visualizes every selector, media query, and property to show true structure and complexity
Opinionated quality score A single actionable score for CSS health, based on specificity distribution, redundancy, selector complexity, and best practices
Design token audit Extracts and groups every color, font-size, shadow, and spacing value to show where the design system is consistent and where it drifts
Custom property inspector Traces every custom property to show which are declared, which are used, and which are orphaned
@layer visualizer Visualizes cascade layer structure — order, nesting, and specificity implications of @layer declarations

Standalone tools

Project Wallace also offers one-off tools for everyday CSS work. The site states these require no signup and no paywall — you paste your CSS and get the job done. Listed tools include:

  • CSS prettifier
  • CSS minifier
  • CSS diff viewer
  • Coverage inspector
  • Specificity (listed as "Speci…" in the source)

When to use it

Reach for Project Wallace when you need to audit an existing stylesheet rather than write new CSS — for example, before a design-system migration, when a bundle has grown unexpectedly large, or when you suspect token drift but can't see it by reading individual files. If you only need to format, minify, or diff a snippet, the standalone tools cover that without an account.

The site notes it is "trusted by the pros," though it doesn't name specific users in the available material. Pricing and login requirements for the core analyzer aren't specified in the source, so treat those as unconfirmed rather than assuming free access.