iiinova — where your digital self keeps evolving

Project Wallace @projectwallace.com · 14/09/2026

🍾 NEW: Baseline overview Quickly scan the Baseline status of your website's CSS! 🩻 www.projectwallace.com/baseline-ove...

A portion of a page from project wallace. It shows three panels, two on the top, one at the bottom. The top left panel is titled "Baseline status summary" and shows a table and graph showing that 26 feaures are widely available, 2 newly available and 5 limited available. The top right panel is titled "Widely available features by year" and shows a table with all years since 2018 and each year has a bar graph of how many features of that year are used. The bottom panel shows a huge table with each used feature, the amount of usage, the dates fro when it became newly available, widely available, often a link to caniuse.com, and finally a column that indicates browser support for Edge, Chrome, Firefox and Safari.

0286

Project Wallace @projectwallace.com · 07/08/2026

Update color-sorter and css-design-tokens packages to replace colorjs with colordx to increase performance and decrease install size. 12MB had always been too much, but no longer!

npmx.dev's view of the `@projectwallace/css-design-tokens` package. It shows a bright green/positive banner saying "Package size decreased since v0.11.8!🎉 Install size reduced by 93% (15.8 MB smaller)"

010

Project Wallace @projectwallace.com · 12/06/2026

If you want to see if @matuzo.at's actual css layer architecture is exactly as advertised on #cssday, check out www.projectwallace.com/css-layers-v...

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.

182

Project Wallace @projectwallace.com · 08/06/2026

Dogfooding the Wallace stylelint plugin on an upcoming new page on the website. There's so much to improve: more granular error ranges, better error messaging, subtle bugs to fix. But it'll be good!

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.

021

Project Wallace @projectwallace.com · 08/06/2026

A sudden spark of inspiration yesterday and now we're waiting for the printing company to deliver these bad boys.

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".

Black t-shirt with big print of 30cm by 30cm on the back. The print is in bold white font, saying "Chaotic Style Sheets". Over top of that a text in bright green graffiti text "Project Wallace".

Black t-shirt with big print of 30cm by 30cm on the back. The print is in bold white font, saying "Chaotic Style Sheets". Over top of that a text in bright pink graffiti text "Project Wallace".

051

Project Wallace @projectwallace.com · 24/04/2026

Fight slop, one lint rule at the time. Or all the rules. I don't make the rules. Or, actually, I do.

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.

010

Project Wallace @projectwallace.com · 24/03/2026

Some people get mad when we shout at you for having to many declarations in one rule, but what if you'd just organize it in more layers? 😇 www.projectwallace.com/css-layers-v...

Project Wallace layer overview. Highlighted is one layer: `config.text.fonts`. Other layers can be seen in close proximity.

052

Project Wallace @projectwallace.com · 01/02/2026

We're progressing! Hoping to launch The CSS Selection later this week, maybe before the weekend if all goes well. Also hoping that the estimated reading time of 45-60 minutes won't scare people too much 😅

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.

000

Project Wallace @projectwallace.com · 21/10/2025

If you really hate looking at unused custom properties, maybe clean them up? 😇 I know looking at unused custom properties not applied in devtools is not the same as potentially flawed static analysis on a large chunk of CSS, but hey...

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`.

010

Project Wallace @projectwallace.com · 20/09/2025

Gave the ol' CMD+K menu a fresh lick of paint and added a search bar. Much more useful this way 😍

The old menu: 9 items, only some arbitrary pages.

The new menu: all possible pages included grouped by type, as well as a new search field.

000

Project Wallace @projectwallace.com · 17/06/2025

🧛 Anyone up for counting the depth of your CSS nesting? Could be interesting to spot deeply nested and hard to debug rulesets, declarations, etc.

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.

021

Project Wallace @projectwallace.com · 01/06/2025

🆕 Container names. Because we all sometimes forget to name a thing, or forget that we named it and never used it 😇

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 🤮).

000

Project Wallace @projectwallace.com · 01/06/2025

🆕 See which Media Features are used. Useful if you have many media queries and want a quick view of which features are queried. Idea taken from @httparchive.org's CSS chapter.

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.

000

Project Wallace @projectwallace.com · 14/04/2025

🔆 last night I shipped a light theme There may be bits and bobs still not converted yet so please let me know if anything looks broken. Also, grab some sunglasses 😎

Project Wallace's css analysis page but unlike every other screenshot posted here so far this one is white with black text.

152

Project Wallace @projectwallace.com · 03/04/2025

✌️ TWO new features released Well, actually 3. Oh who cares anyway. ✅ Copy your CSS @layers as JSON ✅ Show devtools on the custom property page ✅ Copy all/unused/undefined/undefined-with-fallback properties as JSON

Project Wallace CSS layers report with a devtools panel showing the layer composition as a JSON object.

Project Wallace's custom property inspector with devtools on the bottom. It shows a new panel that contains all the custom properties as JSON arrays.

112

Project Wallace @projectwallace.com · 02/04/2025

Using it to display the unique colors found in CSS. Using column layout allows for nice visual grouping of the colors that's harder to do with grid or flex. www.projectwallace.com/design-token...

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`.

