Identifying all unused CSS class selectors in the code that do not have any CSS rulesets assigned

Question

Identifying all unused CSS class selectors in the code that do not have any CSS rulesets assigned

Is there a way to retrieve a list of all the CSS classes I have used in my code that do not have a corresponding "CSS ruleset" defined for them?

For example:

/*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 am hoping for a function such as getAllUndeclaredCSS() to provide the output ['some-random-class'].

Update 1: This is different from determining which CSS styles are actively being used, as I am looking for instances where the definitions are missing but the classes are being utilized.

Update 2: I currently have a basic solution to get me started. It may not cover all cases, but it works to some extent.

css css-selectors

Answer 1

Answer №1

I found the solution to my problem!

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);

Try running this code on your website to identify any missing CSS rules. Many thanks to @SalmanA for sharing this helpful tip!

PS: If you encounter issues using the Set in older browsers, you can switch it back to an array and remove any duplicates.

Answer 2

I found the solution to my problem!

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);

Try running this code on your website to identify any missing CSS rules. Many thanks to @SalmanA for sharing this helpful tip!

PS: If you encounter issues using the Set in older browsers, you can switch it back to an array and remove any duplicates.

Answer 3

Answer №2

Why not give this a shot?

:not([class])

This simple syntax will specifically target elements with no assigned CSS classes.

Answer 4

Why not give this a shot?

:not([class])

This simple syntax will specifically target elements with no assigned CSS classes.

Identifying all unused CSS class selectors in the code that do not have any CSS rulesets assigned

Answer №1

Answer №2

Similar questions

Enhance user experience with AngularJS Bootstrap autocomplete feature by automatically filling input box when hovering over dropdown options

Tips for customizing the appearance of path elements within an external SVG file being utilized as a background image

Styling links conditionally in a React component

What is the best way to adjust the position of a dropdown menu in Material UI?

Troubleshooting: Issues with Jquery's replaceWith function

Tips for utilizing CSS selector path in Selenium to extract a particular attribute from a span class in Python

Boxes not occupying entire vertical space

Error: Media queries must always start with a parenthesis

Is it possible to apply the box-shadow effect only to the left and right sides of a div?

Is there a way to prevent the text next to these FontAwesome icons from moving whenever the icon itself changes?

I'm unsure of how to eliminate the border outline on this particular text area

Bootstrap allows for the use of video backgrounds, offering the option for borders to be included

The tooltip being displayed is plain and lacks any design elements

resizing problem with images that adapt to different screen sizes

Leveraging the power of React in conjunction with an HTML template

WordPress WooCommerce causing the right bar to be pushed below

Using the `document.querySelector` method to target the `.mat-progress-bar-fill::after` element

Using jQuery to automatically scroll to the bottom of a div when sliding down

Is it possible for a media query to target only 2 elements instead of all 3?

Manipulating Objects with CSS Transform in Global/Local Coordinates