Page 1 of 1

CSS Inheritance

Posted: Sat Nov 26, 2016 9:14 am
by RSteinwand
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?

Re: CSS Inheritance

Posted: Sat Nov 26, 2016 1:30 pm
by MikeGale
It's a real pleasure to see an article like this. Bang on target.

Re: CSS Inheritance

Posted: Mon Nov 28, 2016 9:28 am
by RSteinwand
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.

Re: CSS Inheritance

Posted: Tue Nov 29, 2016 9:30 pm
by MikeGale
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.

Re: CSS Inheritance

Posted: Tue Nov 29, 2016 9:42 pm
by RSteinwand
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.