CSS Inheritance

For most frontend developers, it’s pertinent to understand CSS as it works closely to help style pages for your application. If working with Javascript (a object-oriented programming language), tying your knowledge of OOP can be directly translated to OOCSS (object-oriented CSS).

For those who may not know, CSS stands for cascading style sheets — what makes up a large chunk of styling for a webpage. Object oriented languages usually focus on creating reusable components or classes in order to make applications more reusable (duh!), as well as create and establish relationships between said classes.

OOCSS is not a new language, but more so a methodology that can be used in order to better organize your work. This may not work for all instances of CSS, but some great ways to organize your work are:

• working with classes instead of IDs
• better organize your CSS by creating either a table of contents or into labeled sections
• extend elements onto targeted classes rather than parent classes

With that being said, inheritance is a huge part of OOP code. In these languages, classes inherit directly from their parent class and its properties and methods. Like stated above, this is done in order to stop repeating code. It is no different when discussing CSS code.

inherit

For example, if you have a parent class that wants the text to be red, any children of this parent class will have red text unless stated otherwise. Easy enough to follow so far, right?

However, not all CSS properties are inherited. For example, height, width, border, margin, and padding are among the properties that are not inherited. Here is where the inherit value comes in. If you set inherit on an “uninheritable” property, it will inherit the property of its parent. Something to remember is that you are only able to inherit from the direct parent, not a few levels down. In other words, the inheritance can’t travel down the chain to grandchildren — inherit must be called for each child.

initial

Initial is a CSS property value that can be used to set the initial value of a CSS value of a property, thus setting the default value for the CSS property. This is different from the default settings that get assigned to CSS properties if none are initially assigned.

unset

The unset property works with inherited and uninherited properties of CSS. If unset is set on an inherited property, it will reset the property value to the inherited value. If set on an uninherited property, it will reset to the initial value.

revert

Like we stated earlier, there are certain base values that are defaulted to if nothing is set to the property. This can be used if there are nested divs or styles that you don’t want to be inherited all the way through the children and grand children. Just set whatever property you would like to revert by setting it to the revert keyword.

In conclusion, these are just four keywords that can assist you in your CSS journey on inheritance, as well as CSS organization.