This course will become read-only in the near future. Tell us at community.p2pu.org if that is a problem.
CSS Bliss & Beyond for the seasoned designer and newbie exploring the foundation of CSS along with studying some of the more complex coding scenarios. CSS is the bread and butter for all things visual on the web making our HTML sparkle and shine.
WEBCRAFT
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;}
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?
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.
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.
