Final Steps and Conclusion - CSS3 Foundations - page 288

chapter seventeen
Final Steps and Conclusion
COOL SHOES & SOCKS is now a truly modern web page. It looks and functions great both on mobile and desktop
devices and, with the approach you've taken, should stand the test of time, continuing to be a great page as technology
and devices advance. Of course, because it is only one page, you will almost certainly want to create more. The page
you created throughout CSS3 Foundations makes for a great template that you can easily duplicate and modify for ex-
isting pages.
Project files update (ch17-00): If you haven't followed the previous instructions and are comfortable working from
here onward or would like to reference the project files up to this point, you can download them from
www.wiley.com/go/treehouse/css3foundations .
Final Steps
When you're happy with the site, what's next? The page will need some final adjustments to get it ready to show the
world!
Removing Production Code and Preparing to Go Live
In Chapter 2, I mentioned that all styles should be placed in one stylesheet where possible. This step is optional but
one that can improve the performance of a web page. Cool Shoes & Socks consists of four stylesheets: reset.css,
styles-ie.css, styles-ie7.css, and styles.css. Because styles-ie.css and styles-ie7.css are conditional stylesheets, they
have to stay separate, but you can combine reset.css and styles.css.
1. In styles.css, find the following @import rule and delete it:
@import url(“reset.css”);
2. Open reset.css, highlight all the styles, and copy them.
3. In styles.css, paste the copied reset.css styles where the @import rule was located.
4. Save styles.css.
Now that the reset styles are included in styles.css, you can minify them. Minifying is also optional but good for
performance. Minifying a stylesheet causes all spaces to be removed from that file, reducing the file size—so
it can be downloaded faster—and making it easier for a browser to read.
Many minifying tools are available, but my personal recommendation is www.cssminify.net , which is one
of the easiest and quickest to use.
5. Create a new file, call it styles.min.css, and save it in the css folder.
6. In styles.css, highlight all the styles and copy them.