Regions in CSS like C# regions?

Is there a way to define regions in CSS file just like regions in C#?

Like in C# you define regions as follows

#region My Region
//your code here
#endregion

My problem is I don't want to use separate CSS files for my asp.net project but I also want to organinze so I can define specific sections like one for Master Page CSS and o开发者_如何学Pythonne for FormUser and so forth so it is easy to troubleshoot when needed. Is it possible?

You can use this for regions...works well to make collapsible regions

/*#region RegionName*/

/*#endregion RegionName*/

The RegionName is optional in endregion, you can also use

/*#region RegionName*/

/*#endregion */

Type region and press tab you will get the following

/*#region name */

/*#endregion */

where you can edit the name to give the region a name of your choice.

You can't do regions, but you can always just use spacing and comments to add some organization if you like.

/*Layout rules*/
body{}
div{}
etc{}

/*Typography Rules*/
etc{}

etc...

No there is no support for regions in CSS.

The usual approach is separating into different CSS files and then use a CSS minification tool for production releases that combines and minifies your CSS, i.e. see minify or YUI Compressor.

You can add Regions to your CSS exactly as you describe by using a visual studio plugin called "Web Essentials" (this is the VS2012 link, but earlier versions are available)

Then you can simply add regions in your CSS by doing this :

/*#region Footer 
---------------------------------------------------- */
.footerHyperlinks{
  decoration:none;
}
/*#endregion*/

In conjunction with the keyboard shortcut (ctrl+M, ctrl+L) this for me is invaluable. as it instantly reduces your huge, long page that you have to scroll through MUCH, MUCH quicker. Hope that helps you out !!

You should use different CSS files and move them into 1 file while building your application. There are special tools for this that do just that as this is the only way.

Use type of Media Query! this is too late to answer but I did this for grouping my code and it working perfectly for me

@media all /*'Global Settings'*/{
    body {
       background: red;
       padding-bottom: 120px;
    }
}

@media all /*'Header Settings'*/{
  .add-to-cart-header {
     height: 66px;
     background: #f7f7f7;

  }
}