Using Locally Scoped Custom Properties
See the Pen Using Locally Scoped Custom Properties by kevinpowell (@kevinpowell) on CodePen.
Using Locally Scoped Custom Properties
Description: By using locally scopped properties, we can easily style individual components. The title here has a class of .title, as do the h2 for each of the following sections. Because I'm using locally scoped properties to style them, I don't even need to select them, I only have to select the parent and change the value of the property. There is no need to define them in the global scope, as they aren't global properties. For example, the --button-scale has no need to be defined globally, as it's only used within my buttons. Working like this can help keep things nice and organized, yet very easy to make changes without getting into specificity wars or the need to go wild with extra classes to make minor modifications.
Browsers: Chrome Edge Firefox Opera Safari
Dependencies: font-awesome.css
Responsive:Yes
Posted: 11.03.2019