? ? ? ? 一般來說，html頁面樣式文件的引入主要有三種方式：
? ? ? ? 1，直接通過style屬性寫在html標(biāo)簽內(nèi)，也就是行內(nèi)樣式；
? ? ? ? 2，引入外部css文件的形式，也即外聯(lián)樣式；
? ? ? ? 3，通過<style></style>標(biāo)簽嵌入到html頭部<head>標(biāo)簽內(nèi)，就是嵌入式。
? ? ? ? 在我們絕大部分的開發(fā)過程中，基本都是以上三種情況來放置css樣式代碼，這三種方式也能滿足絕大部分的開發(fā)需求。但是最近項(xiàng)目中的一些問題，讓我開始尋求css放置位置的另一種可能，最終也找到了相應(yīng)的解決方案。就是在<body>標(biāo)簽中放置<style>標(biāo)簽。
? ? ? ? 我們遇到的問題是，在模塊化開發(fā)的過程中，每一個模塊都是一個獨(dú)立的小系統(tǒng)，有自己的html，css，js；js通過requirejs綁定加載，實(shí)現(xiàn)了模塊的移植便利性；但是css的引入?yún)s是個問題。問題在于一個頁面要使用這個模塊，要么在頭部用link標(biāo)簽引入對應(yīng)的css文件，要么直接把模塊的css放在全局css進(jìn)行打包；前者屬于有的放矢，有效的保證了資源的利用，但是需要人工引入，不方便；后者直接放在全局，雖然實(shí)現(xiàn)了方便性，但也對于不需要此模塊的頁面增加了負(fù)擔(dān)，也增加了css樣式相互影響的風(fēng)險。如果，我們能夠直接把css樣式include到模塊的html中，那么以上的問題就都解決了。問題是，style放在body/div中，符合規(guī)范嗎？
? ? ? ? ?實(shí)際上，在html5規(guī)范之前，我們就可以把<style>嵌入body里面，絕大部分瀏覽器也都是可以正確解析并生效的，但礙于規(guī)范，這么做還是不建議的。通過查看w3c的html5文檔，我們可以發(fā)現(xiàn)html5規(guī)范里已經(jīng)明確提示style標(biāo)簽可以放在head以外的位置，當(dāng)然也包括body。嵌入body里面
? ? ? ? ?如此，我們的問題就解決了。
? ? ? ? ?在查閱w3c文檔的過程中還有一個相關(guān)的意外收獲，就是html新增的style標(biāo)簽的“scoped”屬性，我們看看w3c文檔是如何描述的：
? ? ? ? ?大意就是，style加入此屬性后，這些屬性只會在當(dāng)前包裹它的元素及其子元素內(nèi)生效，如果沒有此屬性，則會在全局生效；scoped的屬性值可以是“scoped”或者空“”或者不寫值。
? ? ? ? ?如圖，此時class=“test”的div中包裹了一個style標(biāo)簽，style標(biāo)簽有scoped屬性。那么style中的css樣式只會在當(dāng)前 .test的div及其子孫元素中生效，而不會影響全局的其它元素。如此一來，我們不僅實(shí)現(xiàn)了模塊的移植便利，還很好的控制了模塊的css作用范圍，再也不用擔(dān)心選擇器沖突導(dǎo)致的各種樣式混亂啦。
? ? ? ? ?是不是很開心，是不是很美好？接下來你會想念一個人。
? ? ? ? ? 除了firefox之外的瀏覽器，包括手機(jī)瀏覽器暫時都不支持scoped屬性，也就是說scoped屬性并不能發(fā)揮它的限制css作用區(qū)域的功能。因此，還是老老實(shí)實(shí)的用選擇器做限定吧。目前我們的做法是，所有模塊都有一個唯一的id，模塊內(nèi)的所有樣式的選擇器前都會加上所在模塊的id，這樣就避免了模塊間的css樣式到處跑了。至于scoped，聊勝于無嘛，寫上總比沒寫好，以后瀏覽器終歸是要支持的吧。
附上參考鏈接：
? ? ? ? w3c關(guān)于style的規(guī)范
? ? ? ??StackOverflow關(guān)于在body中嵌入style標(biāo)簽的討論
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝我是分割線＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
更新：2016-07-18
? ? ? ?最近在使用這一屬性的過程中，發(fā)現(xiàn)了之前沒有提到的一個點(diǎn)：scoped屬性內(nèi)的css樣式，不會被后面的權(quán)重更高的樣式覆蓋。因此，我們在使用過程中應(yīng)該規(guī)避此類事件的發(fā)生。我此次碰到的情況是，當(dāng)一個公共模塊被其它多個頁面調(diào)用時，每個頁面的個性化方案會對模塊的樣式有所更改；而如果這個公共模塊的style加了scoped屬性，則調(diào)用此模塊的其它頁面的css覆蓋代碼，即使選擇器的權(quán)重更高，也不會生效（firefox才支持scoped，請測試此情形的同學(xué)知悉）。
