Adobe Creative Cloud

October 30, 2015 /

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.

Nicole Dominguez, Senior Product Designer & Front End Developer at Sawhorse Media

ndominguez-headshot-2015

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 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”!

(Github link)

Daniel Box, Designer at KNI

Daniel Box

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:

.my-element {   
    overflow: hidden;   
    position: relative; 
} 
.my-element:after {   
    content: "";   
    display: block;   
    height: 0;   
    padding-top: 56.25%; /* Aspect ratio = height divided width times 100 */ 
}

(Github link)

Ashley Nealy, Founder & Chief Creative Officer, Mindly Maven, LLC

Ashley Nealy Headshot

It’s hard to choose just one CSS trick, but my my favorite has to be:

{ display: none }

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.

Brian Ferdinand, Senior Developer at Gravitate

Brian Ferdinand

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.

Join the discussion

  • By Derek - 12:20 PM on October 31, 2015  

    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

  • By Daniel - 8:18 PM on November 2, 2015  

    {will-change:opacity;}

  • By GoWebBaby - 11:04 AM on March 25, 2016  

    It’s nice to read about above experts and their favorite CSS trick.

    Thank you so much for the great stuffs.