CSS3 and beyond

I have spent quite a while recently tinkering about with the parts of the CSS3 spec that have been already implemented in various browsers (albeit mostly via vendor-prefixed properties) – things like border-radius, rgba colours, box-shadow, media queries and more. Useful additions to our toolbox, and ones which will undoubtedly cut down on the amount of general hackery we need to use to do relatively simple things; a good thing, in other words.

But there are parts of the spec that are, in my mind, definitely not a good thing. Things like the ascii-art nightmare that is the so-called ‘Advanced/Template Layout Module‘ for example, make me go weak at the knees. Why is something this offensive even being considered when one or two minor additions to the positioning model we already have would allow us to intuitively create layouts without totally re-inventing the wheel?

Parts of the spec such as this make me seriously concerned that the CSS WG are focussed on serving up high-level, situation specific solutions to problems rather than thinking about how they could evolve CSS to provide better low-level tools that would allow us to tackle problems on a more generic level. It’s a case of “give a man a fish and he’ll have food for a day, teach a man to fish and he’ll have food for life”. Give us a complex layout solution like the one proposed and you solve (in a horrible way) one problem; give us the ability to do basic maths and a few fixes to the current positioning system and we’ll be able to use them to solve all sorts of issues, not just generic page layouts.

So what would I like to see added to the CSS3 (or maybe CSS4!) spec? Glad you asked. The list below is a few things I would like to see added, that I think would aid CSS developers in their everyday work. Note there are no solutions to specific problems here; what I want is the tools to be able to sensibly solve both problems I encounter today and problems I haven’t encountered yet and can’t yet imagine.

• Basic math – I want to be able to do things like width: 100%-200px; in my stylesheets.
• Delegation – Give me a mechanism so that I can define an element’s style by way of reference to another element’s properties.
• Positioning tweaks – let me have a property that allows the element it’s applied to to clear it’s absolutely positioned siblings, in a similar way that clear:both; does for floated elements.
• Constants (or variables, if you prefer) – let me define constants for re-use to make my code clearer and more maintainable.
• Mixins – Let me define reusable groups of CSS properties that I can ‘mix in’ to the properties of other selectors without having to add multiple class names to my HTML.

People’s knee-jerk reaction to any of these suggestions is generally “CSS isn’t a programming language and it shouldn’t be made to behave like one!!”. Well, I’m sorry, but for me that argument just doesn’t stand up. CSS is a tool, and I believe that tools should be honed to better do the jobs that are asked of them. CSS wasn’t intended to be a layout solution in the first place, but we have hacked it into becoming that. People think that adding in ideas like the above make CSS more complex; I would personally argue that they would make it less complex; abstractions such as mixins and constants, and tools like basic maths should make it much more obvious what the authors intentions were when penning a certain rule or property.

Over the next couple of weeks I hope to go into a little more detail on each of the points on my ‘wish list’ above and illustrate how I think they could work and their potential application to specific, common situations. But for now, let me just point out that none of the things I have talked about are particularly new ideas; Google any one of them and you will find many people with the same viewpoint as I, and plenty more food-for-thought to boot.