简体中文
English
Website review
This review may include AI-generated content and is not individually verified. Domain, certificate and other facts come from the observed data on this page.
What is Project Wallace?
Project Wallace is a web-based CSS analyzer. You paste in a URL or raw CSS, and it returns an x-ray of the stylesheets: how many unique colors you actually have, how complex your selectors are, which custom properties are declared but never used, and how your cascade layers are structured. Its stated purpose is to surface the "big picture" that component-level reviews miss — the systemic drift that accumulates across an entire codebase.
What it looks at
- Full stylesheet analysis: every selector, media query and property counted and visualized.
- A quality score: a single rating derived from specificity distribution, redundancy, selector complexity and best practices.
- Design token audit: colors, font sizes, shadows and spacing values extracted and grouped, so you can see where a design system is consistent and where it has quietly diverged.
- Custom property inspector: which
--variablesare declared, which are used, and which are orphaned. - Cascade layers: a visualizer for
@layerorder, nesting and specificity implications. - Standalone utilities: prettifier, minifier, diff viewer and coverage inspector, usable without an account.
Who it suits
A front-end or design-systems engineer inheriting a large, long-lived stylesheet is the clearest fit: the tool answers "how bad is it, and where?" before a refactor. A design-systems lead auditing whether tokens are actually honored across a codebase gets the token and custom-property views. Someone doing a one-off cleanup — minifying a file, diffing two stylesheets, checking unused CSS — can use the standalone tools without committing to the analyzer.
Trade-offs to expect
This is static analysis of CSS, not a runtime performance profile; it tells you about the shape and health of your styles, not how fast a page paints. A quality score is a heuristic — useful as a trend line across audits, less useful as an absolute verdict, since a deliberately complex selector can be correct. And the value scales with codebase size: on a 200-line stylesheet, most findings will be obvious by eye.
A practical next step: run the analyzer on your main stylesheet and note the total unique color count. If it is far above your intended palette, start there — duplicate and off-brand colors are usually the cheapest systemic fix, and the token audit shows exactly which values to consolidate. For a second opinion on unused CSS and coverage, PurgeCSS approaches the same problem from the build-tool side.
How do I use Project Wallace to analyze my CSS?
Paste your CSS, or a URL, into Project Wallace and read the analyzer output. The site is built around a single workflow: give it a stylesheet or a live page, then work through the views it generates — full analysis, quality score, design tokens, custom properties, and cascade layers. There is no setup to describe beyond that, and the standalone tools (prettifier, minifier, diff viewer, coverage inspector) are separate, paste-and-go utilities for one-off jobs.
A practical way to work through it
- Start with the full analysis to see counts and structure: selectors, media queries, properties. This is the aerial view the page promises, and it's where you spot the scale of the problem before judging it.
- Check the quality score next. Treat it as a triage signal, not a verdict. A low score tells you where to look; it does not tell you which specific rule to change.
- Audit design tokens to find drift. This is the most immediately actionable view: near-duplicate colors, diverging font stacks, and spacing values that should have been one token.
- Inspect custom properties to separate declared from used. Orphaned declarations are safe cleanup candidates; properties used once are usually fine.
- View cascade layers if you use
@layer, to confirm order and nesting match your intent.
Who gets the most out of it
The clearest fit is a team that reviews components individually but never reviews the whole stylesheet collection — exactly the blind spot the site describes. A front-end lead preparing a design-system cleanup, or someone inheriting a legacy codebase, can turn the token and custom-property views into a concrete worklist. A solo developer on a small project will find the quality score interesting but the token audit more useful.
Deciding what to act on
Prioritize by blast radius rather than by score alone:
| Finding | Usually worth fixing when | Often safe to ignore when |
|---|---|---|
| Duplicate or near-duplicate colors | They appear across many components | They're a deliberate one-off |
| Diverging font stacks | More than two or three exist | Variation is intentional per surface |
| Orphaned custom properties | Nothing references them | They're part of a public theming API |
| High specificity | Overrides are the norm, not the exception | The codebase is small and stable |
One caveat: a URL-based analysis reflects what the page actually serves, including third-party CSS you may not control. If you want to judge your own code, paste the raw source instead.
A useful next step is to run the analysis once, save the token list, then re-run it after your next cleanup pass and compare. Drift is easier to see as a trend than as a single snapshot. For broader context on CSS tooling, MDN Web Docs documents the underlying features these views inspect.
What specific metrics does Project Wallace provide to identify CSS bloat and inconsistencies?
Project Wallace focuses on codebase-wide patterns rather than single-file linting. Its analyzer reports concrete counts and distributions that expose bloat and inconsistency: unique color values (including duplicate colors in different formats), competing font stacks, embedded image weight, selector complexity, specificity distribution, and redundancy. The quality score combines those signals into one number, while the design token audit groups colors, font sizes, shadows, and spacing values so drift is visible. The custom property inspector shows which properties are declared, used, or orphaned, and the cascade layer visualizer maps @layer order, nesting, and specificity implications. Standalone utilities such as the CSS prettifier, minifier, diff viewer, and coverage inspector support one-off fixes.
A practical next step is to run the analyzer on a real stylesheet, then sort the token audit by frequency and look at the long tail — the colors or font sizes used once or twice usually reveal the inconsistencies. Compare that list against the specificity distribution: if the outliers cluster in a few components, the bloat is local; if they are spread across the codebase, the design system itself needs attention. For teams already using a design-token pipeline, the custom property inspector is the quickest way to find orphaned declarations before they become dead weight.
Can Project Wallace help me audit design tokens and custom properties in my CSS?
Yes. Project Wallace is built for exactly this kind of audit. Its Design token audit extracts every color, font-size, shadow and spacing value from your stylesheets and groups them, so you can see where a design system is consistent and where it is drifting. A separate Custom property inspector traces each CSS custom property, showing which are declared, which are actually used, and which are orphaned.
What the audit surfaces in practice
The tool's own framing is about scale: palettes that quietly grow to 140+ unique values, duplicate blues in different formats, opacity hacks, and font stacks that diverge across a codebase. That is the useful part of a token audit — not finding one bad value, but seeing the count and the duplicates at a glance.
For custom properties specifically, the declared-versus-used split is the practical win. An orphaned --brand-500 that nothing references is dead weight and a sign that a rename or refactor was left half-finished.
How to run it
You can paste a URL or raw CSS, and the page describes results in seconds. A realistic workflow:
- Start with your compiled stylesheet, since that reflects what ships.
- Run the token audit and sort by frequency — the long tail of one-off values is usually the drift.
- Run the custom property inspector and list properties with zero usages.
- Fix the obvious orphans and duplicates first; they are low-risk and shrink the surface for everything else.
Where it fits in a wider review
Project Wallace is a code-level analyzer, not a design tool. It will tell you that you have 47 shades of gray; it will not tell you which one is the brand gray. Pair it with your token source of truth, and treat the audit as a diff against that source. Related free utilities you may already use include CSS Stats for high-level selector and declaration counts, and Stylelint if you want the same rules enforced continuously in CI rather than checked on demand.
The trade-off is scope: this is a snapshot of one stylesheet or URL at a time, so for a large multi-package repo you will need to decide which build artifact represents your system before the numbers mean anything.
What standalone CSS tools does Project Wallace offer, such as a prettifier or minifier?
Project Wallace offers several standalone, no-signup browser tools for everyday CSS chores. From the page evidence, the listed tools are:
- CSS prettifier
- CSS minifier
- CSS diff viewer
- Coverage inspector
- Specificity tool (the excerpt is cut off at "Speci...", so treat the exact name as unconfirmed)
These are positioned as one-off utilities: paste your CSS, get the job done, with no signup or paywall mentioned.
How they fit into a workflow
Use the standalone tools when you need a quick, single-purpose result rather than a full report. For example, a developer reviewing a pull request can run a CSS diff viewer to see exactly what changed between two stylesheet versions, or use a coverage inspector to spot rules that no longer match anything. The prettifier and minifier serve the opposite ends of the same file: one for readable formatting before review or commit, the other for a compact output when shipping. A specificity tool helps settle the "why is this override winning?" question without manually counting selector weights.
The broader analyzer is the different choice: it produces the full x-ray, including the opinionated quality score, design token audit, custom property inspector and cascade layer visualizer. Reach for the standalone tools when the task is narrow and immediate; reach for the analyzer when the question is about the whole codebase.
A practical decision rule
If you can name the single transformation or check you want, start with the matching standalone tool. If you cannot yet name it, or you suspect the problem is systemic, run the full analysis first and let the results point you to the right fix.
How does Project Wallace's CSS quality score work and what does it measure?
Project Wallace's quality score condenses several structural signals about a stylesheet into one number, then leaves the underlying detail visible so you can act on it. According to the site, the score is built from specificity distribution, redundancy, selector complexity, and recognized CSS best practices. In practice that means it is a heuristic health indicator, not a spec-compliance score: it responds to how your CSS is written and organized, not to whether the browser renders it correctly.
What the score draws on
- Specificity distribution — whether selectors cluster at low specificity or pile up into the mid-to-high range where overrides become normal. A broad spread with a heavy tail usually signals "specificity wars."
- Redundancy — duplicated declarations, near-identical rules, and repeated values that could collapse into shared tokens or utilities.
- Selector complexity — long descendant chains, deep nesting, and compound selectors that are harder to reuse and reason about.
- Best-practice signals — the opinionated layer of the score, based on patterns the tool treats as healthy or risky.
What it does not measure
The score won't tell you whether your layout is correct, whether your accessibility contrast passes, or whether your CSS matches your design intent. A small, tidy stylesheet and a large, disciplined one can both score well; a large codebase with a few systemic leaks can score poorly even if every individual component looks fine. Treat the number as a triage pointer, not a verdict.
How to use it in a real workflow
Imagine you inherit a five-year-old design system. Component reviews pass, but the bundle keeps growing and colors keep multiplying. Run the analyzer, read the score, then work backward through the dimensions it flags: if specificity is the problem, audit override chains before touching tokens; if redundancy dominates, look for duplicated custom properties and font stacks first. The score tells you where to start, not what to delete.
As a next step, pair the score with the design-token audit and custom-property inspector on the same page — those give you the concrete list of drifting values behind the number. The site notes the analyzer accepts either a URL or raw CSS, which makes it easy to compare a before-and-after snapshot after a cleanup pass.
NS1
Netlify
User reviews (0)