Front-end Developer Why Do You Use CSS?

For readability of course. As a developer you probably spend more time maintaining an application than you do writing a new application. What this means is that your time is spent looking at code.

More than likely, it was written by somebody else. If not then it was written by yourself. Either way comprehensive need to be at it most productive. If the signal-noise/noise ratio is very low then your comprehension is going to be low. We need to understand content. Any presentation mixed in with the content means a lot of noise.

CSS is a way to reduce the noise.

Let’s look up a contrived example of creating a navigation panel using static HTML:

   1: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

   2:     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

   3:

   4: <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

   5:

   6:   <head>

   7:     <meta http-equiv="content-type" content="text/html;charset=UTF-8" />

   8:     <title>Navigation Panel | Old School</title>

   9:     <link rel="stylesheet" href="navigation.css" type="text/css" />

  10:   </head>

  11:

  12:   <body>

  13:     <h1 style="text-align: center;

  14:                 font: 200% sans-serif;

  15:                 border-bottom: medium solid;">Navigation Panel - Old School</h1>

  16:

  17:     <div style="float: left">

  18:       <ul style="text-align: center; list-style-type: none; margin: 0; padding: 0">

  19:         <li style="border: solid thin; width: 8em">Navigation Panel</li>

  20:         <li style="border: solid thin; width: 8em"><a href="nowhere1">No Where Link 1</a></li>

  21:         <li style="border: solid thin; width: 8em"><a href="nowhere2">No Where Link 2</a></li>

  22:       </ul>

  23:     </div>

  24:    </body>

  25: </html>

What the hell is going on! This code is very noisy because of all the styles. Let’s try and clean this up.

For my HTML development I use a program called WeBuilder. Inside the this application is a nice tool called HTML Tidy. Let’s run it to see what kind of changes to the code we get. Run HTML Tidy >> Indent HTML Tags.

Cleaned up HTML:

   1: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

   2:     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

   3:

   4: <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

   5: <head>

   6:   <meta http-equiv="content-type" content="text/html; charset=us-ascii" />

   7:

   8:   <title>Navigation Panel | Old School</title>

   9:   <link rel="stylesheet" href="navigation.css" type="text/css" />

  10: <style type="text/css">

  11: /*<![CDATA[*/

  12:  div.c4 {float: left}

  13:  ul.c3 {text-align: center; list-style-type: none; margin: 0; padding: 0}

  14:  li.c2 {border: solid thin; width: 8em}

  15:  h1.c1 {text-align: center; font: 200% sans-serif; border-bottom: medium solid;}

  16: /*]]>*/

  17: </style>

  18: </head>

  19: <body>

  20:   <h1 class="c1">Navigation Panel - Old School</h1>

  21:

  22:   <div class="c4">

  23:     <ul class="c3">

  24:       <li class="c2">Navigation Panel</li>

  25:

  26:       <li class="c2"><a href="nowhere1">No Where Link 1</a></li>

  27:

  28:       <li class="c2"><a href="nowhere2">No Where Link 2</a></li>

  29:     </ul>

  30:   </div>

  31: </body>

  32: </html>

Much better. If you look in the <head> you can see that the styles is now located here.

But we can do even better with HTML:

   1: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

   2:     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

   3:

   4: <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

   5: <head>

   6:   <meta http-equiv="content-type" content="text/html;charset=UTF-8" />

   7:

   8:   <title>Navigation Panel | New School</title>

   9:   <link rel="stylesheet" href="navigation.css" type="text/css" />

  10: </head>

  11: <body>

  12:   <div id="banner">

  13:     <h1>Navigation Panel - New School</h1>

  14:   </div>

  15:

  16:   <div id="navigation">

  17:     <ul>

  18:       <li>Navigation Panel</li>

  19:

  20:       <li><a href="nowhere1">No Where Link 1</a></li>

  21:

  22:       <li><a href="nowhere2">No Where Link 2</a></li>

  23:     </ul>

  24:   </div>

  25: </body>

  26: </html>

Because of the way CSS it allows us to create some semantics. Just look for navigation. Do you see it?
And here is the CSS:
   1: root {

   2:   display: block;

   3: }

   4:

   5: #banner {

   6:   text-align: center;

   7: }

   8:

   9: #banner h1 {

  10:   font: 200% sans-serif;

  11:   border-bottom: medium solid;

  12: }

  13:

  14: #navigation {

  15:   float: left;

  16: }

  17:

  18: #navigation ul {

  19:   list-style-type: none;

  20:   margin: 0;

  21:   padding: 0;

  22:   text-align: center;

  23: }

  24:

  25: #navigation li {

  26:   border: solid thin;

  27:   width: 8em;

  28: }

Here is what the output looks like in Firefox:

Navigation Panel

Advertisements

Tags: , ,

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s


%d bloggers like this: