Well, it's quite simple, goes just like this: <div class="message error"> So I wanted to start this new section with a very impressive technique, I just discovered a couple of days ago. Although it's very plausible, I've never used this before, but probably would have saved me a good amount lines of code.

How does it work?

It's very simple, you can add multiple classes to a tag separated with a space. In the example I highlighted above I would use it to define the model of a text box called "message" only once, like

.message { width: 250px; background-color: #eeeeee; border: 1px solid #cccccc; }

and let them mutate in cases where I need this box in form of an error message, where I only need for example the borders to be red. For this I would only need the easy one liner:

.error { border: 1px solid red }

And this would overwrite the border definition of the class message to the red one. Awesomeness.