We should always try sticking to the three-layer model of web development:

  • The structure and content layer: HTML
  • The presentation and design: CSS
  • The behavior: Javascript

This makes for easily maintainable web pages, better performance thanks to caching and increased re-usability since you have everything in a specific file and this makes it easy to move it somewhere else.

I try to stick to this model all the time, but sometimes I am unconsciously making the layers overlap. I’ve noticed that this happens most of the time when I need to run text transformations. My main language is PHP, so that’s where I’ll draw my examples from.

PHP offers a strtoupper function to transform a given string to uppercase. Obviously, we also have a strtolower to transform it to lowercase and we also have ucwords for capitalization. This is all good, but what I wanted to say today is this:

If you need to apply a transformation to a piece of text for design reasons, you should use the equivalent CSS text-transform property.

text-transform does exactly this and more. Specifically, for the three named examples here, you can use the following properties:

text-transform: uppercase;
text-transform: lowercase;
text-transform: capitalize;

Of course, the PHP functions are still useful in certain scenarios (say when you need to match a user-entered string with a filename, for example, then it makes perfect sense).

If the goal is purely aesthetic, though, please use CSS.