用元素、函数和媒体查询构造CSS文件: 3D代码结构？

Question

零维

每个人都开始使用包含所有样式的单个文件的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文件结构变为二维结构：

layout/

• grid-system.css
• header.css
• sidebars.css

look/

• typography/
  • main.css
  • headers.css
  • lists.css

​

• backgrounds/
  • html_elements.css
  • header.css
  • main-area.css
  • footer.css

​

好吧，这个例子是捏造的，但你一定明白我的意思。

到目前为止一切都很好。

输入媒体查询

这就是我的CSS结构被放大的地方。

除了上面描述的2D结构之外，我还必须通过媒体查询来构造代码：

• 我的一些风格是通用的(适用于任何地方)
• 有些仅适用于特定的屏幕大小：
  • 小规模；
  • 中等；
  • 大的；
  • 特别大的。

​

• 有些应用于某些屏幕大小组：
  • 除了小东西(非移动风格)；
  • 中小型(侧边栏不在旁边)
  • large和xlarge (其中有侧边栏)

​

我试图通过在现有CSS文件中分散媒体查询样式来解决这个问题。断点 Compass扩展提供了很多帮助，但是样式表变得过于混乱。找一个特定的风格，当它没有被描绘在文件结构中，非常痛苦。

我尝试按媒体查询分组，然后按元素和函数分组。但是文件结构是二维的，所以不能添加新的维度，只能添加另一个层次结构。所以，这不优雅。而且，它很大。

最后，我得到了一个2D结构，其中一个轴上有媒体查询，另一个轴上混合了一些元素和函数。

我对此绝对不满意，但我只是想不出一个优雅的解决方案。请推荐一个。

Answer 1

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媒体冒泡)。如果它变得笨重，它们就会向外移动，但永远不会超出部分区域。MQ是重写的。当您重写代码时，特别重要的是您能够准确地看到正在被覆盖的内容。

在某些站点上，您可能会将此结构进一步提升。我偶尔会在末尾添加两个文件夹:管理第三方代码的plugins/和处理不可避免的overrides/ (尽量避免它们！)特定位置对小部件的重写。我还做了更深入的研究，添加了一个包含每个字体系列的部分的fonts/文件夹，或者一个包含用于添加、编辑、查看等部分的users/文件夹。这些细节是灵活的，但是基本的组织仍然是一样的：

• 开始将军。
• 越慢越好。
• 从不根据任何外部概念(类型/布局、屏幕大小等)进行划分。

Answer 2

为什么不试试这样的方法：

/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*/

Answer 3

最后我要做的是您的2D解决方案(尽管我的解决方案有更多的嵌套)，并在需要时使用断点来编写媒体查询。我们需要处理的事情之一是，我们的输出CSS看起来与我们手写的代码不一样，这是使用CSS预处理器并具体地抽象周围事物的现实。很快，Google Chrome的开发工具将提供内置的Sass部分支持，还有FireSass为火狐帮助你找出样式的来源。

希望这些帮助！