CSS Inheritance

For general web development questions that are not specifically related to CSS HTML Validator. This includes (but is not limited to) general HTML, CSS, Accessibility, JavaScript, and SEO questions.
Post Reply
User avatar
RSteinwand
Rank VI - Professional
Posts: 596
Joined: Mon Jun 09, 2008 2:12 pm
Location: Fargo, ND
Contact:

CSS Inheritance

Post 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?
Rick
User avatar
MikeGale
Rank VI - Professional
Posts: 726
Joined: Mon Dec 13, 2004 1:50 pm
Location: Tannhauser Gate

Re: CSS Inheritance

Post by MikeGale »

It's a real pleasure to see an article like this. Bang on target.
User avatar
RSteinwand
Rank VI - Professional
Posts: 596
Joined: Mon Jun 09, 2008 2:12 pm
Location: Fargo, ND
Contact:

Re: CSS Inheritance

Post 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.
Rick
User avatar
MikeGale
Rank VI - Professional
Posts: 726
Joined: Mon Dec 13, 2004 1:50 pm
Location: Tannhauser Gate

Re: CSS Inheritance

Post 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.
User avatar
RSteinwand
Rank VI - Professional
Posts: 596
Joined: Mon Jun 09, 2008 2:12 pm
Location: Fargo, ND
Contact:

Re: CSS Inheritance

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