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.
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.