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

来源:互联网 时间:1970-01-01

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

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

Responsive images in CSS are pretty easy: just set thewidth: 100%andheight: autoand 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

It’s hard to choose just oneCSS 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 ofCSS.

Brian Ferdinand, Senior Developer at Gravitate

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 yourCSS:

.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.