CSS Quikie: all

CSS can be an interesting, and quite tangled, web of rules and logic. If you don’t know exactly what you’re doing it’s easy to put yourself in a bad position where the only way to get the outcome you want is by relying on !important. That’s never the goal, but it does happen the overwhelming majority of times in applications. In fact, there are plenty of times in most applications where we’d all love the ability to do a quick reset.

Well, luckily CSS is a powerful language. Because we can! With the property all you can define how an element inherits styles. There are three options:

• initial: resets all properties on element to the initial values defined by the CSS spec
• inherit: takes in all styles from parent, including those that are set only for the parent
• unset: takes in all styles that are possible to inherit from the parent, if not available, relies on the CSS spec default value

Out of the three options, the most similar to what we already anticipate our CSS to do is unset. Overall though, this is a great thing to remember as it could help keep your CSS architecture squeaky clean. With that said, let’s look at the code

.Component {
  border: 1px solid green;
  padding: 5px;
  background: #ccc;
  color: #333;
}

.Component--initial {
  /* Sets the component to the initial values defined by the CSS spec */
  all: initial;
}

.Component--inherit {
  /* Sets the component to all styles inherited from the parent. 
     Including styles directly set on the parent like border and padding.
  */
  all: inherit;
}

.Component--unset {
  /* Sets the component to all styles that are possibly directed to it. */
  all: unset;
}