-7

How to list all the CSS classes that I have used throughout my code, which DO NOT HAVE "CSS ruleset" defined for it?

Something like

/*Definition (or Rule set) for .some-random-class 
doesn't exist or is commented out like below

.some-random-class {
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

*/

.known-class {
  background-color: red;
  width: 100px;
  height: 100px;
}
<div class="some-random-class">
  <span class="known-class"/>
</div>

I'm expecting something like getAllUndeclaredCSS() to return ['some-random-class'] as the answer.

Update 1: This is not same as "Checking which CSS Styles are being used", since the definitions doesn't exist, but the usage exists

Update 2: I have initial answer to help me get started. Doesn't work in all cases, but works to some extent.

Aftab Khan
  • 3,853
  • 1
  • 21
  • 30
  • Possible duplicate of [Is there a way to check which CSS styles are being used or not used on a web page?](https://stackoverflow.com/questions/4361007/is-there-a-way-to-check-which-css-styles-are-being-used-or-not-used-on-a-web-pag) – Sagar Kodte Feb 20 '18 at 11:48
  • I am looking for the opposite of that. I do not have CSS classes defined (because I removed old libraries), my code is using it. I need a way to find out missing definitions. – Aftab Khan Feb 20 '18 at 11:51
  • How can I reword the question, to make it clear? – Aftab Khan Feb 20 '18 at 12:02
  • This may be a tedious method if you have lots of pages but it may still prove useful - if your using Chrome you can press `Ctrl + Shift + P` and search for `show coverage` this will show you how many of your styles are being used across this particular page – Aaron McGuire Feb 20 '18 at 12:10
  • The CSS ruleset doesn't exist for some of the classes I have used. I'm pretty sure those won't show up in Chrome coverage. – Aftab Khan Feb 20 '18 at 12:11
  • 1
    This is a valid question related to CSS usage. I am not asking for any book, software library or a plug-in. Nor it is a request for tutorial. – Aftab Khan Feb 20 '18 at 13:07
  • @Aftab you want a JavaScript solution or something else? – Salman A Feb 20 '18 at 13:14
  • @SalmanA Anything would work. Your answer has given me couple of hints. I will try to tweak it to give me what I want. – Aftab Khan Feb 20 '18 at 13:17
  • 1
    Closed as what? Apparently CSS questions are restricted to questions such as how do i draw a flower with 11 petals using CSS and are well received. – Salman A Feb 20 '18 at 17:39

2 Answers2

1

This worked for me!

let elementsWithClass = document.querySelectorAll("[class]");
let classNames = new Set();
elementsWithClass.forEach(node =>
    node.classList.forEach(item => classNames.add(item))
);

let stylesheets = document.styleSheets;
let definitionsFound = new Set();
for (i = 0; i < stylesheets.length; i++) {
    rules = stylesheets[i].cssRules;
    for (j = 0; j < rules.length; j++) {
        if (rules[j].type === CSSRule.STYLE_RULE) {
            let match = rules[j].selectorText.match(/\.[^\.: ]+?(?=\.| |$|:)/g);
            match && match.forEach(item => definitionsFound.add(item.replace(".", "")));
        }
    }
}

let missingDefs = [];
classNames.forEach(item => {
    if (!definitionsFound.has(item)) {
        missingDefs.push(item);
    }
});
console.log(missingDefs);

Run this after opening your site! You will get to know list of CSS rules which has missing css rules. Thanks for the tip, @SalmanA

PS: If you are running an older browser which doesn't support Set change it to array and filter out the duplicates.

Aftab Khan
  • 3,853
  • 1
  • 21
  • 30
-3

Give this a try

:not([class])

This will just select all of the classes that have no css classes assigned to them.

Gauss
  • 1
  • 2