最近在Twitter上看到這樣一個(gè)有趣的話題，為什么現(xiàn)在用的是 <link rel="stylesheet" href=""> 引入外部共享的樣式文件，而不使用 <style src=""> ？詳情請(qǐng)點(diǎn)擊https://twitter.com/csswizardry/status/1068154542192242688
我們都知道，內(nèi)聯(lián)的JavaScript是在頁(yè)面的 <script> ... </script> 標(biāo)簽內(nèi)添加，內(nèi)聯(lián)的樣式是在 <style> ... </style> 標(biāo)簽內(nèi)添加；而外部共享的JavaScript文件，則是通過(guò) <script src="..."></script> 來(lái)引入，共享的樣式文件不是通過(guò) <style src=""></style> 的形式引入，而是通過(guò) <link rel="stylesheet" href="..."> 形式引入，這是為什么呢？
既然JavaScript代碼片段可以通過(guò) <script src="..."></script> 這樣的共享方式引入，那么樣式文件就不可以通過(guò)類似的形式引入？w3c為什么要這樣設(shè)計(jì)，是不是因?yàn)闅v史的局限性，或者是...
好了，不扯淡了。w3c這樣設(shè)計(jì)是因?yàn)镴avaScript代碼片段的引入和樣式文件有本質(zhì)的不同。
一個(gè)重要原因是，他們壓根沒(méi)有考慮過(guò)要實(shí)現(xiàn) <style src=""></style> 來(lái)引入當(dāng)前文檔外部共享的樣式文件，他們的想法就是使用 <link rel="..." href="..."> 來(lái)引入當(dāng)前文檔外部的資源，如：父文檔，翻譯，或者層疊樣式表等。<link rel="" href="" meidia=""> 元素規(guī)定了當(dāng)前文檔和外部資源之間的關(guān)系，它常用來(lái)引入外部的樣式表，我們可以通過(guò)rel屬性設(shè)置為stylesheet來(lái)使用。通過(guò)<link>的設(shè)計(jì)原理，我們知道它應(yīng)該是可以引入scripts的，但是沒(méi)有定義與JavaScript相關(guān)的rel屬性值，奇怪的是在HTML 3.2 中，也只是定義了<script>而沒(méi)有定義屬性src ，到了后來(lái)不知怎么的就添加這個(gè)屬性，現(xiàn)在我們通過(guò)<script src="..."></script> 來(lái)引入外部共享的JavaScript文件，至于具體原因我想下面的內(nèi)容可能會(huì)回答這個(gè)問(wèn)題。
注：其中rel 屬性它用來(lái)表示引入的外部資源和當(dāng)前文檔的關(guān)系，href 屬性表示引入的外部資源的url，media 屬性就是媒體查詢，我們可以定義它的值為支持媒體查詢的css代碼片段，也可以是像print, screen 這樣的名詞，當(dāng)然還有其它一些優(yōu)秀的特性，如：preload，prefetch等。詳情可參考MDN link。
Bruce Lawson的解釋可能會(huì)給你打開(kāi)一些思路，他認(rèn)為 <foo src=""> 形式的元素，如：<img src=""> 和 <script src=""></script> 它引入的外部文件是被插入當(dāng)文檔中的，而樣式表不是，它是關(guān)聯(lián)當(dāng)前這個(gè)文檔，它作用于不止一個(gè)頁(yè)面，而<style><style>將樣式限制在了一個(gè)文檔中。
文檔到這里基本上來(lái)說(shuō)已經(jīng)完了，Twitter中廣為大家接受的就是上文中的兩個(gè)觀點(diǎn)。但是有的人可能會(huì)比較疑惑。特解釋如下：
個(gè)人覺(jué)得應(yīng)該是w3c設(shè)計(jì)了兩個(gè)方案。第一種是<link>，它可以獲取所有的跟當(dāng)前document文檔相關(guān)的外部文件，包括javascript腳本，這個(gè)上文中已經(jīng)說(shuō)了；另一種，就是<foo src="">，它是指待了一類元素如img，script,上文中說(shuō)明了它是指代了一種外部文件與當(dāng)前文檔關(guān)系。
如果覺(jué)得還有問(wèn)題，我建議還是twitter一下這個(gè)話題。
更多有趣的前端知識(shí)，可關(guān)注我的github