020

Project Wallace @projectwallace.com · 24/02/2025

The item usage panel now also highlights syntax.

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.

010

Project Wallace @projectwallace.com · 20/02/2025

✨ feature alert: pseudo class analysis www.projectwallace.com/analyze-css

A table with two columns: Count and Value. The table has 12 rows containing various CSS pseudo classes.

0113

Project Wallace @projectwallace.com · 07/02/2025

You can now sort the CSS Coverage table by URL, coverage or filesize! www.projectwallace.com/css-coverage

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.

100

Project Wallace @projectwallace.com · 06/02/2025

Another one: if you were writing very old-skool CSS with some insane browserhack like `!ie` instead of `!important` we would actually still print !important. Now you can have your `!ie`. But I'm bvery disappointed if you actually do. github.com/projectwalla...

A CSS diff showing `_zoom: 1 !important` ans before and `_zoom: !ie` as after.

110

Project Wallace @projectwallace.com · 03/02/2025

📢 CSS Coverage viewer A new page recently arrived and it helps you inspect your CSS coverage generated from Chrome/Edge devtools, or more importantly: coverage reports generated from Playwright/Puppeteer (because they can span multiple page navigations)!! www.projectwallace.com/css-coverage

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.

272

Project Wallace @projectwallace.com · 28/11/2024

Search results now get an outline around the matched part, this makes it easier to spot why a certain property ends up in the search results 🥳

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.

000

Project Wallace @projectwallace.com · 27/11/2024

Custom Property analyzer now also tells you which custom properties are: - never declared 🙄 - but still used in a var() 😵‍💫 - but with a fallback value ☺️ This is a little better than just checking for the propery never being declared, because the fallback acts as a safe-guard.

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.

010

Project Wallace @projectwallace.com · 25/11/2024

🔎 search custom properties 🔍 When reviewing large codebases you often want to check for certain names or prefixes. The new search lets you do that, even with negated patterns like `!my-prefix`.

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-`

110

Project Wallace @projectwallace.com · 20/11/2024

🗣️💬 Preserving comments Our CSS formatter is updated to keep most of your CSS comments intact instead of stripping them. This can be helpful sometimes when auditing or prettifying your CSS. github.com/projectwalla...

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.

020

Project Wallace @projectwallace.com · 18/11/2024

So stoked about the layer tree visualisation that it's now part of the analyzer result page, instead of only listing out which layers were found 🥰

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.

131

Project Wallace @projectwallace.com · 17/11/2024

💫 Line numbers! 💫 Because Wallace is starting to look more and more like an actual editor and line numbers can be super helpful.

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.

040

Project Wallace @projectwallace.com · 12/11/2024

💫 new package alert! 💫 css-layer-tree analyzes your CSS layers and creates a single tree of it. 🔗 github.com/projectwalla...

Excerpt from css-layer-tree's readme which includes usage instructions and the resulting data.

011

Project Wallace @projectwallace.com · 08/11/2024

If you are using CSS @layer you probably want to check that the order and nesting is correct as well. Our handy little layer visualizer helps with that! 🥞 www.projectwallace.com/css-layers-v...

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.

000

Project Wallace @projectwallace.com · 03/11/2024

📍 Improved the website navigation to include all important tools in the header. On smaller screens the overflow wraps into a popover so items can still be accessed. Using it a ton already myself, hope you'll find it useful too!

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.

000

Project Wallace @projectwallace.com · 03/11/2024

As winter draws closer I'm seriously considering making these into warm and cozy hoodies. (Image compression not doing me a favor here, the colors and vibrance on these are _unreal_)

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" .

001

Project Wallace @projectwallace.com · 30/10/2024

🎉 CSS Diff viewer 🎉 👉 See which lines were changed, removed or added 👉 Familiar interface, because you already know what diffs should look like 👉 Syntax highlighting (if your browser supports it) 👉 Diff summary (lines added/removed and total lines changed)

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.

000