You can use the Style Attribute

Style and content are not always separate concerns

When you first learn CSS and HTML you learn that you can style elements like this

<p syle="font-family: 'Comic Sans MS'">Test</p>

Then you learn you can create classes and reuse them.

...
<style>
.comic-paragraph {
    font-family: 'Comic Sans MS'
}
</style>
...
<p class="comic-paragraph">Test</p>

Finally, you learn that you shouldn’t do any of that, and you import your css from another file instead.

...
<link href="/src/style.css" type="text/css" rel="stylesheet"/>
...
<p class="comic-paragraph">Test</p>

Separation of concerns

The idea is that this will allow us to separate content from style. How is CSS and style not content, if you show a red alert it sends a different message than a green alert. To me that’s content. And there even more easy examples than that, does this not effecting the content of the page

.content {
    visibility: hidden;
}

Don’t create unnecessary abstractions

If you have a style that only affects one element, just use the style attribute. This is especially true for utility classes, this:

<p class="color-blue">Test</p>

is not more expressive than this:

<p style="color: blue">Test</p>

If you have your own shade of blue that needs to be consistent throughout the site it’s better that you create a CSS variable rather than a class:

<p style="color: var(--color-blue)">Test</p>

You don’t need to have your style in a separate file if it only needs one or two styling declarations.

The style tag

The use or not of the style tag should be about the css is critical for rendering the page. If it is critical use the tag, though maybe still write it in separate files and let your build tool do the inlining

When should CSS be seperated

  1. When there is more than 1 or 2 style declarations. It’s hard to read one long line of declarations.
  2. When the same style will be used on multiple elements. Otherwise, changing that style will be difficult.
  3. When the CSS classes also describe what the style is doing. i.e. btn-danger or alert-warning.
  4. Any other situation the separation improves the readability or performance of your page.

You might read those and think “actually that covers most cases where I write CSS”, and you’d be right.

So you should move your CSS to separate files then? Maybe. But if you’re reading your code, and think “It would be easier to understand this CSS in the style attribute”, just use the attribute.