Using Stylizer with Drupal
A few months ago a colleague mentioned Skybound’s Stylizer for CSS development. It looked awesome in the video demo so I was quite eager to try it out. About one month ago I was tasked with re-theming my employer’s web site (which is, of course, powered by Drupal), so figured that would be a great opportunity to test out Stylizer.
At first glance, Stylizer looks quite beautiful, especially with the dark theme and the fine graphics on the instrument panel. However, flicking constantly between Firefox and Eclipse (mostly white) and Stylizer (mostly black) almost made my retinas explode, so it was a good thing I found the option to switch Stylizer to a mostly white theme, which solved the problem.
My overall plan for the project was to use the Zen Starter Kit to create a new Zen sub-theme and build up from there. One of the things I discovered about Zen (and, indeed, many other Drupal themes) is that it takes “separation of concerns” to a whole new level, resulting in a very large number of CSS files (17 if you strip it back to the bare minimum). Drupal also likes to produce quite a few levels of nested divs. Both of these factors make learning Stylizer a bit more difficult, as it complicates the navigation of the CSS files, even with the “bullseye” functionality. As a result, I would definitely not recommend trying to learn Stylizer on a Drupal theme.
One of the great things I noticed about Stylizer when watching the demo was the code reformatting. Stylizer provides some great options, but unfortunately, not reformatting the code is not one of them. Although this isn’t a huge deal, it does mean you’ll somewhat lose the ability to make small mods to your sub-theme and then compare your updated files with the original version later to see what you changed. I suppose you could save all your files with Stylizer first, check those into version control and then work from there, but you will still lose the ability to easily compare your updated version against the original version of Zen (or any future versions).
The Stylizer positioning system looks excellent too, but it does rely on some “initialisation” code being included in one of your stylesheets. It also means that some effects that could be achieved in one line (eg. float: right) may be implemented with three lines instead. This bothered me a little, but not hugely.
The image replacement functionality also looked awesome, but does require a separate piece of JavaScript to be included on your page, which means integrating it into your theme. Also, I recall seeing CSS expressions being used as well, which are quite bad for performance, so I wasn’t too thrilled about that either.
In terms of general usage, the only really annoying thing that I noticed was the need to separately refresh Stylizer’s embedded browser (which is Chrome on OS X) whenever you wanted to fully reload the page. There is a Command-R shortcut, but this only re-loads the stylesheets. You have to click the browser window’s Refresh icon if you want to actually re-render the page. This is hugely annoying, especially if you’re a command-line junkie like me.
And that, honestly, is probably the key trait that will determine whether or not you fall in love with Stylizer. If you are a command-line junkie, by definition you prefer to type, not click, slide, wiggle and jiggle your way through an “instrument panel”. You will probably also object to having three lines of CSS code generated where one line would suffice. And you’ll definitely object to having to click an icon to re-render the page! If you’re anything like me, you’ll eventually start to wonder what value Stylizer is providing above and beyond just using Firebug in conjunction with your favourite IDE. And although some people swear by Stylizer for Drupal theme development, the huge number of CSS files in themes like Zen does, IMHO, make using a tool like Stylizer quite difficult. For the record, I ended up ditching Zen and modifying the Danland theme instead.
Having said all that, Stylizer is still a very solid product and I could definitely see it being of great use in certain situations eg. whipping up a static 10-page brochure site for a client with lots of photos, call-outs, testamonials, etc. on the different pages, requiring lots of different positioning, font sizes, etc. In a scenario like this, Stylizer would be extremely handy.
Ultimately, my advice would be to download it and check it out for yourself. Whether or not it adds value to your workflow will probably depend on what your workflow currently looks like and what your overall development mindset is like.
