Curly braces inside of curly braces?

HTML & CSS
1

I’ve been thinking of ways I could organise my stylesheets in order for them to be super tidy.

Of course I already break my css into separate sections with comments such as:


/* NAVIGATION
---------------------------------------------*/

However I’d like to go a bit further, particularly if I’m using a single stylesheet which is getting very long.
In order to have sections such as “navigation” that I can collapse and expand in Textmate (or any other code editor) as I need those styles, is it OK to have curly brackets around all these navigation styles? Like media queries.

This is an example of what I mean:


/* NAVIGATION
---------------------------------------------*/
{
	.menu {
		bottom: 0;
		left: 0;
		position: absolute; }
	
	#nav {
		float: left; }
	
	#nav li {
		float: left; }
	
	#nav a {
		-webkit-border-top-right-radius: 8px;
		-webkit-border-top-left-radius: 8px;
		-moz-border-radius-topright: 8px;
		-moz-border-radius-topleft: 8px;
		border-top-left-radius: 8px;
		border-top-right-radius: 8px;
		
		background: #0396CF;
		display: block;
		font-size: 14px;
		margin-right: 5px;
		padding: 6px 10px;
		text-decoration: none; 	}
		
	#nav li.current a,
	#nav a:hover {
		background: #616161; }
		
	#btn_new {
		float: left; }
		
	.btn_new_options {
		display: none; }

}

I wonder if it’s a good practice or a terrible one. Will it affect performance?

Cheers

2

It’s not valid like that but I suppose you could put them inside multiple media queries.


 @media screen {
    body { font-size: 13px }
  }

 @media screen {
    #content { font-size: 13px }
  }

Not sure that’s a good idea though as adding unnecessary mark up is always a bad thing :slight_smile:

Perhaps get a code editor that allows code collapse . The only one I know that code collapses is DW but there must be some others out there.

3

Thanks Paul O’B. It does sound like pretty bad practice :slight_smile:

Textmate does allow collapsing but only per set of styles - if you know what I mean.