SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Zealot Raphaelle's Avatar
    Join Date
    Jul 2006
    Posts
    125
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    curly braces inside of curly braces?

    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:

    Code:
    /* 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:

    Code:
    /* 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. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,296
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    It's not valid like that but I suppose you could put them inside multiple media queries.

    Code:
     @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

    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. #3
    SitePoint Zealot Raphaelle's Avatar
    Join Date
    Jul 2006
    Posts
    125
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Paul O'B. It does sound like pretty bad practice

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


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •