Things I’d like to see improve in CSS4 … Part 1

CSS3 has introduced a lot of neat and useful features, but issues still linger that make every-day development pretty difficult.


If you’ve used tools such as Sass, you might already be familiar with being able to use variables in CSS. In my mind, you can’t be considered a programming language unless you allow developers to use variables and functions. Otherwise you end up with a ton of repeated code.


Remember in HTML4 where it was considered correct to use <center>  to center anything horizontally and valign=”middle” to center anything vertically? It’s actually very difficult to do that with the CSS3 spec as is.

Well what about text-align: center? This works, but only on block elements. Think about that for a second…

What about vertical-align: middle? This only works on inline elements. Hmm

Right now, the *easiest* way to align anything vertically is through this set of code:

That’s no fun. And positioning something relative/absolute can have unintended consequences, especially since you’re just trying to accomplish vertical alignment.

This, in my opinion, is one of the biggest flaws in HTML/CSS development. As a developer in a fairly large team, this issue comes up on almost a daily basis.

Font Size

ems, pt, px, % and none of them are used as a standard. There are pros and cons to each of the approaches. The convention seems to be moving to percentages, but I often see unintended consequences with that as well. For instance, if I create a new class and I want it to be 110% larger than the body font size, I would define it as having a font-size:110%. The issue is, what if the parent container already has a font-size:110%? Then I am actually making the font-size 110% bigger than the parent’s 110% font-size. This gets pretty messy.

I’d like to see a hybrid approach with percentages or predefined font-px. For instance, you might be able to define these in your stylesheet:

And then in your stylesheet, you could define percentages based off of the font-size variables you define. So, for instance, if you have text underneath a header, you want it to be X % smaller than the HEADER_1_FONT_SIZE.

There are more things I will be covering in Part 2 of the blog. Stay tuned!