Expert’s Weigh In: What’s Your Favorite CSS Trick?

If you’ve been looking for some shortcuts to save some time or ease some of the frustrations that sometimes come with writing CSS, then we’ve got a treat for you! Instead of handing out candy for Halloween, we asked a handful of experts to share their favorite CSS tricks with us. No magic potions here, just some sweet little treats.

I’ve been using this snippet for years! It makes debugging layouts 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”!

Responsive images in CSS are pretty easy: just set the width: 100% and height: auto and you’re good to go. Things get a little unpredictable, though, when dealing with background images. Since putting a height on the element causes lots of responsive headaches, one workaround is to have the container scale by its aspect ratio. This can be achieved by setting a few attributes to the element’s :after tag:

It’s the perfect little trick for hiding any pesky element that you don’t need at the moment without having to recreate the entire page. I develop a lot of my websites using the CMS WordPress and this trick allows me to edit the theme without actually removing anything from the code. If I have a page that doesn’t need the menu or the logo, I can easily attach the tag element to the page where I need to hide it. It’s a game changer. Many times the best solutions are the simplest, and this trick allows me to achieve great results using a short line of CSS.

I was looking for a clean method to clear floats a couple years ago during one of my first responsive builds and stumbled across this trick and it has been invaluable since. There are many ways to accomplish the goal, but in many cases you can just specify an overflow in your CSS:

.clear {
overflow: auto;
}

Some browsers may also want a width or height specified and a percentage can be used.

This for instance will clear floats in most instances without having to add additional Divs, or pseudo elements. The method will work with 3 of the 4 values: auto, hidden and scroll. I generally avoid scroll as I prefer to let the browser decide if there should be scroll-bars or not.

Did you find these CSS tricks helpful? Tell us in the comments below, and feel free to share your favorite CSS trick as well.

Sheena Lyonnais

Sheena Lyonnais is a Toronto-based writer, editor and digital specialist. She works in content marketing by day, studies digital strategy by night, and practices yoga somewhere in between. Follow her on Twitter @SheenaLyonnais.

Join the discussion

Some good stuff in here for sure but, using display: none is not a “trick”, and is a very poor and lazy way of solving problems with unwanted HTML output.

Just because it cannot be seen visually doesn’t mean that bots such as Google or assistive technologies like screen readers will ignore them.

By Matthew Nolan - 7:16 PM on October 31, 2015

I a free with Ashley Nealy the “CSS” Code I use the most has to be the { display: none } code. I am always hiding something in the template and I see no need to cut or remove code especially if I may need it in the future. Thanks for an article with useful code that anyone can use. Sharing each other’s knowledge grows us all into better webmaster. Keep the articles coming.

By laurel - 7:37 PM on October 31, 2015

that first one blew my mind… so simple but so much more effective than solid fills or borders to show how an element is actually sized