CSS将代码

时间:2017-10-24 16:26:37

标签: html css code-organization

我想知道是否有办法在单个文件中“分离”部分/部分CSS,使其更有条理,更具可读性。例如,当我们为元素设置一些样式时,它看起来像: Nodes (plus and minus icon) that can be closed/opened

所以,我想知道的是,有一种方法可以创建像节点或'区域'之类的东西来关闭/打开CSS的部分,例如:想要在单个部分中分离我用于DIV的所有样式,另一部分的按钮等等。然后我可以专门关闭/打开这些部分。

有可能吗? 我知道我可以在很多文件中分离CSS,但我想把它放在一个文件中。

3 个答案:

答案 0 :(得分:3)

显然,Visual Studio已经为CSS支持此功能,如Steven Follis' blog上所示。

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

语法为:

/*#region Description of the region*/

.your.css.goes.here {
}

/*#endregion*/

其他编辑当然可以支持类似的语法,尽管很多人都不会。 CSS没有区域的原生语法,因此这些注释在CSS中没有任何语法价值,只是由这个特定的IDE使用。

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

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

答案 1 :(得分: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/ScssLess

答案 2 :(得分:0)

据我所知,你不能在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 { .. }
}

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