B I U

In any text processor (Microsoft Word, Google Docs, LibreOffice), the "bold", "italic", and "underline" buttons are located next to each other:

For decades, the pattern has been established in our minds that these are properties of the same order. If you want to make bold and italic text, you press two buttons next to each other:

If you want bold and underlined text:

I won't talk about underlined italics - that's for special people.

In HTML tags, it's just as simple. There are three tags: b, i, and u. You can nest them inside each other to get the desired combination:

<b><i>bold italic</i></b>
<b><u>bold underlined</u></b>
<i><u>please don't</u></i>

But in CSS, these are completely different properties:

{
/* bold */
font-weight: bold;

/* italic */
font-style: italic;

/* underline */
text-decoration: underline;
}

I can somewhat understand font-weight, but I haven't been able to remember the rules for applying the other two properties for 13 years now. If I need to make underlined text and have no hints, I can simply try all the options until it works:

text-style: underline;
font-style: underline;
font-decoration: underline;
text-underline: true;

It's very annoying. I want it either like this:

font-style: bold;
font-style: bold, italic;
font-style: italic, underline;

Or like this:

font-bold: true;
font-underline: true;
font-italic: true;

That's all I need.