Strict inheritance prevents inheritable CSS properties from being inherited. At first glance this may seem like an odd feature, however the current CSS inheritance model can quickly get out-of-hand, and thus become unpredictable. An example taken from one of the top 30 most visited sites on Alexa can be seen below:
In the screenshot above the
font-sizeof the target element is defined 10 times. Having 10
font-sizedeclarations is either the result of 10 instances where the developer(s) intent was to override the font-size, or more likely is the result of poorly scoped selectors. Either way the
font-sizeof the target element is extremely brittle.
Inheritable properties are very vulnerable to changes in HTML attributes/structure, selector specificity or cascade position. A single change can produce a different outcome. In this case
!importanthas been used to protect the
font-sizefrom changes to specificity or cascade. However the winning property value is
inheritwhich means a further step is needed to track down where the
font-sizeis inherited from.
Strict inheritance avoids situations like this. With strict inheritance, each inheritable property can only be used by a set of whitelisted elements. For example setting
divis not allowed:
Attempting to do so throws a compile time error:
With strict inheritance applying
divis too vague. Instead
font-sizeshould be applied to a textual element:
This makes the behaviour of inheritable properties far more deterministic. In the example above the
pis and always will be 1.4rem. The risk of the
pinheriting a font size from somewhere else is removed. Treating inheritable properties like non-inheritable properties makes their behaviour predictable and robust.