The Discovery

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:

The Issue & Dirty Solution

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-left and top-right corners rounded so I set the bottom-left and 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.

The Optimization

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:

Conclusion

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