My favorite CSS "trick" would have to be these 3 lines of CSS:
* {
background-color: rgba(0,255,0,0.1);
}
I've been using this snippet for years! It makes debugging layout a breeze and is quite insightful when
dealing with the box model. What's happening here is that the * selector means "select every element on the page",
and then we're giving all of those elements a slightly colored background color. This means that elements inside of each
other will get darker. It also helps you understand how padding and margin are affecting elements surrounding each other. I
prefer this technique as opposed to adding random borders and backgrounds to the elements I'm working on because this technique
allows me to see my entire layout and element structure as a whole and how the elements play off each other. It's a simple,
yet powerful "trick"!
Great trick. I learned something new. Thank you 👍