每个人都使用包含所有样式的单个文件开始使用CSS。
> style.css
1D
很快，它变得庞大，并且决定按照页面元素将CSS分组在一些文件中：
> html_elements.css
> header.css
> main-area.css
> footer.css
有些可能会发现这不够方便，组风格按功能：
> typography.css
> layout.css
> sticky-footer.css(包含许多元素的声明，而不是页脚)
2D
当项目有很多CSS时，可能需要同时使用这两个组。 CSS文件结构变成二维的：
布局/
> grid-system.css
> header.css
> sidebars.css
看/
>排版/
> main.css
> headers.css
> lists.css
>背景/
> html_elements.css
> header.css
> main-area.css
> footer.css
好的，这个例子是制造的，但你确实明白我的意思。
到目前为止，一切都很好。
输入媒体查询
这就是我的CSS结构弄脏了。
>我的一些风格是普遍的(适用于任何地方)
>某些仅适用于某些屏幕尺寸：
>小
>中等
>大
>超大
>有些适用于某些屏幕尺寸组：
>除小(非移动样式)之外的所有内容;
>中小型(侧杆不在侧面)
> large and xlarge(你有边栏的地方)
我试图通过在现有的CSS文件中散布媒体查询风格来克服这个问题。 breakpoint指南针扩展有很多帮助，但样式表变得太乱了。找到一种风格，当它没有描绘在文件中构成很大的痛苦。
我尝试通过媒体查询进行分组，然后通过元素和功能进行分组。但是文件结构是二维的，所以你不能添加一个新的维度，你只能添加另一个层次结构。所以，这不是优雅的。此外，它非常笨重。
所以我结束了一个二维结构，一个轴上有媒体查询，另一个轴上是一个丑陋的元素和函数组合。
我完全不满意，但我只是想出了一个优雅的解决方案。请建议一个。
解决方法
把这些东西放在一起，你最终可以用特征首先和语义组织，而不是外部的概念，比如类型与布局或者屏幕尺寸。这是我的命名方案：
base/ - Sass imports and settings - no CSS output. - e.g _grid,_colors,_rhythm,etc. general/ - Initial CSS baseline with resets,defaults,font imports,and classes to extend. - e.g. _reset,_root,_fonts,_icons,_defaults,etc. layout/ - The rough outline of the site structure. - Not "layout" as a set of properties excluding type,"layout" as the overall site template which might well include typography. - e.g. _banner,_nav,_main,_contentinfo,etc. modules/ - All the details. First by effect (classes/general),then by widget (ids/specifics). - e.g. _users,_admin,_product-lists etc.
媒体查询应尽可能接近其影响的代码。如果可能，他们直接在线(Sass媒体冒泡)。如果这样变得笨重，他们就会移动到外面，而不是在局部之外。 MQ是覆盖。当您覆盖代码时，尤其重要的是您可以准确地查看覆盖的内容。
在某些网站上，您可能会采取更多的结构。我偶尔会在最后添加两个文件夹：plugins /来管理第三方代码，并覆盖/处理不可避免的(尽量避免它们)位置特定覆盖到一个小部件。我也进一步深入，添加了每个字体系的部分字体/文件夹，或添加，编辑，查看等部分的用户/文件夹。具体情况是灵活的，但基本组织保持不变：
>开始一般。>尽可能慢地移动细节。>不要根据任何外部概念(类型/布局，屏幕尺寸等)划分。
