Do you want respect for writing easy to read code?
Do you want your visitors to appreciate fast page loads?
Do you want to create code and make updates in the least amount of time possible?
Then you have come to the right place!
For the most part, CSS is forgiving and works regardless the order in which written. You may be tempted to let the creative side rule and enter code as it comes. However, taking the time to tackle CSS in an orderly, optimized fashion has definite long-term benefits. Optimizing CSS will help keep file size manageable allowing for faster page load. Optimization provides readability and efficient editing for all. Bonus: optimization identifies common processes for future duplication and efficient coding..
Optimize your CSS by following these 7 tips:
CSS RESET:
As you code you may find yourself struggling to position elements due to margins, borders, padding, font, line height settings, etc. that you did not style. This is due to browser inconsistencies that may use pre-set styles. The work-around to this potential headache is to include resets into every CSS you code.
Reset coding will strip out all inconsistent default styling from browsers allowing you to start your code on a blank slate. You can write your own reset or utilize one of the following tools that provide reset code to use or copy and tweak to your needs. Regardless how you reset your code, it is highly recommended to use to avoid frustration and save time.
Many reset options can be found at Perishable Press in their article “Killer Collection of CSS Resets”. A notable recommendation is to make any reset you use its own document and import into your CSS. I elaborate further on separate CSS documents in “Create and Use a master CSS file” below.
ORGANIZE YOUR CODE:
Things run more smoothly when they are neat and orderly. The same is true with organized code.
One of the first steps in ensuring your code is organized is to identify what is contained within. With a few areas of identification near the top of your stylesheet, you will easily be able to identify the elements used and where they are located. Suggested areas of identification include:
Table of Contents that targets each section
Color Guide that identifies colors used, associated color name and code, and where used
Typography Guide that identifies font and font size used and where
This simple addition of information allows you to know at a glance styles and location. This not only allows elements to be located more quickly, it lowers the possibility of missing anything when making changes.
PRACTICALITY AND CONSISTENCY:
Practicality rules include naming all classes according to what they are rather than what they look like and the use of comments.. Naming classes by look can be too specific causing confusion and future changes time consuming. For instance, the classes “.col-left” and “.col-right” may be better suited as “.col-a” and “.col-b”. If the columns needed to be moved, the reference of “a” and “b” would be less confusing than “left” now being “right” column and “right” now being “left” column. Comments are extremely helpful in ensuring detailed code: do not leave others guessing. However, use comments wisely by not overusing and keeping them as short as possible. The use of long lines of asterisks or dashes between the opening and closing forward slashes will help your comments stand out.
Consistency is also key. Ensure you always use well-structured CSS rules with appropriate indents. Coding tip: if only one rule, use one line, and if more than one rule, use multiple lines.
KEEP YOUR CODE CLEAN:
Detailed coding is important but there is a fine line in achieving that detail and keeping your code clean. If you overload CSS with unnecessary entries, it will make the stylesheet hard to read and slow to load. Some easy steps to avoid this negative behavior include:
Minimize the use of font family fallback. Keep font families to be used in case the first option is not available to 2 or less.
Group tags and classes together wherever it makes sense. Following the rule in “Practicality and Consistency” above, use names according to what they are rather than what they look like is key.
Use CSS Shorthand. Rather than using individual selector groups for an element, write it as one line of code whenever appropriate. Example: margin-top=10px, margin-right=0px, margin-bottom 8px, margin-left=2px can be minimized to one line as margin=10px 0px 8px 2px.
Avoid redundancy by not repeating selector groups when the style information is the same between elements. If both the h1 and h2 elements use black font at 20px, do not write them as separate lines of code; instead use h1, h2, followed by the like styles.
Remove unnecessary line breaks. Anywhere there are carriage returns leaving white space that is not necessary: remove them.
Remove any selectors “{}” that are left behind with no styles associated to them.
Simplify comments to be as basic as possible while still maintaining their explanatory value. Remove any duplicated comments.
CREATE A STRUCTURE TEMPLATE:
Using a structure template is one way to work efficiently. Dependent on needs, create various templates. For example, you may need to create templates for single column to multiple columns. Advise to add commented theme information to the top of each template. Also, include all common generic settings that used with the specific template.
CREATE AND USE A MASTER CSS FILE:
An HTML markup can become very large very quickly. To help keep it less cluttered and fast loading, it is a good practice to have one master CSS file. Import all other CSS files into the master CSS file and enter only the master CSS in HTML.
USE TOOLS TO MINIFY CSS:
Once site is ready to go live, run a CSS through a minifier. Using this tool can reduce the size of CSS by 20% making the page load up to 85% faster. Once a minifier runs, it is much harder to make any changes so make sure to run it only when it is ready to go live and only after you have made a local copy of CSS. Two minifiers you may want to try can be found at cssminifier.com and csscompressor.com.
I hope you get as much out of these tips as I have. Although I knew organized code was important, before watching the CSS Optimization course at Lynda.com, there was some confusion on how to achieve it and just how important it is. I have utilized every one of these tips. The first time cleaning up my code took a while. It was worth it since I ended up with a better understanding of code and a few corrected items I didn’t notice before. Using a master CSS file and templates are still my two favorites suggestions since using these pro-active steps has greatly reduced the amount of time it takes to code.
