Efficient way to consolidate duplicate css selectors according to specificity?

[Syrinj]

I have a bloated stylesheet, and want to consolidate the styles in order of specificity. Assume that the styles are already in the desired top-to-bottom order of specificity. They simply need to be consolidated.

For example, throughout the stylesheet, I have three different definitions of the `body` element displayed in top-to-bottom order below.

#1:

body {
      margin: 0
    }

#2:

body {
        margin:0;
        min-height:100%;
        background-color:#fff;
        font-family:Arial, sans-serif;
        font-size:14px;
        line-height:20px;
        color:#333
      }

#3:

body {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; // should override #2
      color: #000; // should override #2
      font-size: 1rem; // should override #2
      line-height: 1.5; // should override #2
    }

I'm looking for a script that doesn't just minify my CSS, but combines the properties while accounting for specificity and turns this mess into a single definition.

Desired outcome:

body {
      margin: 0;
      min-height:100%;
      background-color:#fff;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
      color: #000;
      font-size: 1rem;
      line-height: 1.5;
    }

Maybe I'm using the wrong search query to describe this (searched for 'minify,' 'consolidate,' 'compress,' 'optimize,' etc.) and have not found what I'm looking for. Does anyone have a script or site they can point me to that assists with this?

(I tried CleanCSS, CSS-Optimize, CSSO, and CSS Redundancy Checker but they don't seem to achieve this particular function, and I've tried using this old answer involving grunt on stackoverflow, but can't even get that to work properly. or maybe I'm just a n00b?)

 

[CCarter]

I believe the reason you may have problem with this is because with CSS the order matters. So the last CSS file/command is the one that's going to be used.

So in your example, if #1 was at the top of the file, and #2 was at the middle then #3 was in ANOTHER file that's further down the HTML source, guess what - your font-family would end up being "system-ui" first instead of "Arial".

Which options are you looking for - "system-ui" or "Arial" to be first?

And most importantly HOW would it know to choose which font when in you are in situations where there can be multiple CSS files and commands that contradict each other? That's why it'll have to go in order, but the "script" would need to pull in each relevant CSS file that loads on page, so it's got to load the page.

There are scripts that try to reduce redundancies as you can see, but the unfortunately perfect scenario is to do it manually yourself - IF it's that important. My question is, is it really that important? Probably a procrastination / busy work situation going on here.

 

[Syrinj]

I believe the reason you may have problem with this is because with CSS the order matters. So the last CSS file/command is the one that's going to be used.

So in your example, if #1 was at the top of the file, and #2 was at the middle then #3 was in ANOTHER file that's further down the HTML source, guess what - your font-family would end up being "system-ui" first instead of "Arial".

Which options are you looking for - "system-ui" or "Arial" to be first?

And most importantly HOW would it know to choose which font when in you are in situations where there can be multiple CSS files and commands that contradict each other? That's why it'll have to go in order, but the "script" would need to pull in each relevant CSS file that loads on page, so it's got to load the page.

There are scripts that try to reduce redundancies as you can see, but the unfortunately perfect scenario is to do it manually yourself - IF it's that important. My question is, is it really that important? Probably a procrastination / busy work situation going on here.

Got it. So in other words, the third rule doesn't "inherit" the "min-height" property of the second rule, for example? Or does the mere existence of the third rule cause browsers to ignore everything at all the first and second rules?

Yes, there's definitely some perfectionism going on, but it's not out of a spirit of procrastination. Willing to DM you to add context about what I'm doing on a larger timeline.

 

[CCarter]

the third rule doesn't "inherit" the "min-height" property of the second rule, for example?

Since there is no contradiction for the "min-height" in the 3rd, it would use the 2nd. It doesn't ignore everything, just overwrites contradictions.

It's only when there are contradictions like font-family in your example, where the last "contradiction" is used, which might or might not be what you want.

Line-height is also where you'll have problems. You shouldn't be writing css or code that is overwritten somewhere else, cause that a hunting down mess/nightmare.

 

[Ryuzaki]

I'd say the easiest way to do this would be semi-manually. What I mean by that is you probably have an idea already where the duplication is occurring, and as you fix some of it, the rest will more easily expose itself as your file gets smaller. That's the manual part.

The semi-manual part is that I'd suggest trying out your developer tools. Not only can you view where (which file and which line in the file) the CSS attributes are being defined, but you can view a "computed" version, which will show you exactly what's being used at the end of the day. Let me try to find an example.

​

Here is the <body> for this very thread on BuSo. On the left column, the top is the most-specificity while the bottom is the least. So now you can not only see where everything is being inherited from such as the css.php file on line 26, but you can also see what is being over-ridden by looking at what has strikeout going through it.

And finally, on the right you can see the total set of computed rules, but that won't be as helpful because it's also showing you everything inherited from <html> as well.

But if you go down the manual path, this is probably the fastest way of doing it. You just right click the element you want to inspect and choose "inspect element" and bam, you're there. It by no means will be as fast as some script doing the work, but I'm not aware of any script that's going to do it right, though it may be a good starting point to let it strip out the obvious stuff.

But typically a minifier does consolidate attributes and concatenate all the files keeping the specificity in place. That, too, could be a good place to start. You could let it minify, combine the rules, and concatenate (add all the files together in the right order) and then un-minify it so it's readable again. Then carry on like I'm suggesting above.

 

[Syrinj]

Since there is no contradiction for the "min-height" in the 3rd, it would use the 2nd. It doesn't ignore everything, just overwrites contradictions.

It's only when there are contradictions like font-family in your example, where the last "contradiction" is used, which might or might not be what you want.

Line-height is also where you'll have problems. You shouldn't be writing css or code that is overwritten somewhere else, cause that a hunting down mess/nightmare.

Okay yes I now see that in Devtools (not sure why I didn't just look there in the first place to confirm this but live and learn, I'm a noob).

And yes, I want the contradictions removed and to be left with just what is used so that I have a nice clean stylesheet with one global rule for each base selector.

I'd say the easiest way to do this would be semi-manually. What I mean by that is you probably have an idea already where the duplication is occurring, and as you fix some of it, the rest will more easily expose itself as your file gets smaller. That's the manual part.

The semi-manual part is that I'd suggest trying out your developer tools. Not only can you view where (which file and which line in the file) the CSS attributes are being defined, but you can view a "computed" version, which will show you exactly what's being used at the end of the day. Let me try to find an example.

​

Here is the <body> for this very thread on BuSo. On the left column, the top is the most-specificity while the bottom is the least. So now you can not only see where everything is being inherited from such as the css.php file on line 26, but you can also see what is being over-ridden by looking at what has strikeout going through it.

And finally, on the right you can see the total set of computed rules, but that won't be as helpful because it's also showing you everything inherited from <html> as well.

But if you go down the manual path, this is probably the fastest way of doing it. You just right click the element you want to inspect and choose "inspect element" and bam, you're there. It by no means will be as fast as some script doing the work, but I'm not aware of any script that's going to do it right, though it may be a good starting point to let it strip out the obvious stuff.

But typically a minifier does consolidate attributes and concatenate all the files keeping the specificity in place. That, too, could be a good place to start. You could let it minify, combine the rules, and concatenate (add all the files together in the right order) and then un-minify it so it's readable again. Then carry on like I'm suggesting above.

Just did a variation of this and it was exactly what I needed. Thank you! I'm breezing through this now!

 

[DarkRed]

This one works https://css.github.io/csso/csso.html

I removed your comments to make it work since they are broken. You need to "/*" before and then "*/" after the comment