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