We use shorthand properties to set the values of multiple CSS properties simultaneously, resulting in more optimised and efficient code.
In this article, we will look at the most commonly missed areas to implement shorthand properties, compare them to their longhand counterparts, and learn the order of values for said properties.
Note: More about the other types of shorthand properties can be found here!
Background Properties
The following background properties can be shortened from…
The use of CSS Variables allows us as developers to instantly update a property value throughout our entire application with one single change - no more ‘Find and Replace’ or tediously searching through thousands of lines of code to update countless styles.
They also have access to the DOM, which means we can use JavaScript and media queries to manipulate the values of our variables and create some really efficient code. Not only that, but we can access the variable inside the developer tools to test different values without being inside our code editor.
Understanding CSS Variables
The easiest way to understand CSS…
Joe Napper
I like to talk about design principles and share my knowledge with fellow devs. Connect with me on LinkedIn https://www.linkedin.com/in/joenapper6/
