Which CSS files affect a web page?

Question

I have a web page that imports over 10 external css files. I've used Chrome Developer tools to inspect an element and try to gauge which css files the web page is using. After the page initially loads, I went through each element to see the css it references.

The problem is that there is javascript functionality which adds classes to certain elements, and I don't know how to replicate all that state. Is there a way to determine which css files have no impact on the web page?

The easiest solution is probably to remove the external css files and see what happens. — IanPudney, Jun 25 '13 at 19:44
@quinxorin The only question marks I see here are on the last sentence and the title. — dsgriffin, Jun 25 '13 at 19:46
I'm confused about how the author's choice to use a limited number of question marks determines whether the question is a duplicate. Note his statement "The problem is that there is javascript functionality which adds classes to certain elements, and I don't know how to replicate all that state." I don't believe the question you cited addresses that part of his question. — IanPudney, Jun 25 '13 at 19:48
Gengar, I'm thinking if you've only got 10 external CSS files, it wouldn't be too hard to simply brute force this. Remove a few at a time and see what happens, then adjust accordingly. — davepmiller, Jun 25 '13 at 19:45

score 0 · Answer 1 · answered Jun 25 '13 at 19:46

All the CSS files affect the web page, but the last selector is the only one affects to the element.

For example, if I use the follows CSS files:

<head>
 <link rel="stylesheet" url="css/style1.css" media="screen">
 <link rel="stylesheet" url="css/style2.css" media="screen">
</head>

And here are the styles:

Style1 CSS

a { color: black; }

Style2 CSS

a {
    text-decoration: none;
    color: blue;
}

What colour will have the link? Black and without underline because the last color property is in the last CSS file and in the last CSS file there is the text-decoration property.

Leo!

score 0 · Answer 2 · answered Jun 25 '13 at 19:52

If your page has Javascript generating dynamic content, then you can never know whether a given CSS rule will affect something on the page. The browser loads all CSS rules (sorted by precedence rules), so all CSS files may have some effect on the page content at some point.

If your page is only static content then it becomes a moot point, but if at some point your page loads a modal window with some new content, there's no way to know whether one of those CSS files you thought weren't being used would have applied to that new content.

Which CSS files affect a web page?

2 Answers2