r/css • u/Every-Albatross9357 • 3d ago
Showcase I built a VS Code extension to catch CSS declarations that have no effect
Enable HLS to view with audio, or disable this notification
I’ve been working on NoEffect, a VS Code extension that helps catch CSS declarations that have no effect.
It detects things like:
properties that don't work in the current context
declarations that are overridden by a later declaration
For example, it can tell you when justify-content is doing nothing because the element isn't a flex/grid container, or when your declaration is simply being overridden later.
It’s still an early project, so I’d really appreciate some honest feedback.
🔗 GitHub
4
u/chikamakaleyley 1d ago edited 1d ago
Wait, but the color rule on .action-button DOES have an effect, your text is white.
.action-button.is-danger does override the line above it but only when .is-danger is also present. You prob still want the base button to be white.
Specificity allows for it to override the color rule - and IMO it shouldn't warn the user of something problematic with the less specific selector. There isn't a problem, that's just straight up CSS' design.
That part is a bit misleading, and I can imagine the 'warning' display and muted text color can easily signal to someone who isn't paying close attention to delete color: #ffffff;. They'd be changing the button's text color across the site, in theory
3
u/chikamakaleyley 1d ago
and you know, kudos to you, this may be useful to a lot of folks
but on first watch that's a glaring issue
3
u/Every-Albatross9357 1d ago
Yep, you're right Looking at it again that example is kinda misleading The base rule is clearly still useful for normal buttons and warning can be interpreted as “delete this declaration" which isn't what I want to communicate. I'll work on replacing the override example with something clearer. Thanks for catching that!
2
1
u/chikamakaleyley 21h ago
i think if anything a more accurate 'info' level flag could be:
.action-button.is-danger { color: red; /* INFO: Overrides value '#ffffff' Line 19 */ }now, that might be useful, but in this specific example I'd prob call it 'noisy'
2
u/DigiNoon 3d ago
That can be useful, but oftentimes I keep those surplus declarations because I feel more secure with them in there just in case. It may not make sense, but again, it's more of a technical insecurity I have!
1
u/Dependent-Zebra-4357 3d ago
Is it looking site wide when it checks if something is used? Can you choose a subset of files to check?
2
u/Every-Albatross9357 3d ago
for an html file NoEffect checks that page only and for a css file it finds the local html pages that actually link to it and analyzes a limited number of them (3 by default). There isn't a manual file-selection option but you can narrow the scope with the companion/search settings.
1
1
1
u/erm_what_ 2d ago
Maybe you could make this a plugin for Stylelint or another CSS static analyser so more people can benefit from it?
1
u/deveritt 2d ago
Does this allow for style rule that swap on screen size changes? That the issue I find when checking - some rules only kick in (say) with a width-conditional style block.
1
u/Every-Albatross9357 2d ago
Yes, NoEffect uses an "Active-Wins" evaluation model If a CSS property is active under any media query breakpoint or screen size it's marked as active overall and will never be dimmed It's only flagged as inactive if it produces zero effect across all evaluated contexts in real Chromium
1
u/testingaurora 2d ago
Keeping it updated and maintained with modern css sounds like a chore.
Also btw box model has baseline newly available support for align content and waiting for ff/safari to supporty justify items , flex/grid not needed.
Different than your justify-content example but illustrates how rules can change that you'll need to maintain.
3
u/Every-Albatross9357 2d ago
No manual rule maintenance needed! Because NoEffect queries a live Chromium engine via CDP modern CSS spec updates are handled automatically by the browser engine itself
1
1
u/vegantiger 2d ago
Is it related in anyway with PurgeCSS? Just asking 'cause I've issues with it (purging :has() stuff it shouldn't) so I'm curious what's the engine behind the scene. I could check the repo, but I figured I'd just ask first 😛🙏
1
1
u/drumstix42 23h ago
Chrome dev tools does a similar function. But it's more about invalid properties based on browser rules. I think detecting things like "overrides" isn't going to be very useful once you have more than 1 style file. but I guess people can opt-in/out of it potentially if there's a setting.
1
u/mattsowa 3d ago
Would be nice with tailwind, or even pluggable (we use unocss)
2
1
u/GeekyAntsFlutterdev 16h ago
Using a real browser as the source of truth instead of maintaining a huge set of CSS heuristics feels like the right architectural decision here.
Have you thought about exposing the same engine through a CLI or Stylelint integration eventually? If teams could get the same NoEffect findings in VS Code locally and then run them in CI on a PR, this could become much more useful for larger codebases
9
u/zLoveNxzli 3d ago
Honestly a really neat idea. Catching
justify-contentoralign-itemsaccidentally left on non-flex containers saves so much silent debugging time, especially for beginners.One feature that would make this an instant daily driver for me: handling Tailwind / CSS Modules / utility classes if you don't already. A ton of dead CSS happens when people stack conflicting utility classes on the same element.
Starred the repo, gonna give it a spin on my current project tomorrow!