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