I'm working on styling some boxes, something front-end web developers are (should) be familiar with. I use SASS to write my CSS. I needed some rounded corners so I wrote a mixin that looks like this:
I included the mixin in a CSS class to see my result.
In the browser the result was what I expected. Eight pixel rounded borders on my box. However, for one of the boxes I was working on I only needed the
top-right corners rounded so I set the
bottom-right arguments to
0px and again, the result was correct in the browser; sharp bottom corners and nice eight pixel rounded top borders. Oh yeah, the CSS compiled without errors too.
I do my best to work in a mobile first mindset, I value optimization and performance. With my rudimentary understanding of the compilation process from SASS to CSS I suspected that setting the arguments of the mixin to a
0px value would keep the two unneeded CSS rules in the compiled CSS.
I was right.
This could add up quickly and generated many extra line of CSS that are not needed. I decided to test something, something I have picked up during my CS education: Try
null and see what happens in a situation like this.
null appears in many programming and scripting languages and can be powerful in the right situations.
I changed my include to this:
and compiled the code. No error! Being somewhat proud of myself and excited I looked into the compiled .css file and found the following (and desired) result:
For this example we ended up with two less lines of CSS. However, at scale this could save thousands of lines of unneeded CSS. This also makes minifying more rewarding.
I hope this was useful for some people who like squeezing more optimization out of their front-end code.
If you enjoyed this content and want to support a poor freelancing student so I can eat and produce more content in the future, I accept donations via PayPal