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.

Variables/Functions

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.

Alignment!

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!