https://www.smashingmagazine.com/2016/1 ... t-friends/
Looks like a nice way to minimize code. Why haven't I seen a way to do this online?
CSS Inheritance
-
- Rank VI - Professional
- Posts: 596
- Joined: Mon Jun 09, 2008 2:12 pm
- Location: Fargo, ND
CSS Inheritance
Rick
-
- Rank VI - Professional
- Posts: 726
- Joined: Mon Dec 13, 2004 1:50 pm
- Location: Tannhauser Gate
Re: CSS Inheritance
It's a real pleasure to see an article like this. Bang on target.
-
- Rank VI - Professional
- Posts: 596
- Joined: Mon Jun 09, 2008 2:12 pm
- Location: Fargo, ND
Re: CSS Inheritance
I'm finding some stupid stuff that's inlined on every page of my public website:
.main{margin-left:220px;text-align:left;line-height:1.5}
..
p{margin:1em 0}
..
.main p{line-height:1.5em;margin:1em 0}
Removed even more with unneeded text-align, color and background color.
Round 1: I removed 300-400 bytes EACH from 152 public page's inlined css with about 2 hours of work.
Round 2: Removed 500 byes from the external (post-loaded) stylesheet.
Round 3: A properly placed text-decoration:none can replace 3 on every page and 3 more in the post-loaded stylesheet and print-stylesheet.
I think I'm running out of low-hanging fruit. Anything more will require a lot more work.
.main{margin-left:220px;text-align:left;line-height:1.5}
..
p{margin:1em 0}
..
.main p{line-height:1.5em;margin:1em 0}
Removed even more with unneeded text-align, color and background color.
Round 1: I removed 300-400 bytes EACH from 152 public page's inlined css with about 2 hours of work.
Round 2: Removed 500 byes from the external (post-loaded) stylesheet.
Round 3: A properly placed text-decoration:none can replace 3 on every page and 3 more in the post-loaded stylesheet and print-stylesheet.
I think I'm running out of low-hanging fruit. Anything more will require a lot more work.
Rick
-
- Rank VI - Professional
- Posts: 726
- Joined: Mon Dec 13, 2004 1:50 pm
- Location: Tannhauser Gate
Re: CSS Inheritance
How much of the content were you able to edit using regular expressions?
In the past I've found that an extremely productive way to do these things.
In the past I've found that an extremely productive way to do these things.
-
- Rank VI - Professional
- Posts: 596
- Joined: Mon Jun 09, 2008 2:12 pm
- Location: Fargo, ND
Re: CSS Inheritance
I did it all manually by searching the page. I have about 5 public templates, depending on scripts used and other factors. Most of the inlined css is similar so what applies to one is easily applied to the others.
I have close to 7k of inlined critical css, which makes my page start to render in under .5 seconds. The rest of the css loads after page load via a script. More info: https://jonassebastianohlsson.com/criti ... generator/ Of course, the inlined css is not cacheable so some might dispute the effectiveness, but it makes Google happy. Most of my pages get a 99% PSI score with a 1% penalty for using Analytics.
I have close to 7k of inlined critical css, which makes my page start to render in under .5 seconds. The rest of the css loads after page load via a script. More info: https://jonassebastianohlsson.com/criti ... generator/ Of course, the inlined css is not cacheable so some might dispute the effectiveness, but it makes Google happy. Most of my pages get a 99% PSI score with a 1% penalty for using Analytics.
Rick