2008-02-29

Extended Cascading Stylesheets - the beginning

1 What?

Extended Cascading Stylesheets (from now on, XCS) is an attempt at implementing some development-facilitating features to standard Cascading Stylesheets language (CSS) while avoiding the unnecessary language pollution by introducing an intermediate parser, thus keeping the output standards-compliant.
1.1 What?!?
In more simple terms, I tried to make my own time spent with CSS more pleasant, by relying on an intermediate layer (parser) instead on the quirks of the standard.

2 Why?

While working with CSS, I found a lot of annoying stuff - and I'm not talking about browser quirks here, but the language itself. For instance, it has always been annoying for me that there is no single-line comment in CSS (an equivalent to, say, // or # in some other languages) - thus, no quick'n'easy way to kick an entire line out of your current sheet. I realize this is quite individual and really not all that important - however, I'm just marking an example of a trivial feature that made my life suck a bit more.
2.1 Origins

While working on some changes for a friend's site, I noticed I was, essentially, doing the same thing all over again - the layout type of the site was the same (3 columns - 2 fixed width, one liquid), typography was the same, only the color scheme and the fixed column width changed. Most of the CSS changes I did involved similar actions - the base was sound, only minor changes should be implemented. These changes, however, included lots of line hunting, either manually or facilitated by sed or a similar tool in the current editing environment.

2.1.1 Zeitgeist

At about the same time, CSS frameworks became all the rage, with all their pros and cons baggage. Online tools for making layouts based on this or that framework were came to life. New Blogger templates (layouts) with CSS constants support were already introduced, allowing inexperienced users to easily change some aspects of a chosen template. It all seemed to be interconnected somehow, in an effort to make the users/developers lives more pleasant. So, when reading this article...

2.1.2 It all clicked together

It really did. It offered the idea of a DIY tool that could relieve me of all the trivial (and not-so-trivial) aches I faced with CSS - one that would allow me to express myself more easily, while using the familiar CSS syntax, sugar-coated for easier swallowing on my side, plain old for browsers to consume.

3 How?

The first thing I decided to leave out of the original concept is the implementation language. A PHP class was the way to go for me, because a) I don't necessarily always have a Ruby interpreter around and, more importantly, b) a PHP class would lend itself well to making a plugin for embedding into existing CMS solutions. The concept of CSS constants is a definite keeper - this alone would save a whole lot of time normally spent on search-and-replace. Some other concepts were excellent but some didn't really seemed all that important, and some features I considered handy were not there at all. So I sat down and make myself...
3.1 The List
The List of the stuff I wanted to have:
  • CSS variables
  • Extended Math expression support for both colors and measurements - perhaps even strings
  • require-a-like keyword, for inline, compile-time inclusions
  • Single-line comments
  • CSS rule inheritance by extending (as opposed to regular CSS element inheritance by cascading)
  • Easily customizable syntax for the newly introduced features
  • Various levels of pretty-printing of the resulting CSS, coupled with some basic compression
3.2 Implementation plan
Once settled down on the features I'd like to have, I considered my options for concrete implementation. I was told that PHP4 was dead and that the sooner we all start doing stuff with PHP5, the sooner everybody else will follow. So PHP5 then it is. Of course, this severely cuts down on the number of CM systems one could embed this in right now - however, this will change very soon, as hosting services start adopting PHP5 because of lacking PHP4 support. And PHP5 is more fun, anyway.
3.3 The result
Take a look at the result at phpclasses.org.

No comments:

Post a Comment