--- title: Utilizing the “C in CSS published: true description: Stop fighting your style sheets and make the cascade work for you. cover_image: https://cdn-images-1.medium.com/max/800/1*WgqUqPaw6m2ARWw53NCXfg.png tags: CSS, Front-End Development, Sass --- *This article was originally posted on the [Graphite GTC blog](https://blog.graphitegtc.com/).* For a lot of developers CSS is a tricky beast to handle. Developers always tack on rules to the end of their styles sheets, causing some unintended consequences. After some raging and cursing at why CSS exists, an `!important` is added and voilÃ , it all works. Most of the time, these issues are caused by the *cascading* nature of CSS. Because of the deep seeded hatred for the “C in CSS, many smart people developed methodologies to help reduce this feature or to completely remove it. These methodologies include [OOCSS](https://www.smashingmagazine.com/2011/12/an-introduction-to-object-oriented-css-oocss/), [SMACSS](https://smacss.com/), and, [BEM](http://getbem.com/). The point of this post is not to argue against these methodologies; they’re really useful in managing your style sheets and also to keep your CSS uniform. What if we were able to use the cascading feature of CSS to our benefit? Imagine if we could write one CSS rule and have it propagate to the descending elements. To truly utilize the cascading nature of style sheets we will need to use some lesser known CSS units and keywords. We will employ the following: - EM (and sometimes REM) units - inherit - currentColor ## EMs and REMs You’re probably familiar with using `PX` units for sizing elements, margin, padding, borders, etc. We can do the same with `EMs` and `REMs` but with the added benefit that these units are relative rather than absolute values. [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/length#Relative_length_units) defines `EMs` as: > This unit represents the calculated font-size of the element. If used on the font-size property itself, it represents the inherited font-size of the element. MDN also gives this tidbit about `EMs` > This unit is often used to create scalable layouts, which keep the vertical rhythm of the page, even when the user changes the size of the fonts. The CSS properties line-height, font-size, margin-bottom and margin-top often have values expressed in em. Note that MDN says that `EMs` *“represents the inherited font-size of the element”* and are *“used to create scalable layouts”*. This is the exact thing we are looking for! Here is what [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/length#Relative_length_units) says about `REMs`: > This unit represents the font-size of the root element (e.g. the font-size of the element). When used on the font-size on this root element, it represents its initial value. The biggest difference between the two is `REMs` always references it’s value based on the root element’s `font-size`, while `EMs` inherits it’s unit from the element’s `font-size`. If this seems confusing, don’t worry, take a look at the following CSS to get a better understanding: ```css .element { font-size: 20px; padding: .5em; } ``` In the example above the element’s padding would equate to 10px. Remember `EM` units are relative to the element’s `font-size`, this means our padding equation is 20 * .5 = 10. ```css .element { font-size: 20px; padding: .5em; } .element-child { font-size: .25em; padding: 1em; } ``` Imagine this scenario: we know that `.element` padding is equal to 10px, but what about the values for `.element-child`? Well because `EMs` compound our math, things can get a little tricky. The `font-size` for `.element-child` will equate to 5px (20 * .25 = 5). Since the parent element has a `font-size` of 20px and we defined the child element as .25em of the parent’s, our compounded value is equal to 5px. The padding is a lot easier in this case, because `EMs` look at the `font-size` value, our padding equates to 5px. Hopefully that wasn’t too much to handle. The tricky part with `EMs` is managing how to calculate the output values. Since it’s a hassle I’ve created a set of functions and mixins for Sass to make our lives easier! You can find the [Github Gist here](https://gist.github.com/azinasili/8e41854f58176cbd9cff). ##Inherit Keyword Another tool in our arsenal is the `inherit` keyword, this value allows us to get the style that is defined on a parent element and apply it to the child. We can do this without having the same rule defined twice. [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/inherit) defines `inherit` as the following: > The inherit CSS-value causes the element for which it is specified to take the computed value of the property from its parent element. It is allowed on every CSS property. Imagine the following scenario using the `inherit` keyword: ```css .element { background: coral; padding: 1em; } .element-child { color: white; padding: inherit; } ``` Our `.element-child` would get the value for padding from `.element` and apply it to itself. This is nice because if the `padding` on `.element` changes, so will the `padding` for `.element-child`! This is perfect if we are trying to avoid writing the same styles multiple times. The one downside of this technique is the keyword only looks at the parent elements value; we are unable to move up in the DOM tree and get the value of an ancestor element. ## CurrentColor Keyword This keyword acts like `inherit` with one big difference, `currentColor` can be used to inherit the color of properties that normally do not inherit that value. [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value#currentColor_keyword) defines `currentColor` as the following: > The currentColor keyword represents the calculated value of the element's color property. It allows to make the color properties inherited by properties or child's element properties that do not inherit it by default. Now that we have some knowledge of the techniques we can use to manage how our values cascade, let’s put it into action. ## Examples of our new techniques The above example is just getting our feet wet. Although it’s simple, it perfectly shows how `EMs` can be used to scale our elements. You will notice two buttons, both look the same except `.btn--large` is, well larger. Even though the button is larger, we never adjusted the padding for the button or even reset it’s `border-radius`, instead we only adjusted the `font-size`. Neat! Because `EMs` inherit the `font-size` value, any property that is also using `EMs` will scale. Since our `.btn--large` is 1.25x larger than the initial `.btn`, that means the other values will also be 1.25x larger. This is exactly what we want with our cascade. The compounding of values may cause issues if you’re not careful, but when deliberately used it can be the best way to create alternative sized elements with minimum effort. This card example expands on some of the principals for cascading. Again, we are using `EMs` to size our elements but now we are also using the `currentColor` and `inherit` keywords to style certain elements. Rather than hard-coding colors and other values, we can use our handy keywords to have the styles cascade down to the element we want. Our last example will demonstrate our new found cascading knowledge and apply it to a more real-world scenario. Much like the other examples we will continue to use `EMs` to size our elements, but with one exception, the `margin` on `.price` will use `REMs` instead. This is because we do not want our margins to scale with any changes to `font-size`. Notice the middle table is larger than the other two? We not only use color to highlight that specific option but we also resized the whole table to be larger than the other two. Both the color and the increase in size is to draw attention to our customers. Normally with the larger sized element we would have to resize every `padding` and `font-size` properties. Instead we use the power of `EM` and the *cascade* to do this for us. ## Final Thoughts The above techniques are a fantastic way to take back control of your CSS, however, it does take a little extra brainpower. Using `EMs` for unit values can cause issues when you have nested elements. This can be solved with some simple math or with [functions/mixins](https://gist.github.com/azinasili/8e41854f58176cbd9cff) if you’re using Sass or any other pre/post processor. Either way, a little bit of extra effort can go a long way, making your style sheets more flexible and scalable for your projects. Let me know what you guys think!

azinasili

Utilizing the “C in CSS

Join Our Newsletter. No Spam, Only the good stuff.