Rob Ballou

Modularized CSS for Applications

Creating web applications interfaces typically happen in a few steps: a few screens are wireframed or created in Photoshop and those screens are transferred to HTML. Unfortunately, developing applications user interface can be tricky because as you work through your feature list you find things you missed. So flexibility of your CSS is important. This is somewhat based off of the CSS frameworks that have become more and more common, but I have started to think about how to apply flexible CSS rules for application development.

Tables are a common issue because you have many tables in a web app with lots of data, but how to account for the changes? Many times when you're wireframing your application it seems simple enough to say we need to design this table for the reports section (#reports table) and another table for the projects section (#projects table). I've done this more times than I can count, but I don't think it's the best way to handle this.

So, how do we approach fixing this?

1. Define a base table. The base table should have little to no styling -- it is the most basic table that all others should built upon. Make sure that it has the proper font, that headers (<th> of course) look like headers, and that there are styles for alternating row colors. Something like this may do (assuming you have a 'reset' CSS stylesheet of your choice):

   // basic CSS for a simple table
   table th, table td { padding:.5em; }
   table thead th, table tfoot td { background: #ddd; }
   table thead th { font-weight:bold;text-align:left; }
   table tbody tr.row2 td { background:#eee; }
   

2. Then define specific table "models", if you will. So if you have a table which displays financial data (from our report section) with a total amount, maybe something like this:

   table.financial tfoot td { border-top:1px solid #ccc; font-weight:bold; }
   table.financial tbody td.amount, table.financial tfoot td.amount { text-align:right; }
   

3. If you need to specify specific cell widths for a particular instance, you can then use the ID space. Adding rules like this should be last possible thing that you do! Or at least be ready to refactor this by changing it from an ID selector to a class selector (a CSS version of Refactoring anyone?)

   table#balanceSheet .description { width:300px; }
   table#balanceSheet .amount { width:75px; }
   

Now as your application is rolled out, your developers have an easy set of choices when creating tables for display purposes. The CSS files do not constantly need updates because I created a financial information table in the #projects section.

Archives