By Peter Bell

There Was a Dream Called CSS

Once there was a dream. A dream of separating content from presentation. Of cleanly and easily being able to describe how your content should look and of sites where it would be trivial to display content differently just by feeding in a different style sheet to the same HTML. And then came browser implementations, and we all pretty much know what happened after that :-<

Well, I have a very personal dream for CSS . . .

For some CSS is a creative endeavor. A chance to shine, to differentiate, to show just how much one artist can achieve within the confines of browser implementations. I respect those people and love learning from their work.

For me, CSS is something different. I have clients that want search engine friendly web applications built as quickly and as cheaply as possible. For me, CSS is the main reason that I lose money on smaller projects - because the style sheets provided to us by the developers we work with are horribly inconsistent, badly thought out and a nightmare to update. To be fair, I've done just enough CSS to have an inkling of some of the reasons that their CSS can become so tortured, but I've had it with bad CSS. (And I won't even get started with the clients who provide us with tables within tables within tables within tables to work with!)

I want a standard structure for my sites. I want to be able to create a standard HTML framework that is focused on the semantics of content rather than presentation. I want a way to quickly and easily go through a process to structure the overall page, add block level elements to both the site and screen templates and to manage the process of styling the default properties for the site as well as for adding custom styles that relate to the whole site, a given area or a specific block. In short, I want a nice framework that'll make our CSS relatively consistent between projects and that will make it quicker and easier to implement (and maintain) sites.

I also want a system designed from the ground up to make skinnable sites very easy, and that automatically structures the CSS into a number of easy to understand files (on the dev side - it'll build into a smaller number of files for production) so no given file is more that a couple of hundred lines long and all of the CSS is easy to find and maintain. I also want the solution to support variables so I can keep my CSS DRY, have a nice build process for generating a smaller number of tighter files for production, and that can merge manually entered CSS with CSS generated by end user wizards to allow us to devolve as many design decisions to the lowest technical level possible, so if a client wants to play with the exact background color shade we have the option of providing them access to that without them messing up the rest of the properties of the header or whatever else they are working with.

So, I want a structure for building and maintaining the CSS for my projects that is as consistent as possible between projects and that hides much of the complexity of CSS and minimizes the amount of browser specific hacking required by moving users towards CSS that is inherently cross browser safe.

A non-trivial task for sure, and I don't know if the problem is worth the effort it would take to solve (mainly because I'm not sure how hard the problem is to solve). I do know that I'm willing to invest a couple of days to see how far I can get before I go running back to ColdFusion programming, Flex, or an existing CSS framework (and separation of concerns be damned!).

The one thing I have going for me is that I don't need a complete solution. It doesn't need to be capable of reproducing any design with perfect fidelity. It needs to be able to build good looking sites that reasonably resemble the kind of site template layouts we're sent, and if it can't handle some sites, I'll just let the client decide if they want to get a fixed bid for something we can do, or an hourly to try to perfectly reproduce their vision. As long as I can offer a way to provide a fixed bid while still allowing clients to pay hourly to get whatever they can conceive of, I'm set.

Expect some more postings on this topics - at least until I run screaming back to ColdFusion :->

Thoughts?

Comments
Try this one again - I just tried it and it's working.
http://www.aacr9.com/index/coldfusion/kuler

It has a template with kuler colors.
Source code at:
http://www.aacr9.com/index/coldfusion/kuler/mykuler.zip.
# Posted By Phillip Senn | 12/13/07 8:59 AM
@Phillip, Will check it out, thanks!

@David, Thanks for the links, but I really don't love all the highly presentational div names in the grid based frameworks. They are my failback of last resort if I can't figure something more to my taste though!
# Posted By Peter Bell | 12/13/07 2:57 PM
Peter,

You might take a look at the CSS "One True Layout" or even see if you can convince designers with whom you work to use Eric Meyer's "CSS Sculptor" (Dreamweaver plugin).

This looks interesting as well:
http://www.alistapart.com/articles/holygrail

I am really interested to see what you come up with. Although our goals are different, I always learn a lot from how you solve your issues.
# Posted By Steve Bryant | 12/13/07 3:22 PM
Hi Steve,

Thanks for the link and suggestion! I like Meyers dreamweaver plugin, but i'm looking for even more consistency between sites and an approach that is inherently designed to support skinning and variables in CSS as well.

Ohhhh, that looks like a NICE article - many thanks!!!
# Posted By Peter Bell | 12/13/07 4:16 PM
But...
but...

CSS Scuplter costs money!

Waahh.
# Posted By Phillip Senn | 12/14/07 10:01 AM
@Phillip, So do developer hours, so I'm happy to pay for solutions if they save me money in the long run - even if they look very much like something you could get for free!
# Posted By Peter Bell | 12/16/07 6:11 PM
BlogCFC was created by Raymond Camden. This blog is running version 5.005.