A while back while doing some reading, I came accross an article written by Mike Stenhouse over at Content with Style, which got me thinking about this CSS malarkey.
Yes, there are only so many layouts that people want.
Yes, you should re-use code as much as possible. You should also write maintainable code. Modular code is also a good idea – we like modules.
Yes, it’s a good idea to use conventions as they make life easier.
Yes, client want to see stuff as it is developed, and they want to see progress as quickly as possible.
No, I don’t like more donkey work than I have to – I’d rather be solving problems I haven’t already.
and yes, anything that makes life easier is worth keeping around.
At the time, I also had 3 more projects that required similiar layouts and thus similiar markup – we’re not talking web applications here, but web sites that were either plugging into a CMS backend or were just static. So I started thinking some more…
What if I could abstract Mike’s modular approach using php? Would that make it easier to get a project done, or quicker, or both?
Could I put the config stuff into one php config file? I only want to make changes in one place…
I already use a config file to manage the usual site stuff that I don’t want to have to manually edit sitewide, would adding the css stuff above to that file make sense?
If I keep it all in a nice Subversion repository, then drop into a new project before starting or as and when I need it, would I make my life easier? Would delivering projects be faster?
Every time I learn’t something new, or somebody somewhere posted a solution to a problem, I could add it to the repo…. right.
And that made me happy, ‘cos my gut feel was that it would make things easier, and would definitely make my life easier.
Then I read some more, and came accross the “No more css hacks” article over at Stylegala and I started thinking how much css hacks pissed me off. Although a necesary evil (Sorry Tantek – your solutions are beautiful compromises to the ugliness of browsers that don’t play nice together), I just don’t like ‘em – the result is code that looks like it’s been through the martian shredder in “War of the Worlds” … ’nuff said. But the reailty of the situation won’t change anytime soon, so we’re still stuck with a problem where I want the code I write to look beautiful (however much my talent is limited) so that I am happy and so that I can manage it better.
[Listening to David Heinemeier Hansson at the Web Apps Summit last week really struck a chord with me - I like to write beautiful stuff. It makes me happy and when I'm happy I'm more productive.]
Then I read some more, and came accross the Defining CSS Constants with PHP article written by Tyler Hall, and the pennies started to drop from the slot machine…
What if I combine the modularity of the CSS framework, with the “CSS hack killing” that you get from knowing what the user agent is before you spit out the CSS, with some constants that I define with PHP but spit out in the CSS… and then add in some standard stuff that just makes life easier for me. The result would be something that I could use for static or dynamic client sites, making donkey work easier and delivery sooner; as well as something that I could use as a starting point for a truly modular, flexible, better blog (in WordPress we trust) theme; and if I wanted to extend it some more, I could use it for a certain web app too. And hey, if someone likes it, and they add to it to make it better, then all the better for everyone.
So here I am – I’ve put a few hours into it so far, but not done as much of the above abstraction as I would have liked, but I’m still pleased with the results – I’ve probably saved myself at least a few hours to a day on any new client work, and any more time I put into it will add to that time saving.
For now I’m going to get the above stuff nice and smooth like, but this is what I’ve got earmarked to add later:
add print stylesheet
add mobile / pda stylesheet
add more layouts if it makes sense
abstract doctype definition
abstract main menu items into an array
abstract local menu into an array
add google analytics
There are differing points of view – some would agree with the approach, whilst others would say it’s not worth doing, so I’m curious as to what you think?