Helpful CSS Acronyms

Over time, I have gathered a small collection of CSS acronyms that I use to avoid looking up the CSS documentation, or to simply just write correct CSS. CSS in itself is an acronym, meaning “Cascading Style Sheets”, but lets take a look at my self-invented/self-collected list of CSS acronyms that hopefully can help your everyday CSS life.

TRouBLe

This one is already well-known, but it can be fairly useful, especially for junior CSS developers. Have you ever forgotten the order of the CSS properties in the shorthand property for e.g. margin ? The order is TRouBLE!:

margin: <Top margin> <Right margin> <Bottom margin> <Left margin>;

CSS tricks wrote a post about this acronym already in 2007.

Lord Vader Hates Fluffy Animals

This acronym was discovered due to a bug in production had to be solved, so it is probably my favorite. Lord Vader Hates Fluffy Animals helps you get the order of styles for your links, your <a> tags, correct. The order should be this:

a {...}
a:visited {...}
a:focus {...}
a:hover {...}
a:active {...}

This is due to the fact that you want your active links to overwrite the style for the hovered ones, which again should override the style if the link is active etc.

The order, however, can be up for the discussion, in the sense that it can be argumented that the focus state should override the hover state. I think the bug in production was solved choosing Lord Vader Fluffy Hates Animals instead, whatever that means 😉 Feel free to leave a comment if you have any great insight into this 👍

Either way, this acronym has helped me personally get my CSS styles right, so I would absolutely recommend. I will leave you with a AI generated image of this acronym, hoping that the visual will help the memory with remembering this useful acronym ⬇️

Lord Vader dressed as a fluffy cat (and so he hates fluffy animals? 😆). (Source: AI image generator tool Craiyon.)

The credit for this acronym goes to Keith Grant and his book CSS in Depth (1st edition from 2018), in which I learned this acronym. I would definitely recommend the book, and you can read more about it in my blog post here.

Lastly, it exists other acronyms to help with remembering this correct order. LoVe HAte (l for link, v for visited, h for hover, a for active) has been around for some while, as can be seen from this CSS Tricks post from 2007.

Young Guys Can Be Messy Radicals

Have you ever watched or read some tutorial by a really smart web developer that navigates the HSL 360 degree color wheel like a pro? Ever gotten that uneasy feeling when you then realize you don’t know the cool wheel as good as obviously would be beneficial? Young Guys Can Be Messy Radicals to the rescue! If you rotate around the color wheel (you can use the image ⬇️ to check), the order is yellow (y for young), green (guys for green), cyan (c for cyan), blue (b for be), magenta (m for magenta), red (r for red).

The HSL/HSV color wheel. (Source: Kevin Hu in this StackOverflow-post, 23.05.23)

The credit for this acronym/rule of thumb, is the book “Responsive Web Design with HTML5 and CSS” by Ben Frain, p.197 (4th edition from 2022).

Also, I want to recommend the “Using HSL Colors In CSS” tutorial on Smashing Magazine (from July 2021), as a great introduction on how to utilize the HSL color format to organize your design system colors into CSS custom properties effectively. I also recommend the “Color Formats in CSS” post by Josh Comeau, in which he tries to give some examples on the use cases on when it is the correct to use the different color formats in CSS.

I hope these acronyms can be helpful for someone. The credit of course goes to the respective authors of these great rules of thumb for writing CSS (Keith Grant and Ben Frain!). I also lastly want to give a BIG shoutout to at the time my closest colleague, Phajsi, who has helped me keeping the list of CSS acronyms up-to-date ❤️