Check for Issues - Identify missing classes

My design uses a class ‘PanCol’. Unfortunately, I typed ‘PenCol’ deep in my design and it took me all morning to find the issue.

Would it be possible to identify use of classes that have not been defined?

1 Like

Ctrl f brings up the find and replace. Also when the results show, if you click on the wee spyglass you get taken to the element. You can also just use the search box at the top of the html panel.

1 Like

Can’t see how I can search for a spelling mistake I didn’t realise I had made :smiley:

It would be virtually impossible for the program to know what classes to look for when they could be generated dynamically or from external css files.

This video might be of help on debugging css:

Thank you for the suggestion! We can add some type of report in “Check for Issues” for this. As richards pointed out there are many situations in which users add CSS classes to elements, which are not supposed to have corresponding CSS code in the app. Maybe if we explain in the report that missing classes are not necessarily a problem, users won’t be confused.

Excellent video :+1: Thank you.

‘Check for Issue’ already reports defined classes which don’t exist in the HTML so it should be
possible for the system to identify classes in the HTML that don’t exist in the stylesheets.