Semantics Will Save Us All:
Part I, CSS Formatting

Semantics Will Save Us All: Part I, CSS Formatting

Enough with the hacks, lose the unnecessary stacking, and keep your markup clean. We've all seen it. We've all been guilty of it. It's time to start doing things the right way and simplify your CSS stylesheets with semantic mark-up.

Clean Up your CSS Formatting

Without structure, your stylesheet can be very hard to navigate, especially if you're coding a page-heavy or element-intensive website. One of the most effective ways of organizing any file is to add headers to various groups of code using comments (notice the extra spacing between groups):

Before:
  1. .header {
  2. width:500px;
  3. height:300px;
  4. margin-bottom:5px;
  5. background:#FFFFFF;
  6. border:1px solid #000000;
  7. }
  8. .footer {
  9. width:500px;
  10. height:100px;
  11. background:#FFFFFF;
  12. }
After:
  1. /* Header
  2. --------------------------------------------------------------------------------*/
  3. .header {
  4. width:500px;
  5. height:300px;
  6. margin-bottom:5px;
  7. background:#FFFFFF;
  8. border:1px solid #000000;
  9. }
  10.  
  11.  
  12. /* Footer
  13. --------------------------------------------------------------------------------*/
  14. .footer {
  15. width:500px;
  16. height:100px;
  17. background:#FFFFFF;
  18. }

You can instantly cut the amount of lines of codes in your CSS Stylesheet by 2/3 if you switch from multi-line to single-line formating. Not only does it look cleaner, it really creates a navigable stylesheet (compared to the heaping clutter that multi-line formatting creates). In this instance, five cluttered lines of code is easily transformed into a single organized line of beauty:

Before:
  1. .header {
  2. width:500px;
  3. height:300px;
  4. margin-bottom:5px;
  5. background:#FFFFFF;
  6. border:1px solid #000000;
  7. }
After:
  1. .header { width:500px; height:300px; margin-bottom:5px; background:#FFFFFF; border:1px solid #000000; }

Combining these two examples, you can see just how easily you can save yourself clutter (and your co-developers frustration):

  1. /* Header
  2. -----------------------------*/
  3. .header { width:500px; height:300px; margin-bottom:5px; background:#FFFFFF; border:1px solid #000000; }
  4.  
  5.  
  6. /* Footer
  7. -----------------------------*/
  8. .footer { width:500px; height:100px; background:#FFFFFF; }

The end-product is a very organized stylesheet that is both easily navigable and readible. No longer will you have to use a Ctrl+F (code search) to find that one line of code because you'll know right where it is, or can find it with a quick scroll of the mouse!

Ditch the clear-fixes

A "clearfix" is a very common method of either either a). wrapping elements within a parent or b). appending an extra element, just for the sake of clearing a troublesome float. The methodolgy has been around for years, and, thanks to the popularity of modern web-browsers, we can finally rid ourselves (mainly our stylesheets and html) of the needless clutter it no longer requires.

In many instances, you'll have a multitude of elements that are floated throughout your stylesheet and markup. By creating a global .clear and smartly utilizing :before and :after selectors, using the method below, you'll never have to use a div wrapper or extra-clear element (clearfix) again, and save yourself lines of repeated code.

Before (HTML):
  1. <div class="container">
  2. <div class="left_content">Some text to the left.</div>
  3. <div class="right_content">Some text to the right.</div>
  4. <div class="clear"></div>
  5. </div>
Before (CSS):
  1. .container { width:500px; display:block; }
  2. .container .left_content{ width:200px; display:block; float:left; }
  3. .container .right_content{ width:200px; display:block; float:right; }
  4. .container .clear{ clear:both; }
After (HTML):
  1. <div class="container clear">
  2. <div class="left_content">Some text to the left.</div>
  3. <div class="right_content">Some text to the right.</div>
  4. </div>
After (CSS):
  1. /* Clear
  2. ----------------------------*/
  3. .clear{ display:block; float:none; clear:both; overflow:hidden; }
  4. .clear:before{ content:" "; height: 0px; display:block; float: none; clear: both; overflow:hidden; visibility:hidden; }
  5. .clear:after{ content:" "; height: 0px; display:block; float: none; clear: both; overflow:hidden; visibility:hidden; }
  6.  
  7.  
  8. /* Container
  9. ----------------------------*/
  10. .container{ width:500px; display:block; }
  11. .container .left_content{ width:200px; display:block; float:left; }
  12. .container .right_content{ width:200px; display:block; float:right; }

By creating a global .clear, you'll be rid of the need for an additional clear element which can save you hundreds of lines of code in the long run.

Structure-based Semantics

Now that we've tackled cleaning up our stylesheets, let's move on to Semantics Will Save Us All, Part II: Cleaning up HTML Markup.

Tags

Add Comment

Leave a Comment or Reply
Fuel the conversation with your thoughts using the form below. Email is not made public.
× Processing...

Please Wait while your Comment is being Processed.

*
*
*

Comments 2 Total Responses