What CSS Metrics and Aspects Can Project Wallace Analyze?

Updated

Project Wallace analyzes a full CSS codebase across four main areas: overall structure (selectors, media queries, properties), code quality (a scored assessment based on specificity, redundancy, and selector complexity), design tokens (colors, font sizes, shadows, spacing), and custom properties plus cascade layers. You can run it by pasting a URL or raw CSS, and the results come back as a complete "x-ray" of your stylesheets in seconds.

Full CSS analysis: structure and complexity

The core analyzer surfaces, counts, and visualizes every selector, media query, and property in your stylesheets. The stated goal is to show the "true structure and complexity" of your CSS — the kind of big-picture view that gets lost when teams review components individually but never review all stylesheets together.

This matters because CSS problems tend to compound invisibly. The site describes the pattern directly: colors multiply quietly (a clean palette becoming 140+ unique values, off-brand grays, duplicate blues in different formats, forgotten opacity hacks), specificity creeps upward with each quick fix, and design systems drift as tokens get duplicated and font stacks diverge.

Code quality score

Project Wallace produces a single, actionable quality score for your CSS health. According to the site, the score is based on:

  • Specificity distribution — how spread out and how high your selector specificity runs
  • Redundancy — duplicated or repeated declarations and values
  • Selector complexity — how convoluted individual selectors are
  • Proven best practices — general CSS conventions

The value of a single score is triage: it gives you one number to track over time rather than a wall of raw counts.

Design token audit

The token audit extracts and groups every color, font-size, shadow, and spacing value it finds. The output shows where your design system is consistent and where it is quietly drifting — for example, the "47 shades of gray" or "12 competing font stacks" scenarios the site uses to illustrate the problem.

Use this when you need to answer questions like: how many unique colors actually ship in this codebase, and which ones are off-palette?

Custom properties and cascade layers

Two more focused views round out the analysis:

Feature What it shows
Custom property inspector Every CSS custom property — which are declared, which are used, and which are orphaned across your stylesheets
@layer visualizer The structure, order, and nesting of your @layer declarations, plus their specificity implications

The custom property view is useful for finding dead variables after a refactor. The layer visualizer is useful when you have adopted @layer and need to confirm the cascade order matches your intent.

Standalone tools (no signup, no paywall)

Beyond the analyzer, the site offers one-off tools for everyday CSS work. The page states these require no signup and no paywall — just paste your CSS:

  • CSS prettifier
  • CSS minifier
  • CSS diff viewer
  • Coverage inspector

How to choose which view to use

  • Auditing an unfamiliar or inherited codebase → start with full CSS analysis, then the quality score for a baseline number.
  • Cleaning up a design system → design token audit first, then the custom property inspector for orphaned variables.
  • Debugging cascade conflicts → the @layer visualizer, especially if overrides have become the norm rather than the exception.
  • Quick one-off formatting or comparison → the standalone tools, which need no account.