tips

Tip 003 - Custom Properties

In CSS, we have the ability to use a feature called custom properties. At its most basic, you can declare a value for a property, then use it again later:

html {
  --myCustomProperty: green; /* Setting the property */
}

p {
  color: var(--myCustomProperty); /* Using the property */
}

button {
  background-color: var(--myCustomProperty); /* Using it again */
}

Even if we go no deeper than this (which we can totally do, these properties are WAY more powerful than they seem), having the capability to declare a value once and refer back to it throughout a document is amazing on its own. With this, you can set all your colors, widths, font sizes, anything on the root HTML element. Then, instead of replacing those values everywhere in the document every time a change comes along, you only have to update one line.

More on custom properties later. The way these work, combined with the CSS cascade, can be mindblowing. Until then, here's the documentation: https://developer.mozilla.org/en-US/docs/Web/CSS/--*

 

Have you written a reply to this post? Send me the URL here: