Stylesheet Structure


When creating your site style sheet(s), try to keep things in a modular fashion. This way when debugging your CSS you can have those modules quarantined for easy inspection.

For Example...........


@charset "UTF-8"
/* CSS Document */

/* =============================================================================

   Reset Styles

 ========================================================================== */


/* =============================================================================

   Layout Styles

   ========================================================================== */



/*xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx Global Page LAYOUT STYLES */

your-code-here {.........}


/*xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx Page Specific LAYOUT STYLES */

/*HOME*/
your-code-here {.........}
/*ABOUT US*/
your-code-here {.........}

/* =============================================================================

   COLOR STYLES

   ========================================================================== */



/*xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx Global Color LAYOUT STYLES */

your-code-here {.........}

/*xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx Page Specific Color LAYOUT STYLES */

/*HOME*/
your-code-here {.........}
/*ABOUT US*/
your-code-here {.........}

 


 

Turn that CSS efficiency up to ELEVEN mate

To go a step further write your CSS code efficiently by elimintaing some of these spaces in your code......

1A.) For instance, do not leave an empty space at the beginning and final bracket of your declaration. (see example 1.1A)

/*Example 1.1A*/
element_selector {background-color: orange;}
-instead of-

element_selector { background-color: orange; }


1B.) You can also make your code more efficient by eliminating the final semi-colon. This is a huge portion of what minification does with CSS when it minifies your style sheet. (see example 1.1B)

/*Example 1.1B*/
element_selector {background-color: orange; font-size: 1em}
-instead of-

element_selector {background-color: orange; font-size: 1em;}
 

Task Discussion


  • Ravi   21 oktober 2012 13:12

    Can someone explain how the efficiency gets improved by removing a space before the closing curly braces?

     

    Similarly can someone explain what difference does the last semi-colon make, technically speaking?

  • newwebsite   8 december 2012 19:56
    Reageer op:   Ravi   21 oktober 2012 13:12

    Gday Ravi

    A white space is an unnecessary character for a client to process. That's why minifiers that remove all our usual code layout speed up a website.

    The last semi-colon allows more declarations to be made. If it's not there the next line will not be parsed. However if it's not there then there is one less character to be processed.

    Still, I thought it was generally considered wise to include it whether there's another declaration or not to avoid likely errors when adding declarations to the selection later. I'll reconsider after reading the above advice.

  • KimD   23 januari 2014 00:39
    Reageer op:   Ravi   21 oktober 2012 13:12

    I don't think it makes much difference having that last semi-colon in or not.  I use it just to be in the habit of adding it after all my styles.  You want to make your CSS file as simple as possible and use as little characters as possible.  This helps with the page reading the file and knowing how to render it.

  • MOHAMMED MAHMOOD   23 januari 2014 00:47
    Reageer op:   KimD   23 januari 2014 00:39
    DEAR SIR, THANK YOU FOR YOUR MAIL OUR REPRESENTATIVE WILL CONTACT YOU SHORTLY THANKS & REGARDS DANIYAALS INTERNATIONAL CELL 09966564416