Project Wallace

@projectwallace.com

502 Followers 74 Following

CSS analyzers that checks your complexity, specificity, performance, Design Tokens, custom properties and much more. Webmaster: @veneman.dev 🔖 projectwallace.com

A list of css cascade layers. At the top level we see layers named core, third-party, components and utility. Most of the layers also have sub-layers.
webpage with 3 columns. first column is really narrow and has radio buttons for presets: recommended, meintainability, performance and correctness. Second column shows a bunch of CSS with lots of red squiggly lines, indicating errors. Third column shows a table of all errors found and one row selected.
Black t-shirt with small print of 10cm by 10cm on the chest. The print is in bold white font, saying "Chaotic Style Sheets". Over top of that a text in bright green graffiti text "Project Wallace".
Terminal output of using stylelint to lint an entire project's CSS as a whole. There are loads of errors: file size too big, too many different CSS units used, too much selector duplication, too much declaration duplication, unused custom properties, too many declarations per rule. The list goes on and on.
Project Wallace layer overview. Highlighted is one layer: `config.text.fonts`. Other layers can be seen in close proximity.
A social media preview image, or card. The title is "The CSS Selection". Subtitled: "The state of real-world CSS usage, 2026 edition". The bottom shows some stats: 100+ metrics, 100,000 websites, 41% use :has(), 9.61% use @container. The design shows a bright grean/teal outline and a dark background with a dark-green to dark-gray gradient from top to bottom. There are two seemingly random rectangular shapes in the top right, probably visual decoration.
CSS Custom property inspector pointing out 32 unused custom properties on, er, firefox.com. Left panel shows the entire blob of CSS inspected. Right panel shows a list of 32 custom properties, like `--m24-off-white` and `--grid-gutter`.
The old menu: 9 items, only some arbitrary pages.
Scatter plot and a table showing how deeply nested each seletcor, atrule, rule or declaration in a stylesheet is. This example has nesting declarations up to 6 levels deep.
Miriam standing on stage before a slide that says "complexity is something to manage"
Project Wallace's CSS Analysis overview focusing on the atrules section, showing two panels about CSS containers. The first panel shows which container queries were found. The second panel shows which container names were found, both in container queries as well as declarations explicitly setting a `container-name` property (or via the `container` shorthand 🤮).
Project Wallace's CSS analysis overview, focusing on the Atrules section. It shows several panels, the @media ones being relevant here. A panel on the left says `@media` with 2211 items (165 unique). The panel on the right says `media features` with 2679 items in total, 17 unique.
Project Wallace's css analysis page but unlike every other screenshot posted here so far this one is white with black text.
Project Wallace CSS layers report with a devtools panel showing the layer composition as a JSON object.
Project Wallace's design tokens analysis webpage showing the color swatches of Netlify. It displays a large list of 144 unique colors shown in 3 columns. The right part of the image shows the browser's devtools open, proving the use of CSS `column-width: 32ch`.
Project Wallace's item usage table showing a dozen rows. Each row contains a blurb of CSS, neatly syntax highlighted. The same CSS is shown on the right panel, in context in it's surrounding CSS.
A table with two columns: Count and Value. The table has 12 rows containing various CSS pseudo classes.
Project Wallace's CSS Coverage table showing about 15 table rows. There are columns for URL, total bytes, coverage and coverage visualized. There's a little downward pointing triangle after the column header for total size. The table rows appear sorted by filesize.
A CSS diff showing `_zoom: 1 !important` ans before and `_zoom: !ie` as after.
A split pane with on the left a table that contains all CSS files found on projectwallace.com. The table lists tje size, used size, unused size and coverage ratio for each file. The right pane contains the CSS of the selected file in the table. The CSS is highlighted and also marks all the lines that were covered according to Chrome's analysis.
Custom Property search results: the query `toy` is entered and about 15 search results are show. Each result has the substring `toy` outlined in a blue color to indicate that this is why it showed up.
Project Wallace's custom property inspector showing that this CSS has 49 unused properties, 9 undefined properties and 13 undefined but with a fallback value.
Wallace's custom property inspector showing the search bar with the text `!pd-` and the resulting list of properties where neither of them contains the prefix `pd-`
Project Wallace's CSS analyzer showing a graph with ruleset sizes. The rulset size '1' is selected, showing a list of all rules that only have a single selector and no declarations. The devtools panel on the bottom makes it clearly visible that there are tons of rules that contain only commented out declarations.
Project Wallace's CSS analysis report, showing the section about Atrules. The block that displays the layer atrules shows all the discoverd layers in a tree as the browser would resolve them in the cascade.
Project Wallace's custom property inspector. A two-split panel with on the right a list of custom properties. On the left a panel with the analyzed CSS, syntax highlighted and line numbers shown.
Excerpt from css-layer-tree's readme which includes usage instructions and the resulting data.
A webpage with the title CSS @layer visualizer. Below it is a form with a single textarea with some CSS entered in it. The CSS contains an import rules as well as several layer atrules. Below the form is a visualisation of all the layers foud in the CSS and in which order and levels of nesting they were discovered.
A webpage on Project Wallace rendered on a narrow screen size. The top navigation is visible, showing 3 items horizontally and 3 more items vertically in a popover menu that is triggered by either a mouse or a keyboard. The current page (CSS layer visualizer) is highlighted in the popover.
Two black shirts. One says "CSS CSS CSS" in grunge type with a top-to-bottom teal-to-lightblue gradient. The second shirt says "CSS is rad" .
A webpage with title "CSS Diff". It features two textareas, one for CSS Before and one for CSS After. Both areas contain large amounts of CSS. Beneath it shows a github-like line-by-line diff, highlightling wich lines have been changed, added or removed. It also features syntax highlighting for the CSS.