通过元素，功能和媒体查询来构造CSS（SASS，LESS）文件：3D代码结构？[关闭]

我最终要做的是您的2D解决方案（尽管我的解决方案还有更多的嵌套功能），并在需要时使用Breakpoint在线编写媒体查询。我们需要处理的事情之一是我们的输出CSS看起来不会和我们的手写代码相同，这是使用CSS预处理器并专门抽象处理周围事物的现实。很快，Google Chrome浏览器的开发工具将附带内置的Sass部分支持，并且 Firefox的FireSass可以帮助您确定样式的来源。

希望这些帮助！

好的，这更多是个人喜好问题，可能无法真正回答问题，但这是我的贡献：

我要做的是像您所说的“ 2D”组织，文件少了很多（假设我们说的CSS的预处理器少了）

我发现在我正在样式的元素的同一“较少”文件中使用媒体查询更加容易。

因此，例如，我有header.less，并且在同一文件中有其媒体查询。

#header {
    ...
}

//Header media queries
-----------------------

@media screen and (min-width:480px) { ... }
@media screen and (min-width:768px) { ... }

现在，为什么我选择这样做呢？->因为（对我而言）在...中不得不查找另一个文件（例如说响应.less），在其中搜索媒体查询标题，进行更改等，这是一个巨大的痛苦。等等，相反，使用这种方法，我总是知道我的媒体查询在哪里，并且可以轻松地访问/修改每个元素，并且不会在代码中添加很多行。

唯一的问题是，当生成CSS时，我们最终将获得遍历整个CSS代码的单个元素的媒体查询。不是很漂亮！（这时，less / winless不会自动对媒体查询进行分组。）

我结束了构建一个小的应用程序来对媒体查询进行分组的过程：http : //nokturnalapp.com/mqhelper/ 我用它来构建用于生产的CSS文件。（尚未完成，我需要添加从媒体查询版本中剥离的代码，但请看一下。）

希望这对您有所帮助。

CSS已经是一种结构化语言。无论好坏，代码的顺序都会改变其含义。因此，重要的是任何CSS组织方案都主要由级联决定。CSS的另一个结构方面是语义。利用它来发挥您的优势。组织的关注在于保持事物有意义和可维护。保留意义的最好办法就是展现人际关系。关系已经通过语义表达。

将这些内容放在一起，最终您将得到的代码是按特定性，然后按语义组织的，而不是按外部概念（如类型与布局或屏幕大小）进行组织。这是我的命名方案：

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媒体鼓泡）。如果那变得笨重，它们将移动到块的外部，但不会移到partial的外部。MQ是重写。当您覆盖代码时，尤为重要的是，您必须能够准确地看到被覆盖的内容。

在某些站点上，您可能会更进一步。我偶尔在末尾添加了两个文件夹：plugins/用于管理第三方代码，以及overrides/处理对窗口小部件不可避免的（尝试避免它们！）特定于位置的替代。我也进行了更深入的介绍，fonts/为每个字体系列添加了带有部分内容的文件夹，或者users/为添加，编辑，查看等添加了带有部分内容的文件夹。细节非常灵活，但是基本组织保持不变：

• 开始一般。
• 尽可能缓慢地转向细节。
• 切勿根据任何外部概念（类型/布局，屏幕尺寸等）进行划分。

为什么不尝试这样的事情：

/root
  /modules
    /header
      /html
        header.html
      /css
        module_styles.css /*Configure which style sheets are included with @media rule in this file*/
        /at-media
          small.css
          medium.css
          large.css
      /js
        fancy-nav.js
  /site
    includes.css /*use @import to include each modules stylesheet in a file here and let each module control its own media issues*/