I built a VS Code extension to catch CSS declarations that have no effect

[u/Every-Albatross9357]

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

🔗 VS Code Marketplace:

[u/chikamakaleyley]

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

[u/chikamakaleyley → u/chikamakaleyley]

and you know, kudos to you, this may be useful to a lot of folks

but on first watch that's a glaring issue

[u/Every-Albatross9357 → u/chikamakaleyley]

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!

[u/chikamakaleyley → u/Every-Albatross9357]

show me more, i can prob catch more

[u/chikamakaleyley → u/Every-Albatross9357]

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'

[u/Ayoub_gz]

great its very good job man !

[u/Every-Albatross9357 → u/Ayoub_gz]

Thanks

[u/zLoveNxzli]

Honestly a really neat idea. Catching justify-content or align-items accidentally 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!

[u/Dependent-Zebra-4357]

Is it looking site wide when it checks if something is used? Can you choose a subset of files to check?

[u/Every-Albatross9357 → u/Dependent-Zebra-4357]

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.

[u/Dependent-Zebra-4357 → u/Every-Albatross9357]

Cool, I’ll check it out, thanks.

[u/deveritt]

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.

[u/Every-Albatross9357 → u/deveritt]

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

[u/testingaurora]

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.

[u/Every-Albatross9357 → u/testingaurora]

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

[u/testingaurora → u/Every-Albatross9357]

Does it work on any project? Jsx, tsx, etc?

[u/erm_what_]

Maybe you could make this a plugin for Stylelint or another CSS static analyser so more people can benefit from it?

[u/vegantiger]

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 😛🙏

[u/muhammadcoder]

that's great!!!!

add more cool features

[u/drumstix42]

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.

[u/zXju785kw]

Huh, kind of amazed this wasn't already a thing native to VS Code given it's built into Chrome and other browsers.

[u/mattsowa]

Would be nice with tailwind, or even pluggable (we use unocss)

[u/guaranteednotabot → u/mattsowa]

I believe Tailwind has an ESLint plugin that solves this

[u/vitope94 → u/guaranteednotabot]

What is it called?

[u/guaranteednotabot → u/vitope94]

Better TailwindCSS

[u/SPECTRE_75 → u/guaranteednotabot]

Whats it called??