ZaneRay’s Top 3 CSS Selectors of 2013

Top 3 CSS Declarations of 2013*

Jun 25 2013

There are certain things, as front end developers, that make our jobs better or even revolutionize the way we work. There has been a lot of internal debate about the importance of techniques that gave us that "Aha" moment, when wondered how we ever lived without it. This Top 3 is dedicated to CSS declarations that have made our lives a heck of a lot easier.



1 ) box-sizing: border-box

* {
     box-sizing: border-box;
   }

Once you add box-sizing: border-box to your toolkit you’ll never go back. The beauty of border-box is that it adds any padding or borders to the inside of an element instead of the outside. This eliminates most of the complicated math associated with adding paddings, margins and borders together to get a complete outer width or height. This is especially useful for responsive layouts where all those pixel dimensions convert to percents. This eliminates all the complicated division associated with a traditional responsive layout. No more scratching your head, figuring out 460/960 as a percentage or 10/960. If a column is 1/2 the width of the layout, set the width to 50%, then set whatever padding you like, and your done.

Added bonus. Not liking the results on some elements. Just set individual elements back to content-box. No biggie.

Read More * { Box-sizing: Border-box } FTW by Paul Irish

2 ) max-width: 100%

img {
  max-width: 100%;
}

In a responsive workflow, the bane of our existence is images or elements with fixed widths. These fixed widths may be necessary for desktop layouts, or more commonly they are autogenerated as inline styles by a CMS (ever see images blow out of the column of a Wordpress theme? Yeah we thought so). Max-width: 100% does next to nothing to harm your layout, yet is extremely powerful. You can have an inline pixel dimension with an !important tag, max-width will override it if the parent container is smaller that the fixed dimension. So Handy.

Side Note: Slap this baby on all iframes coming into your blog and kiss those extra large embedded Nyan Cat videos destroying your layout, goodbye.

Read More: Fluid Images by Ethan Marcotte

3 ) :after

label:after {
  content: “* required”;
  color: red;
}

It's for all the times you want to add HTML after an element but don’t want the same HTML repeated a million times. The best thing to happen to CSS since :hover. Really there is a combination of awesomeness here “content:” makes “:after” the magic maker that it is, allowing a developer to add a snippet of HTML defined by a CSS class, coupled with the ability to add it :after an element and wow! magic.

Sidenote: !important

There was some discussion on why not include !important in this list because it can trump even inline styles generated by any random CMS. !important is like the Ring of Sauron of CSS declarations. It is very powerful only wield it when you absolutely need too, its powers can ruin your or more !imporantly your coworker's world.

* And maybe 2011 & 2012