I’ve been an advocate of writing beautiful code, right from the time I began writing pieces of code myself. Functional code is the ultimate aim for all developers, one that defines how they tackle a problem. But beautiful code is an arbitrary and subjective concept. Codes with comments and in-line explanations are beautiful to me. They might be cluttered for you. Indented and terminated lines make code easier to read for my brain. They might be superfluous ornamentation to you.⌘

We write code the way we see the problem. A quick-fix solution gathers the ugliest, most crammed-up code ever known to man. Large, modular projects automatically receive the most well documented and clear code. It’s just how the mind is tuned to work — with the destination influencing our methodology.⌘

The natural feeling

Code is usually the furthest thing away from “natural”, and CSS sticks close to those roots better than most. Repetitive colour hex values and attribute:value pairs are just two of the many things that drive me insane whenever I sit down to write the style-sheet for my pages. The lack of a visual hierarchy is a close third, which makes debugging and changing things just that much harder. CSS just doesn’t feel natural enough, and you end up having to take care of your brackets, semi-colons and quote-marks more than the style itself. It’s ironical how a language for visual presentation is so ugly in itself.⌘

These annoyances are probably not annoyances any more to designers who have been dabbling with CSS for many years, because they’ve become accustomed to the ugliness. But the point has to be made that just because we are used to the wrong way of doing things, doesn’t make the way any right-er.⌘

I don’t propose a change in the in the syntax of the language. The implementation itself is rock solid. What we need is something to form a bridge between readable, visually clean code, and the standardised, already established syntax that we’ve all come to love or hate. The aim is not to create a new syntax in itself (why re-invent the wheel?), but leverage the current one to work with our way of working.⌘

Textualise

Combining the above points, Textual aims to make styling just that much easier, but keeps the most familiar elements of CSS the same so that you don’t rattle into the unknown. It doesn’t include short-cuts or pre-definitions. It is not a framework either. If you think you’re alright with traditional CSS, I will not argue. But Textual is just a better way to do what you’ve already been doing. Your code[^1] will look and feel right, and the output will be just what you would expect. The CSS is well-formed and W3C valid, so that is one worry that isn’t a worry. The output is mini-fied, hence load times are fast.⌘

The syntax is explained on the project page, but I think it’ll come to more naturally than you’ll believe.⌘