CSS Inheritance

Discussion about CSS related issues.
Post Reply
User avatar
RSteinwand
Rank VI - Professional
Rank VI - Professional
Posts: 600
Joined: Mon Jun 09, 2008 2:12 pm
Location: Fargo, ND
Contact:

CSS Inheritance

Post by RSteinwand » Sat Nov 26, 2016 9:14 am

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?
Rick

User avatar
MikeGale
Rank VI - Professional
Rank VI - Professional
Posts: 711
Joined: Mon Dec 13, 2004 1:50 pm
Location: Tannhauser Gate

Re: CSS Inheritance

Post by MikeGale » Sat Nov 26, 2016 1:30 pm

It's a real pleasure to see an article like this. Bang on target.

User avatar
RSteinwand
Rank VI - Professional
Rank VI - Professional
Posts: 600
Joined: Mon Jun 09, 2008 2:12 pm
Location: Fargo, ND
Contact:

Re: CSS Inheritance

Post by RSteinwand » Mon Nov 28, 2016 9:28 am

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.
Rick

User avatar
MikeGale
Rank VI - Professional
Rank VI - Professional
Posts: 711
Joined: Mon Dec 13, 2004 1:50 pm
Location: Tannhauser Gate

Re: CSS Inheritance

Post by MikeGale » Tue Nov 29, 2016 9:30 pm

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.

User avatar
RSteinwand
Rank VI - Professional
Rank VI - Professional
Posts: 600
Joined: Mon Jun 09, 2008 2:12 pm
Location: Fargo, ND
Contact:

Re: CSS Inheritance

Post by RSteinwand » Tue Nov 29, 2016 9:42 pm

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.
Rick

Post Reply