Regions in CSS like C# regions?
CssVisual Studio-2010Css Problem Overview
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 one for FormUser and so forth so it is easy to troubleshoot when needed. Is it possible?
Css Solutions
Solution 1 - Css
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 */
Solution 2 - Css
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...
Solution 3 - Css
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.
Solution 4 - Css
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.
Solution 5 - Css
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)][1]
[1]: http://visualstudiogallery.msdn.microsoft.com/07d54d12-7133-4e15-becb-6f451ea3bea6 "Web Essentials"
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 !!
Solution 6 - Css
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.
Solution 7 - Css
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;
}
}