一般来说，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，请测试此情形的同学知悉）。
