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?
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;}
