How I Learned To Stop Worrying

How I learned to stop worrying

and love the *

19 Mar How I learned to stop worrying

Posted at 16:57h in Branding/Identity by

How I learned to stop worrying and love the *

The *, or universal selector, is often maligned. Some people use it to reset all browser default styles, which can over-ride some useful defaults (and I personally find to be bad practice). It can also cause some pretty serious performance issues. These issues lead to a few obvious, but easy to follow rules.

  • Make sure that the * is only working on what you want it to. I.e., use it to select everything inside a block where you’re sure you want everything to be the same.
  • Don’t do anything graphically intense. Because it can act on so many elements at once, I don’t use it for things like text-shadow, which can be a resource hog on older browsers and machines. And don’t even think of doing any 3d transforms.
  • Going with the previous rule, only use a few rules in one *, which reduces your future “Where is this being set!?”

Here are a few examples using * that save me time and effort in current development and in future changes, and also help keep your CSS cleaner and easier to follow.

hgroup *

I love the hgroup tag in HTML5. Used for grouping together a title and subtitle, it keeps your document outline clean by hiding all but the highest level header tag (very important for things like screen readers), and adds a nice layer for us to style headings without having to write selectors for h1-h6.

hgroup * { 
    margin: 0;
    line-height: normal; 
}

I do this constantly! Everybody loves their headlines to be nice and big, but if you’re working on a page with wide leading, you’ll start eating vertical space like a big plate of bacon. Pulling out the margins is also a nice thing to do here, helping keep the heading and subheading closer associated. Additionally, I often have an hgroup at the top of a block element with padding, and this takes care of that top margin on heading tags causing weird space, while leaving other heading tags with the standard margins intact for use further down the block.

footer *

While the HTML5 <footer> isn’t much more than a regular block element, assuming you’re using it semantically, it’s always going to house that stuff at the bottom of things that’s less important. We probably don’t want it to be distracting.

footer * { 
    color: #666; 
}

A styling thing I regularly do is to make links the same color as the body text in a footer. This takes care of that, making it a one stop shop to style all your text in the footer. One thing to note is that it has higher specificity than the a:visited and a:hover pseudo-classes. This can be good or bad, depending on your purposes, but you might have to define a separate footer a:hover ruleset (which I often end up doing anyway)

aside>*+*

A lot of times, especially on blog themes, i’ve got a really specifically styled sidebar that’s going to be dynamically filled with boxes generated by who knows what terribleness, but I still want even spacing between the elements.

aside>* {
    border: 1px solid #666;
    background: #333;
    padding: 10px;
}   

aside>*+* {
    margin: 1em 0 0 0;
}

Bingo! Now we’ve got an easy way to control the styling of those mystery elements, and we can keep our CSS easier to follow, by leaving the styling of the <aside> in the aside rule.

Conclusion

I hope i’ve made a good case for using the * now. Using it in a few specific ways can save you a ton of time and headaches, make your code easier to follow. I’d love to see how you use *selectors in your own work!