/ Code

CSS and all its problems

CSS is a horrible language. It really is.

I work with it every single day, but it always manages to annoy me in some way.


CSS is not a language for 2016. It was good once upon a time and they try to fix things every once in a while. Though it still misses a lot of what would be considered basic features of a language in recent years, every day I find myself using some form of hack to make things work. And today I wanted to walk you through some of my biggest peeves with CSS.

Vertical alignment

.something {
  display: block;
  width: 500px;
  height: 120px;
  position: relative;
  margin-top: 50%;
  transform: translateY(-50%);
  margin-left: auto;
  margin-right: auto;
}

What you're looking at right there is the commonly preferred code to vertically and horizontally center something in CSS without relying on changing the display type to a table-cell. If you're still using older methods, you're probably doing:

.something {
  display: table-cell;
  width: 500px;
  height: 120px;
  vertical-align: middle;
  margin-left: auto;
  margin-right: auto;
}

While that's shorter, it's not recommended, since changing the display type to table-cell can cause other issues for more complicated use cases. Such as if you're trying to align text inside an actual table-cell. At that point CSS usually just shits itself.

This is an issue I encounter all the time. Worst of all is that the translateY method doesn't work properly on iOS devices. Meaning that people still end up using the table-cell method if they want to support those devices. Something I've just given up doing, since in my opinion the iOS devices are just way too far behind. They don't even play WebM videos.

In an ideal world, the following code would be everything we'd need to center something both horizontally and vertically:

.something {
  width: 500px;
  height: 120px;
  margin: auto;
}

Though sadly, that's far from the case.

Note: I am aware of flexbox. Though sadly flexbox isn't really recommended for production that often. Older and more niche browsers can have issues with it.

Variables

I'm glad to tell you that this is something that's currently supported by Firefox and in some versions of Chrome if you prefix it with -webkit. Though it's also something that's way overdue. And knowing the speed of web technologies, it will takes ages for mobile devices and browsers such as Microsoft Edge to support them. iOS will probably be especially bad.

Variables are currently one of the most common reasons why people turn to pre-processors of CSS. But let's face it. They suck. Having to compile your SCSS or LESS into regular CSS files is a chore. If you have a framework that does it for you, or you're in need of features like the nesting and includes. Then sure, go ahead. But if you then change frameworks to something that uses a different built-in pre-processor, you'll have to learn it all over again, to some degree.

Writing default CSS wastes time when you have to modify color codes and font sizes all over the place, while using pre-processors will add extra hoops to jump through while you're working with your code. Something which is never a fun thing.

Brackets and semicolons

Brackets are usually used to make it easier to find and separate different blocks of code. And semicolons are a common way to say "This is where the current statement ends". Though the issue is that CSS never really needs this.

Brackets are quite useless since the blocks all use the format that is something followed by a couple lines of style properties. Semicolons are also pretty much useless. Unless you make a really long chain of font-family entries. You probably won't need to place a line-break in the statement.

In short, there's almost no reason why this shouldn't be valid CSS:

.something
  color: #FFFFFF
  background-color: rgba(255,33,33,0.5)

In fact, there are already plenty of pre-processors who do this. The only use-case I can think of where you need them are when you minify things onto a single line. But you still have no reason not to make them optional.


Those are my main issues with CSS. There are more small ones here and there, and I could probably triple the length of this post. But I'll spare you the pain of that.

These are just my opinions. Your mileage may vary.

Also, did you notice something different about the CSS on this page? I'm sure you did.