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

CSS

Tom凯

2020-03-24

零维

每个人都开始将CSS与包含所有样式的单个文件一起使用。

  • style.css

一维

很快，它变得笨重，决定将CSS按页面元素分组在多个文件中：

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

有些人可能觉得这不够方便，并按功能对样式进行分组：

  • typography.css
  • layout.css
  • sticky-footer.css （包含许多元素的声明，而不仅仅是页脚）

2D

When a project has a lot of CSS, it might require using both groupings simultaneously. CSS files structure becomes two-dimensional:

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

Okay, the example is fabricated, but you sure do understand what i mean.

Up to this point everything is fine.

Enter Media Query

This is where my CSS structure gets funked up.

In addition to the 2D structure described above, i have to structure my code by media queries:

  • Some of my styles are universal (applied everywhere)
  • Some are applied to certain screen size only:
    • small;
    • medium;
    • large;
    • extra large.
  • Some are applied to certain groups of screen sizes:
    • everything except small (non-mobile styles);
    • small and medium (where sidebars aren't at the sides)
    • large and xlarge (where you do have sidebars)

I tried to overcome the issue by scattering media queried styles among existing CSS files. The breakpoint Compass extension helps a lot, but the stylesheets become too messy. Finding a certain style when it's not portrayed in the files structures a lot of pain.

I tried grouping by media queries, then by elements and function. But files structure is two dimensional, so you can't add a new dimension, you can only add another level of hierarchy. So, it's not graceful. Also, it's very bulky.

So i end up with a 2D structure with media queries on one axis and an ugly mix of elements and functions on the other axis.

I'm absolutely not satisfied with that but i just fail to come up with a graceful solution. Please suggest one.

第3627篇《通过元素，功能和媒体查询来构造CSS（SASS，LESS）文件：3D代码结构？\[关闭\]》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共4个回答
西里神奇 2020.03.24

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

希望这些帮助！

番长樱梅 2020.03.24

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

我要做的是像您所说的“ 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文件。（尚未完成，我需要添加从媒体查询版本中剥离的代码，但请看一下。）

希望这对您有所帮助。

卡卡西 2020.03.24

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/为添加，编辑，查看等添加了带有部分内容的文件夹。细节非常灵活，但是基本组织保持不变：

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

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

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

相似问题

0 回答

0 回答

5 回答

25 回答

0 回答

0 回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android