按元素,按功能和媒体查询构建CSS(SASS,LESS)文件:3D代码结构？

Question

零d

每个人都开始使用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结构之外,我还必须通过媒体查询来构建我的代码:

• 我的一些风格是通用的(适用于所有地方)
• 有些仅适用于特定屏幕尺寸:
  • 小;
  • 介质;
  • 大;
  • 超大.
• 有些适用于某些屏幕尺寸组:
  • 除了小(非移动风格)以外的一切;
  • 中小型(侧边栏不在侧面)
  • 大和xlarge(你有侧边栏的地方)

我试图通过在现有CSS文件中分散媒体查询样式来克服这个问题.该断点指南针扩展有很大帮助,但样式表变得太乱.在文件结构中没有描绘某种风格时会发现很多痛苦.

我尝试通过媒体查询进行分组,然后按元素和函数进行分组.但是文件结构是二维的,因此无法添加新维度,只能添加另一级别的层次结构.所以,它并不优雅.而且,它非常笨重.

所以我最终得到了一个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/为每个字体系列添加了一个包含partials 的文件夹,或者users/添加,编辑,查看等部分文件夹.具体内容很灵活,但基本组织保持不变:

• 开始一般.
• 尽可能慢地转向细节.
• 永远不要基于任何外部概念(类型/布局,屏幕尺寸等)进行划分.