The way JavaScript works is we can do scripts as an inline block:

 let foo = "bar";

Or, if the script should be fetched from the network…

/js/global.js

With CSS, we can do an inline block of styles:

<style> .foo { color: red; }
</style>

So why not <style src=""></style>? Instead, we have <link href="">.

Harry Roberts asked about that the other day on Twitter:

Can any W3 historians tell us why it’s `<link rel=”stylesheet” />` and not `<style src=”…”>`?

— Harry Roberts (@csswizardry) November 29, 2018

https://platform.twitter.com/widgets.js

There is lots of speculation in that thread, but Bruce has a pretty clear answer:

AFAIK, <foo src=””> tells the browser to get something and insert it here – eg <img src=””>, “<script src=””>. Stylesheets aren’t ‘inserted’, they are related to the current doc, but typically style more than 1 page. <style></style> declares a block of rules for this page only

— Bruce Lawson (@brucel) November 29, 2018

https://platform.twitter.com/widgets.js

I sort of get that. The location in the document matters with src, but not with <link> — that relates to the entire document instead. I guess the crack in that reasoning is that the order of stylesheets does matter for order-specificity, but I take the point.

The W3C chimed to confirm that logic:

<link rel=stylesheet> was completely obvious at the time, with <link> for external resources that apply to the whole document (copyright, parent document, alternative formats, translations, style sheets); <style src=”…”> was never discussed. (1/2)

— W3C (@w3c) November 29, 2018

https://platform.twitter.com/widgets.js

There we have it: <style src=""></style> wasn’t even considered.

The post Why isn’t it <style src=””>? appeared first on CSS-Tricks.