<p><a><ul>

CSS Inheritance

I started coding in 2013. Recently, I took a drive down memory lane to see just how bad my CSS was back then. The biggest problem I saw was a failure to fully understand inheritance and implement it properly. As a result, my code was not DRY (Don’t Repeat Yourself).

This was actually the 2nd reminder I had in the past 3 weeks about inheritance. The other example would have been more funny were I not out $226 dollars in the process.

Without naming names, I tried out one of those PSD to HTML chop shops for a very basic UI interface, and I shit you not, every element on the page had its own style definition. That is to say – a very basic landing page with four sections had 2000 lines of CSS. Consequently, I had to throw the whole thing out and start over.

By applying inheritance, I cut it the project from 2000 lines of CSS to about 250. Not only does that load slowly; maintaining it is an absolute nightmare.

Lesson: outsource carefully and apply inheritance.

The concept of inheritance is simple enough. Take the following code:

<style>
div {
    color: green;
}
</style>

<div>
	<p>Hello world</p>
</div>

Unless overridden by a CSS declaration with greater specificity, the p tag will be green. Inheritance at work.

Now, lets change the CSS for the div to div { margin-top: 1rem }. Because margin-top is not inherited, the p tag will not get a margin-top of 1rem.

A lot of times its obvious which CSS properties are inherited and which aren’t. But not always. Therefore, for reference, I’ve created two lists: CSS properties that are inherited and CSS properties that are not inherited

Inherited CSS properties

  • azimuth
  • border-collapse
  • border-spacing
  • caption-side
  • color
  • cursor
  • direction
  • elevation
  • empty-cells
  • font-family
  • font-size
  • font-style
  • font-variant
  • font-weight
  • font
  • letter-spacing
  • line-height
  • list-style-image
  • list-style-position
  • list-style-type
  • list-style
  • orphans
  • pitch-range
  • pitch
  • quotes
  • richness
  • speak-header
  • speak-numeral
  • speak-punctuation
  • speak
  • speech-rate
  • stress
  • text-align
  • text-indent
  • text-transform
  • visibility
  • voice-family
  • volume
  • white-space
  • widows
  • word-spacing

Not Inherited CSS properties

  • background-attachment
  • background-color
  • background-image
  • background-position
  • background-repeat
  • background
  • border-color
  • border-style
  • border-top
  • border-right
  • border-bottom
  • border-left
  • border-top-color
  • border-right-color
  • border-bottom-color
  • border-left-color
  • border-top-style
  • border-right-style
  • border-bottom-style
  • border-left-style
  • border-top-width
  • border-right-width
  • border-bottom-width
  • border-left-width
  • border-width
  • border
  • bottom
  • clear
  • clip
  • content
  • counter-increment
  • counter-reset
  • cue-after
  • cue-before
  • cue
  • display
  • float
  • height
  • left
  • margin-right margin-left
  • margin-top margin-bottom
  • margin
  • max-height
  • max-width
  • min-height
  • min-width
  • outline-color
  • outline-style
  • outline-width
  • outline
  • overflow
  • padding-top
  • padding-right
  • padding-bottom
  • padding-left
  • padding
  • page-break-after
  • page-break-before
  • page-break-inside
  • pause-after
  • pause-before
  • pause
  • play-during
  • position
  • right
  • table-layout
  • top
  • unicode-bidi
  • vertical-align
  • width
  • z-index