Commit 6ee96180 authored by Lyza Danger Gardner's avatar Lyza Danger Gardner Committed by Lyza Gardner

Add `!important` to two carefully-selected utility mixins

This is the first time in my life I've ever found what seems like a
potentially valid use case for `!important`: assuring that a utility
class that establishes rhythm based on margins is able to do its job.

Typically, our components should not be styling their own margins, but
there are some cases where we do, e.g. the initial reset of button
styles, which sets `margin: 0`. (Components should style their own
padding, but margins are the domain of containing/parent elements).

These two `!important` rules allow two utility mixins that are explicitly
concerned with margins to trump the specificity of margin-resetting
rules on descendent elements.

See https://css-tricks.com/when-using-important-is-the-right-choice/
parent cbbd7c64
...@@ -60,11 +60,16 @@ ...@@ -60,11 +60,16 @@
* Establish a horizontal (margin) rhythm for this element's immediate * Establish a horizontal (margin) rhythm for this element's immediate
* children (i.e. put equal space between children). * children (i.e. put equal space between children).
* *
* This mixin uses `!important` such that it can compete with specificity
* of reset rules that set some of our element's margins to 0. That allows
* these rules—which are applied to a parent element—to be able to assert
* margins, as it should be able to do.
*
* @param $size [5px] - Size of horizontal margin between child elements * @param $size [5px] - Size of horizontal margin between child elements
*/ */
@mixin horizontal-rhythm($size: 5px) { @mixin horizontal-rhythm($size: 5px) {
& > * + * { & > * + * {
margin-left: $size; margin-left: $size !important;
} }
} }
...@@ -72,12 +77,17 @@ ...@@ -72,12 +77,17 @@
* Establish a vertical (margin) rhythm for this element's immediate * Establish a vertical (margin) rhythm for this element's immediate
* children (i.e. put equal space between children). * children (i.e. put equal space between children).
* *
* This mixin uses `!important` such that it can compete with specificity
* of reset rules that set some of our element's margins to 0. That allows
* these rules—which are applied to a parent element—to be able to assert
* margins, as it should be able to do.
*
* @param $size [var.$layout-space--medium]: Spacing size (padding) * @param $size [var.$layout-space--medium]: Spacing size (padding)
* @FIXME Find workaround for SvgIcon exception * @FIXME Find workaround for SvgIcon exception
*/ */
@mixin vertical-rhythm($size: var.$layout-space) { @mixin vertical-rhythm($size: var.$layout-space) {
& > * + *:not([class*='SvgIcon--inline']) { & > * + *:not([class*='SvgIcon--inline']) {
margin-top: $size; margin-top: $size !important;
} }
} }
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment