Search code examples
htmlcssasp.netvisual-studiovisual-studio-2022

How to find HTML elements and ASP controls that have CSS class references that have no definition in Visual Studio

I am looking for a way to locate CSS class names that HTML elements and ASP controls reference in their "class" and "CssClass" properties, but where the class that is referenced doesn't exist in any referenced CSS files.

For example, if I have elements defined as:

<p class="class_apple">Apple</p>
<p class="class_car">Car</p>
<p class="class_tomato">Tomato</p>

But the CSS files referenced only have definitions for class_apple and class_tomato, then I need to know that "class_car" is being referenced, but it doesn't exist. This could be with a visual indicator in Visual Studio or even a list that would include "class_car" since it's not defined in any style sheets.

I thought Visual Studio 2022 would put squiggly lines under a bad CSS reference, but evidently it doesn't.

I'm not worried about definitions in the stylesheet files not being used, I'm only worried about references to classes that don't exist. I don't need a list of the elements with the bad references, just the class name. I can find the elements with the find tool in Visual Studio.

I'm willing to do some work to find these bad references, but any tools out there that might exist would be very helpful. I imagine this would be something that would be needed for projects that have been maintained for quite a while. Not sure I'm willing to pay a lot for an extension that could do this, but I might be willing to throw a few bones to an extension creator for something like this. Even adding just the squiggly line under the references would be helpful, if not a list.

Solution

  • You can use the following items:

    1. Use a linting tool: ESLint or StyleLint can be configured to check for undefined CSS classes.
    2. Write a custom script: Create a script that parses your HTML/ASP files and CSS files, then compares the classes used versus those defined.
    3. IDE extensions: Look for Visual Studio extensions that offer this functionality. While I can't recommend specific ones, searching the Visual Studio Marketplace might yield results. (Like: CSS Navigation Plugin)

    I also suggest that if you do not find a solution, use the ideas of jetbrains (Like: WebStorm)