CSS separating code in parts

问题

I was wondering if there is a way to 'separate' parts/pieces of CSS in a single file, to be more organized and have more readability. For example, when we set some style to an element, it appears like that: Nodes (plus and minus icon) that can be closed/opened

So, what i want to know is, there is a way to create something like nodes or 'regions' to close/open parts of CSS, like: Want to separate all styles that I use for DIVs in a single part, Buttons in another part, etc.. then I can close/open those parts specifically.

It is possible? I know that I can separate the CSS in many files, but I want it in a single file.

回答1:

Apparently Visual Studio already supports this for CSS, as found on Steven Follis' blog.

You can add specific comments that define a region.

The syntax is:

/*#region Description of the region*/

.your.css.goes.here {
}

/*#endregion*/

Other editors may support a similar syntax of course, although many won't. CSS doesn't have a native syntax for regions, so these comments don't have any syntactic value in CSS and just used by this particular IDE.

But apart from using regions, you may as well use separate files to organise your code and use a script to concatenate them together. That can be a simple script, or a more advanced pre-processor as suggested by others, but the general point is that you can organise the CSS in a more flexible way, and still have a single (preferably minimizes) file in your page.

Should you start using those, I can recommend SCSS from personal experience. It's more close to CSS than SASS. I used LESS before, but I thought some of it's features were lacking or just vague. SCSS is more logically designed.

回答2:

A short answer is no.

On CSS alone I don't think you can have what you want (unless you get satisfied with comments to separate parts). But there are some preprocessors, like SASS/SCSS or LESS, that are designed to be able to nest your styles and organize them that way.

With SCSS, for example, you can have this CSS:

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

looking like this:

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

  .c {
    /*some styles*/
  }
}

But to be able to use it, you need to precompile this code to CSS and reference it on your HTML page.

You can see more of Sass/Scss and Less on their own websites.

回答3:

As far as I know, you cannot use any type of regions in CSS, LESS or SASS.

I recommend using LESS and this approach:

main.less

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

header.less

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

footer.less

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

I know you said you don't want separate files, but this is a really nice way of keeping your code straight but it will still all compile to a single main.css file.

The second option would be simple comments.

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

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


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

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

This is not collapsable though.

Or the third and worst option... since the two examples you gave were to separate all divs and all buttons.

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

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

I really don't recommend this option though. It seems clunky.

来源：https://stackoverflow.com/questions/46915562/css-separating-code-in-parts

标签

html

css

code-organization