最近在Twitter上看到這樣一個有趣的話題，爲什麼現在用的是 <link rel="stylesheet" href=""> 引入外部共享的樣式文件，而不使用 <style src=""> ？詳情請點擊https://twitter.com/csswizardry/status/1068154542192242688
我們都知道，內聯的JavaScript是在頁面的 <script> ... </script> 標籤內添加，內聯的樣式是在 <style> ... </style> 標籤內添加；而外部共享的JavaScript文件，則是通過 <script src="..."></script> 來引入，共享的樣式文件不是通過 <style src=""></style> 的形式引入，而是通過 <link rel="stylesheet" href="..."> 形式引入，這是爲什麼呢？
既然JavaScript代碼片段可以通過 <script src="..."></script> 這樣的共享方式引入，那麼樣式文件就不可以通過類似的形式引入？w3c爲什麼要這樣設計，是不是因爲歷史的侷限性，或者是...
好了，不扯淡了。w3c這樣設計是因爲JavaScript代碼片段的引入和樣式文件有本質的不同。
一個重要原因是，他們壓根沒有考慮過要實現 <style src=""></style> 來引入當前文檔外部共享的樣式文件，他們的想法就是使用 <link rel="..." href="..."> 來引入當前文檔外部的資源，如：父文檔，翻譯，或者層疊樣式表等。<link rel="" href="" meidia=""> 元素規定了當前文檔和外部資源之間的關係，它常用來引入外部的樣式表，我們可以通過rel屬性設置爲stylesheet來使用。通過<link>的設計原理，我們知道它應該是可以引入scripts的，但是沒有定義與JavaScript相關的rel屬性值，奇怪的是在HTML 3.2 中，也只是定義了<script>而沒有定義屬性src ，到了後來不知怎麼的就添加這個屬性，現在我們通過<script src="..."></script> 來引入外部共享的JavaScript文件，至於具體原因我想下面的內容可能會回答這個問題。
注：其中rel 屬性它用來表示引入的外部資源和當前文檔的關係，href 屬性表示引入的外部資源的url，media 屬性就是媒體查詢，我們可以定義它的值爲支持媒體查詢的css代碼片段，也可以是像print, screen 這樣的名詞，當然還有其它一些優秀的特性，如：preload，prefetch等。詳情可參考MDN link。
Bruce Lawson的解釋可能會給你打開一些思路，他認爲 <foo src=""> 形式的元素，如：<img src=""> 和 <script src=""></script> 它引入的外部文件是被插入當文檔中的，而樣式表不是，它是關聯當前這個文檔，它作用於不止一個頁面，而<style><style>將樣式限制在了一個文檔中。
更多有趣的前端知識，可關注我的github