How common is using the style embedded in HTML these days?

I’m following a tutorial, in which once in a blue moon the person will use the style tag. I believe he’s just doing it to show off as much as he can about all possibilities, because that’s the theme in every section so far, show the not so easy way of doing things, then show the easy one etc. I remember this being the only option at some point, but now with separation of concerns how common is it? I can’t imagine very common especially in enterprise level code.

I think a better question would be, Should I be doing it? The answer to that is only when it is really necessary.

How common it is, is really irrelevant as there are a lot of people “out there” using iffy code.

1 Like

sometimes i struggle with this as for example if you have a cms system setup with a basic set of classes for formatting and you occasionally want to do a page that is a bit different you can only do 2 things.

Either add new classes to the stylesheet or add inline css.

Whilst adding classes to the stylesheet might be better in some respects you have now just added classes that don’t apply to the other 90% of your site, so you are adding bloat to your stylesheet.

If you add inline and want to make a global change to your styling you have to find all the places you added it inline and change it line by line. It also makes the html messy.

As a compromise/fix on my previous cms i built i added the ability to insert things into the head of the page. So if i wanted a custom page i could add either <style> to the head or link to a specific stylesheet. This only then applied to that page keeping my main stylesheet cleaner. Because the code was inserted at the end of the head it could override pretty much everything so i was able to make complete sections/subsites if i needed. Media queries could also be added to the styles etc to ensure responsive layouts etc

Is that a good idea? i don’t know but it worked for me.

3 Likes

I tend to use the style tags in the head for just a few instances, generally page-specific, dynamically created css.
For a simple example, on a site where I have different header/hero images on different pages, I may have style tags where PHP inserts the filename for the image for that particular page. Eg:-

<style>
.header { background: url('backgrounds/<?= $thispage->background; ?>.jpg') no-repeat }
</style>

While everything else on the page is styled globally in the main CSS file.

A more complex case is where I have an animated picture slideshow, where a galley and its pictures are pulled from a database. Then knowing the names, number and aspect of pictures and frame duration for that particular gallery, PHP does the donkey work of setting up all the keyframes, then spits out the CSS for that gallery on that page only. Maintaining that in a global CSS would be a nightmare, but PHP makes the complex CSS in an instant, on demand.
Other than that I don’t see the need for CSS in the HTML page.

2 Likes

This might give you some more reasons as to why people might be doing this: https://www.sitepoint.com/how-and-why-you-should-inline-your-critical-css/

Google recommend it if you run the lighthouse tests on your website as doing this helps improve page speed.

1 Like

The articles use of the word inline isn’t what I’ve called the different ways. eg.

style.css

body { 
  color: #BADBEE; 
} 

version-one.html

... 
<link href="style.css" rel="stylesheet"> 
...

version-two.html

...
<style> 
body { 
  color: #BADBEE; 
} 
</style> 
...

version-three.html

...
<body style="color: #BADBEE"> 
... 

I have been referring to version one as “external CSS”, version two as “in the style tag” (not inline as in the article), and only version three as “inline CSS”.

2 Likes

I’ve always referred to it as Internal CSS (in the style tag in the head tag), as opposed to External CSS.

That’s just a common term I’ve picked up over the years while reading through specs.

MDN <style>

In the same manner as <link> elements, <style> elements can include media attributes that contain media queries, allowing you to selectively apply internal stylesheets to your document depending on media features such as viewport width.

Inline CSS is the big no-no

4 Likes

The title of that article is misleading.

1 Like

i understand!!


thankyou

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.