Sorry about the sensationalist subject line. I couldn't resist.
For the past six months I've been building a massive, consumer Web
application. I took over the development from a guy who was keen on
standards-compliant XHTML (yay!) and keeping every style rule in an external
CSS document (kinda yay). This worked great up until I hit line 6000 of the
external CSS doc and Dreamweaver started choking a little each time I saved.
Then I began grouping pages of the site into sections and creating CSS docs
for each section. This helped, because a lot of rules could be taken out of
the main doc and put into a smaller doc. (The server gzips all outgoing CSS
docs, so even with 6000 lines, the file size for transmission is only about
Now, the wonderful thing about this app is that it has dozens of pages with
unique designs. Each of these unique designs requires many elements to be
positioned, floated, padded, margined, bordered or backgrounded uniquely.
This has contributed in no small way to the 10,000+ lines of CSS rules for
Now, when a product manager points to an element on a page and says, "I'd
like you to move that box a little closer to the one above it," I first have
to open the HTML (actually .JSP) file, find the element in question, grab
the class name, then open the associated CSS doc, search for the class name
and finally make the change. (And of course, the requests are seldom so
simple, which means the fixes tend to involve a lot more scrolling around
inside a multi-thousand-line doc looking for a CSS value.)
I've been putting these positioning rules into the external CSS dogmatically
since taking over this job, and also because nearly every place you look you
see people extolling the virtues of separating style from content. Yes,
yes.It's a great idea. Particularly effective when you have a fairly simple
set of page designs and a lot of content to flow into them. But when you
have an app with over a hundred pages, most having unique designs and very
little content, positioning elements inline is a huge time-saver.
One of the big benefits of separating style rules from content is the ease
of making site-wide changes with minimal effort. Another benefit I can see
is having an app that's ready to be ported to handheld, or other medium. But
in the case of this app, site-wide changes can only really affect colors and
fonts, since there are so many unique design structures throughout. And
since there are no plans to port this to handheld, that argument loses its
So my current consideration is to move the specific positioning information
back into inline styling. Positioning that is repeated frequently on one
page will be moved to the header (internal). And, naturally, globally-used
styles will remain in the blessed external CSS docs.
If you've made it this far into the e-mail, thanks. I'd love to hear any
counter arguments to this desire for regression. I've heard rumors that
inline styles will be deprecated in future versions of XTHML. If true, that
would give me pause. I've tried so many times to set up site-wide standards
for the use of fully-external CSS in this app, but its complexity has made
doing so mind-numbingly difficult.