What does your CSS Swiss Army knife look like?

Brian Dillard, Monday, September 22, 2008 @ 2:15 pm

CSS 2.1 is more like a Swiss Army knife than a fully stocked toolbox. We can accomplish a lot, but we have to get creative with the standard attachments. Floats, relative positioning, the box model - each tool must performs double or triple duty because they're the only ones we've got.

When we do discover a clever way to accomplish a common task using these limited tools, we're likely to employ that technique over and over. I'm not talking about CSS frameworks here; those help out more at the macro level. I'm talking about repeatable techniques that can be applied at the micro level. When done right, these simple techniques can feel like entirely new Swiss Army attachments rather than intelligent application of existing blades.

Whenever I start out on a new client project, I start off with the following plug-and-play components:

1. A reset stylesheet: Sometimes I plug Eric Meyer's latest reset in wholesale, while sometimes I pick and choose which parts make sense for my project. Regardless, it's absolutely essential to erase default styling and provide a common, cross-browser foundation on which to build.

2. Semantic, cross-browser float-clearing: I posted about this topic a year ago, generating plenty of debate. Whether you're using my Orbitz-inspired grocery-list-of-selectors approach or a generic clearfix class, you've got to tackle this problem if you employ float-based layout - until, that is, some future CSS spec implements a float-clear property.

3. Standard-issue pipe-delimited lists: If you're representing lists as paragraphs full of text punctuated by hard-coded pipe characters (|), you're probably not paying much attention to web standards. A set of CSS rules like the following makes it dead simple accomplish the same effect semantically with borders. True, Internet Explorer 6/7's lack of support for the first-child pseudo-class means you'll have to create an actual class called first-child and apply it to your initial list element. Still, once you adjust border colors and spacing to fit your site design, this solution works anywhere. Variations can even allow for pipe-delimited definition lists.

   /*
   	standard pipe-delimited list: add a class
   	of "first-child" to the first element
   	for IE either via script or in the markup
   */
   
   /*
   	- the 0 margin and padding are unnecessary if
   	  you're using a standard reset stylesheet
   	- you'll need to clear floats inside of ul.piped
   	  using whatever your preferred method is
   */
   ul.piped {
   	margin: 0;
   	padding: 0;
   }
   ul.piped li {
   	float: left;
   	margin-left: 8px;
   	padding-left: 8px;
   	border-left: 1px solid #000;
   	list-style: none;
   }
   ul.piped li:first-child,
   ul.piped li.first-child{
   	margin-left: 0;
   	padding-left: 0;
   	border-left: 0;
   }
   

4. Simple hide/show utility classes: Unless you're using an effects library to create visual transitions, it's easier to toggle classes on hide/show elements than to manipulate their style properties directly. The only problem is differentiating between block and inline elements when you're ready to show them again. That's where the block, inline, noneBlock and noneInline classes come in. Your JavaScript code just needs to know that elements with a class of block get toggled to noneBlock and vice-versa; same for elements with a class of inline and noneInline.

   /* classes to hide and show elements programmatically*/
   
   .inline {
   	display: inline;
   }
   .block {
   	display: block;
   }
   .noneInline,
   .noneBlock {
   	display: none;
   }
   

5. A style-as-link class for JavaScript actions: It's easier - not to mention more semantic - to trigger JavaScript code from click events on divs, spans or other non-anchor elements. That way, you don't have to deal with a dummy href value or cancel out the link's default action. Besides, the <a href=""></a> tag is for taking you to new pages, not performing an action within the existing page.

   Some JavaScript coders ignore these advantages because they want the built-in styling shortcut of the a tag: cursors and hover states. As the code below demonstrates, however, it's dead simple to achieve the same visual effects with some simple CSS. Modern browsers can apply the hover pseudo-class to most any element. Ditto custom cursors.

   a,
   .styleAsLink{
   	color: #08c;
   	text-decoration: none;
   }
   a:hover,
   .styleAsLink:hover{
   	color: #444;
   	text-decoration: underline;
   	cursor: pointer;
   }
   

   Once you've created a styleAsLink class, you can replace this type of code:

   <a href="#"
   onclick="alert('Isn't it annoying to have to return
   false every time?'); return false;">
   	this is an actual link
   </a>
   

   ... with this:

   <div class="styleAsLink"
   onclick="alert('In the real world the click event
   should be applied unobtrusively!');">
   	this is a pseudo-link
   </div>
   

   One caveat: This technique is useful for links that serve no other function than to trigger JavaScript code. Don't employ it in the case of a progressively enhanced link that triggers a script when JavaScript is available but takes you to a new page when it's not. A simple rule of thumb: If the link exists in your actual markup, it should remain a link. If it's inserted into the DOM wholesale by JavaScipt, it should be a pseudo-link.

Enough about my own personal Swiss Army attachments. How do you get all MacGyver with your CSS? Let us know in the comments.

agile ajax

Comments: 2 so far

• Leave a comment
• Comment feed for this post
• TrackBack URL

1. 

   [...] I think every developer should have a CSS Swiss Army Knife in their toolbox. This was written at Pathfinder Development here. [...]

   Pingback by Things that interested me this week. | Web Development, Web design, Web 2.0, and Me., Friday, September 26, 2008 @ 5:02 am

2. 

   Cascading Style Sheets (CSS) web design lessons
   Css link Properties Attributes - examles

   http://css-lessons.ucoz.com/link-css-examples-1.htm
   http://css-lessons.ucoz.com/link-css-examples-2.htm

   Comment by Sitene Ekle, Wednesday, November 12, 2008 @ 1:58 pm

Leave a comment