Learn CSS

In yesterday’s post, Geeking out, I forgot to mention the most important concept for both web designers and web developers to learn: CSS. Designers probably already understand the advantages, but developers implementing any complex functionality for a web site really need to know CSS today because of the client-side Javascript libraries that depend on CSS.

More than likely if you’re a web developer you’ve written at least some client-side Javascript. It’s only going to become more likely. It should be obvious that client-side code provides a great deal of richness and responsiveness to any web application. So if you’re a web developer that’s primarily been working on back-end code and you want to stay relevant, learn Javascript, CSS and jQuery. Let me give you one brief example.

Let’s say that you want to create a handy sortable list of elements so your end-users can reorder items on their view of a page. The design team wants the list to be displayed with alternating row colors so they are easy to read. Something like this:

• This is item 1
• This is item 2
• This is item 3
• This is item 4

Assuming the list is dynamically generated from a database and you’re a PHP programmer, you’re probably thinking of doing something like this:

$i = 0;
echo '<ul>';
foreach ($items as $item) {
  echo '<li ' . (($i++ % 2 == 0) ? 'class="alt-row"' : '') . '>' . $item . '</li>';
}
echo '</ul>';

That’s great, but it’s only part of the solution. Since the list is sortable on the client side, the list will have to be re-striped every time an item is moved, otherwise it will look wrong. The sorting and the striping both need to occur on the client side, so simplify the PHP to just create the list with no alternating classes, then use jQuery to do the client-side heavy lifting.

The jQuery (and jQuery UI for sortable) solution looks like this:

function learn_css_restripe() {
  jQuery('ul.example-sortable li').removeClass('alt-row');
  jQuery('ul.example-sortable li:even').addClass('alt-row');
}
 
jQuery(document).ready(function() {
  learn_css_restripe(); // call the restripe function on page ready to set the initial stripes
 
  // make the list sortable
  jQuery('ul.example-sortable').sortable();
  // whenever the list order changes, restripe
  jQuery('ul.example-sortable').bind('sortchange', function(event, ui) {learn_css_restripe();});
});

Understanding CSS and the DOM of the document is what makes using jQuery so powerful. Notice that the restripe function, learn_css_restripe doesn’t do any looping or have any direct references to an DOM element ids. Instead the function simply removes the alternating row class from every element of any unordered list with the example-sortable class. Then some jQuery selector magic, :even, is used to add the alternating row class back to just the even elements of the lists.

Since this technique is so generic, it is possible to have more than one list on the same page without changing any of the code at all. Here’s another list with more elements as an example:

• This is item A
• This is item B
• This is item C
• This is item D
• This is item E
• This is item F
• This is item G

As you can see, CSS is not just for designers. Great web developers will work with great designers to simplify both the layout and the code at the same time using CSS.

If you enjoyed this article, please share it using Facebook Connect or AddThis and subscribe via rss.

Tagged as: CSS, Javascript, jQuery, jquery ui

Comments: