CSS 将代码分成几部分

Question

我想知道是否有一种方法可以将 'separate' parts/pieces of CSS 放在一个文件中，从而更有条理并具有更高的可读性。例如，当我们为一个元素设置一些样式时，它看起来像这样： Nodes (plus and minus icon) that can be closed/opened

所以，我想知道的是，有一种方法可以创建节点或 'regions' 到 CSS 的 close/open 部分之类的东西，例如：想要分离所有样式我在单个部分中用于 DIV，在另一部分中用于按钮等。然后我可以 close/open 具体地使用这些部分。

这可能吗？我知道我可以在多个文件中分隔 CSS，但我希望它在一个文件中。

Answer 1

简短的回答是否定的。

仅在 CSS 上，我不认为你可以得到你想要的东西（除非你对分开的部分的评论感到满意）。但是有一些预处理器，例如 SASS/SCSS 或 LESS，旨在能够嵌套您的样式并以这种方式组织它们。

以 SCSS 为例，你可以这样 CSS:

.a {
  /*some styles*/
}
.a.b {
  /*some styles*/
}
.a .c {
  /*some styles*/
}

看起来像这样：

.a {
  /*some styles*/
  &.b {
    /*some styles*/
  }

  .c {
    /*some styles*/
  }
}

但是为了能够使用它，您需要将此代码预编译为 CSS 并在您的 HTML 页面上引用它。

您可以在他们自己的网站上看到更多 Sass/Scss and Less。

Answer 2

显然 Visual Studio 已经为 CSS 支持此功能，如在 Steven Follis' blog.

上所见

您可以添加定义区域的特定注释。

语法是：

/*#region Description of the region*/

.your.css.goes.here {
}

/*#endregion*/

其他编辑器当然可能支持类似的语法，尽管很多不支持。 CSS 没有针对区域的本机语法，因此这些注释在 CSS 中没有任何语法价值，仅供此特定 IDE.

使用

但是除了使用区域之外，您还可以使用单独的文件来组织代码并使用脚本将它们连接在一起。这可以是一个简单的脚本，也可以是其他人建议的更高级的预处理器，但总的来说，您可以以更灵活的方式组织 CSS，并且仍然只有一个（最好是最小化）文件在你的页面中。

如果您开始使用这些，我可以根据个人经验推荐 SCSS。它比 SASS 更接近 CSS。我以前用过 LESS，但我认为它的某些功能缺乏或只是含糊不清。 SCSS设计的比较合乎逻辑。

Answer 3

据我所知，您不能在 CSS、LESS 或 SASS 中使用任何类型的区域。

我建议使用 LESS 和这种方法：

main.less

@import "header.less";
@import "footer.less";

header.less

.headerContainer { ... }
.header { ... }
.title { ... }

footer.less

.footerContainer { ... }
.footer { ... }
.contact { ... }

我知道你说过你不想要单独的文件，但这是保持代码简洁的好方法，但它仍然会全部编译成一个 main.css 文件。

第二个选项是简单的注释。

/****** Header ***********/

.headerContainer { ... }
.header { ... }
.title { ... }


/****** Footer ***********/

.footerContainer { ... }
.footer { ... }
.contact { ... }

虽然这是不可折叠的。

或者第三个也是最糟糕的选择...因为您给出的两个示例是将所有 div 和所有 button 分开。

div {
  &.header { ... }
  &.headContainer { ... }
}

button {
  &.submit { ... }
  &.cancel { ... }
  &.whatever { .. }
}

虽然我真的不推荐这个选项。看起来很笨重。

CSS 将代码分成几部分

CSS separating code in parts

html

css

code-organization