CSS 中的区域，比如 C # 区域？

有没有办法在 CSS 文件中定义区域，就像在 C # 中定义区域一样？

像在 C # 中一样，定义区域如下

#region My Region
//your code here
#endregion

我的问题是，我不想为我的 asp.net 项目使用单独的 CSS 文件，但我也想组织，以便我可以定义特定的部分，如一个为母版页 CSS 和一个为 FormUser 等等，这样就很容易在需要时进行故障排除。有可能吗？

38766 次浏览
小开

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

小开
最佳答案

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 */
小开

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

小开

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.

小开

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;


}
}

提交答案