HTML & CSS Styling Standards and Best Practices (Part II)

Reset with Normalize.css
CSS resets help establish a baseline from which all the styles are set. A reset effectively overrides the browsers’ default styles for certain elements (which can vary greatly). Despite the popularity of CSS resets over the past several years, many sites still don’t employ them, and these sites’ CSS scalability is suffering greatly for it.

Instead of using the extremely popular CSS Reset by Eric Meyer (because it is too far-reaching) or making up a DIY reset, many people recommend using normalize.css. Normalize.css “normalizes” the code to a common baseline rather than resetting the base styling for elements across all browsers. Referring to the normalize.css project on Github, these are its advantages over a CSS reset:

  • Preserves useful defaults, unlike many CSS resets
  • Normalizes styles for a wide range of HTML elements
  • Corrects bugs and common browser inconsistencies
  • Improves usability with subtle improvements
  • Explains what code does using detailed comments
  • Using normalize.css in lieu of a standard reset will get you on the right coding foot and save a lot of time in not having to reestablish baseline styles.

Get a Clear Fix on Clearing Floats
If you are still rockin’ the method shown here to clear floats in your documents, then we really need to talk:

<div class="clear"></div>
.clear { clear: both; }

Other clearing methods are recommended over this one, which is one of the first float-clearing methods devised when CSS layouts with floats first started to be implemented roughly 10 years ago.

The Micro Clearfix, used in the HTML5 Boilerplate, employs the most up-to-date, tried-and-true, front-end coding best practices.The Micro Clearfix supports Firefox 3.5 and later versions, Safari 4 and later, Chrome, Opera 9 and later, and Internet Explorer 6 and later. Here’s an example:

/* For modern browsers */
.cf:before,
.cf:after {
content:"";
display:table;
}

.cf:after {
clear:both;
}

/* For IE 6/7 (triggers hasLayout) */
.cf {
*zoom:1;
}

The clearfix .cf class should be added to all elements that contain floats. In such a case, the old-school empty divider element with clear applied (<div class=”clear”></div>) can be permanently retired from your repertoire.

What About Overflow: Hidden?

Another popular technique for clearing floats is to use overflow: hidden, although the Micro Clearfix is more highly recommended because there are sometimes issues with the overflow: hidden method in Internet Explorer 7 and earlier versions.

Although the use of overflow:hidden was almost everyone’s favorite float-clearing technique for a while, it raised problems such as these:

Hiding content and child elements with no scrollbars when the browser window is smaller than the container.
Interference with margins, borders, outlines and absolutely positioned PNGs.
Application of CSS3 properties, such as box-shadow, text-shadow and transforms.
Louis Lazaris, coauthor of HTML5 and CSS3 for the Real World, suggests that using overflow:hidden causes problems in complex layouts and recommends avoiding it in favor of the Micro Clearfix.

If you are bound and determined to rock overflow:hidden, then use the following version of it, which makes allowances for hasLayout in Internet Explorer and block-level elements:

.container {
overflow: hidden; /* Clearfix! */
zoom: 1; /* Triggers "hasLayout" in IE */
display: block; /* Element must be a block to wrap around contents. Unnecessary if only
/* using on elements that are block-level by default. */
}

Dividers
Speaking of incorrectly wielding empty divs … you’ve got to stop rockin’ the empty cleared <div> with a border assigned to it as a page divider as well:

<div class="divider"></div>
...
div.divider {
border-top: 1px solid #ABAA9A;
clear: both;
}

Yes, I know this code does a fine job as a clearing visual page divider, but it is not semantic. Nicole Sullivan, CSS ninja and creatrix of object-oriented CSS (OOCSS), suggests using the <hr> element to divide sections of the page and adding the necessary styling to it.

So instead of the preceding code, you would use this:

<hr class="divider">
...
.divider {
border-top: 1px solid #ABAA9A;
clear: both;
}

Image Replacement
Front-end development has a long and illustrious history of CSS techniques for replacing text with images. In March 2012, Jeffrey Zeldman introduced a new kid on the block, deemed the Kellum Method. Instead of hiding the text off screen using the -9999px hack (and creating a huge invisible box in the process), his technique hides the text while leaving it accessible to screen readers.

.hide-text {
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
}

Performance is improved, notably on tablets and smaller screened devices.

Use an Icon Element
You might be using <span></span> as the way to put icons in your pages, like so:

<li class="favorite">
<span class="icon favorite"></span><span id="favorite-insert-point" class="favorite"></span>
</li>

If so, try this on for size: icons can be employed with an icon element, leveraging the <i> tag. This approach is becoming increasingly popular following its employment in Twitter Bootstrap.

<p><i class="icon icon-comment"></i>23 comments</p>
...
.icon { background-image: url( sprites.png ); }
.icon-comments { background-position: 0 -30px; }

The use of <i> is a bit more semantic than using a standard <span> tag, and makes it easier to identify where the icons are in your pages.