You know that CSS3 had not even been proposed when this was posted right?
Also Firefox’s “calc()” [-moz-calc() right now] doesn’t work for widths yet …which is the main thing people want this for.
Also IE9 is in “Developer Platform Preview” and is such a slimmed down version that it is almost completely unusable for anything other than looking at it and saying “OK, I can see that it supports this …”

So hopefully CSS3′s calc() will get completed in Firefox soon.
then we can all be happy ☺

and then we could define the element like this:
width:50% – border_width * 2;
border:border_width solid #000;
float:left;

If we wanted to change the border thickness we could just change border_width and both values are updated.
Since I have a hard time with choosing good colors I will probably need to change it again later on… So setting these as constants would speed up testing since I otherwise would need to change it several places in the style sheet…
I also like keeping things like the spacing between elements somewhat constant throughout the design, setting this as a constant would be nice.

The reason I would like math and constants in CSS is also to make it easier to understand.
If we used the previous example, but having a fixed width of 150px instead of 50% we would normally say:
width:140px; /* 150px – 10px */

but wouldn’t this be much easier to understand:
define{
total_width = 150px;
border = 5px;
}
width: total_width – border *2;
I have caught myself thinking “Why did I write that number?” when editing in a part of the style sheet I hadn’t touched for a while. If it had been defined as above, such cases would be less likely.
Of course, it adds a little bit of extra weight to the code, but if you are worried about that you could always make a small program to replace the constants and do the math where possible.

I started learning HTML and CSS a half year ago when my school forced me to do it, but it turned out to be more interesting than I thought. So I’m still quite new to this though…

#header {
height:150px;
background:#fff url(“pretty-header.png”) no-repeat 0 0;
}
#content {
height:100% – #header.height;
background:#fff url(“content-bg.png”) repeat-y top center;
}

Math in CSS would be next-gen amazing. I’m a die-hard tables fan forced to be a DIV user both by my “it’s time” feelings as well as client-requests. Let’s just say the transformation has been less than pleasing, and some math in CSS would be amazing.