Lea Verou on the future of CSS and more

An edited version of this article first appeared in issue 225 of .net magazine - the world's best-selling magazine for web designers and developers.

@twostepmedia: Where should the heavy lifting be done in a web page? In the front end or in the backend?
Lea Verou: I'm a strong proponent of doing whatever you can on the client. When your code runs on the client, it always has to deal with one machine, no matter how successful your project becomes.

Anything you write on the server might need to run thousands of times per second if your project succeeds, so maintaining and extending it becomes more and more challenging as your site grows. Not to mention the increasing hosting costs which very rarely can be fully covered from the website's income. Sure, lots of client-side logic can make a site load slowly, but we have tools to avoid that, like gzipping and obsfucation and most importantly, lazy loading.

@komiska: Your work is AWESOME! Who inspired you to follow the tech path?
LV: Thank you! I don't think it was a matter of being inspired by someone. I just liked making stuff ever since I can remember myself. When I was a kid, I once used kitchen sponge wipes to make purses and handbags!

Around 12, I discovered that programming allowed me to build useful things more easily and more professionally than handcrafting. That fascinated me so much I instantly fell in love with programming and kept striving to get better at it.

@jelmerdemaat: How did @LeaVerou create @dabblet? With what PHP framework/other back-end technique? What was the most difficult part?
LV: Dabblet doesn't have any database and the server-side code involved is minimal. A little PHP is only used for OAuth and generating a result page to share without any of the dabblet chrome around it (useful for bug report testcases). As you can see in its Github stats, PHP accounts for only three per cent of dabblet. Everything else is client-side. This helps avoid the jsfiddle situation: jsfiddle does everything on the server, so now that it succeeded, its server load went through the roof and it became slow.

@_dte: What's the most exciting upcoming CSS feature for you?
LV: Filter effects for sure. They allow us to do things that were previously impossible, not just hard. I'm not very excited for layout modules, because a) it's going to be ages before we're able to use them, as they don't degrade gracefully at all and b) layout was always possible, just unnecessarily hard. Of course, the new layout modules are very important too, but it's not the kind of things that makes me excited.

I'm also very exited about the viewport relative units vw and vh and the CSS3 extension of the attr() function which will enable us to use attr() in every property.

I'd also really want to see other browsers besides Opera implementing object-fit and object-position, so that we can stop using background hacks to crop images to a different aspect ratio.

@gpirie: What feature would you like to see introduced into CSS?
LV: A current() function that lets you reference the computed value of other properties. Like a generalisation of currentColor (which would then become an alias to current(color)). Of course, implementing such a thing is very tricky, but reality won't stop me from dreaming!

@kevdog: What are three most common CSS mistakes?
LV: The most common CSS mistake I see, is people coding their CSS with a focus on the result, not on clean, maintainable, flexible code (and they rarely refactor). It's not only important that something looks right now, with a certain background, certain surroundings and certain size. It should be able to adapt to changes easily, without having to rewrite every rule about it in unpredictable ways.

You might think you'll never change something, but given enough time, you'll almost certainly be proven wrong. CSS preprocessors can help with that. They're the easy way out but they're certainly better than sloppy, repetitive code.

Another mistake is overly verbose CSS. People aren't aware of the defaults, so they keep redefining them. They aren't aware of shorthands, so they keep defining the longhand properties instead. There are cases where you have to do those things on purpose, but that's not a reason to do them defensively in everything.

@kevdog: If you could change one thing in the CSS spec, what would it be?
LV: There are many suggestions that almost everyone in the CSSWG agrees with, but can't be added due to breaking existing widespread usage on the web. Usually, the WG either denies these altogether or adds more properties to control the behavior, rather than changing the defaults. I'd like to see a way to opt in to backwards incompatible changes, so that existing websites don't break. Other languages have solved this issue long ago but with HTML and CSS we keep struggling for backwards compatibility in the cost of good language design.

@StuRobson: Do you think it's lazy for a dev to use a framework or boilerplate willy-nilly without understanding everything it does?
LV: No, but I think it's lazy for a dev to use a framework or boilerplate without personally having a need to, just because everyone else does. It's counter-productive to try to solve problems you don't yet have.

@folktrash: At what point did "celebrity" happen? How did you know? And does it help or hinder evangelising code quality/semantics?
LV: Thanks, but I'm not sure I could be called that. Everyone tends to consider people they've heard of more well-known than people they had no idea about. Consequently, everyone has a natural tendency to overestimate their own fame, which needs to be artificially (and almost blindly) balanced when you are aware of this phenomenon. We also need to keep in mind that nobody in our industry is really a celebrity, nobody is a household name.

That said, 2011 has been crazy, and it's obvious I got more recognition for my work that I could've hoped for. It certainly helps evangelising web standards. People pay much more attention when I say something now than they did a year ago. This however comes at the cost that things I say get overanalysed, people can read too much into them and attack me for supposedly having views I never even considered. Or sometimes, just for having views, period.

@Tawreh: Why are you so fanatical about women in the industry? I understand the need for equality, but imho you push it to the extreme.
LV: First time I hear such a thing as "extreme equality". Equality can never be extreme and I doubt anybody would even say anything like that for other kinds of discrimination, like racism. It's "reverse discrimination" or "corrective bias" that's extreme and I'm strongly against that.

That said, I'm not "fanatical" about women in the industry at all, I'm "fanatical" against prescriptive gender stereotypes. I hardly ever see sexism in our industry, it seems people have learned their lesson well long ago. I don't think the low participation of women in our industry is due to them feeling unwelcome any more. It's the rest of our gendered society that drives women away from engineering. Little girls play with toys that don't encourage them to develop their cognitive skills as much as boy toys. Children's movies and toys are the worst perpetuator of gender stereotypes and I hardly see any interest there. Everyone seems to focus their efforts in adults instead, fixing the mistakes rather than avoiding to make them in the first place.

@komiska: Is there ever going to be a transition for font-weight?
LV: Quoting a note from the spec, "it's not that simple". Most properties don't have enough weights for a smooth transition and the browser can't generate the intermediate states because there is no way to represent them in CSS. That said, we might eventually extend cross-fade() from CSS4 Image Values to apply to all CSS values, not just images, which would solve most transition problems, and gives us a powerful tool that can be utilised statically as well.