We should always try sticking to the three-layer model of web development:
- The structure and content layer: HTML
- The presentation and design: CSS
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:
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.