1. Group selectors that share same property values. This will not only decrease the size of your stylesheets, but will make them more maintainable as well.
2. Use shorthand properties, instead of separately defining each property for font, margin, padding, border, background, etc:
element
{ font-size: 11px; font-weight: normal; font-style: italic; font-family: Arial, Verdana, Sans-serif; line-height: 22px;
}… Is the same as:
element
{ font: normal italic 11px/22px Arial, Verdana, Sans-serif;
}3. Don’t apply property values that are native to the element, for example:
h1
{ font-weight: bold;
}4. Use CSS sprites to reduce the number of server requests.
5. If you are using CSS reset, it is needless to reset border, margin or padding on elements that do not have such by default, for example:
div, span
{ padding: 0; margin: 0;
}6. Learn CSS specificity and make full use of it. Writing CSS with cascade in mind will both reduce your stylesheets and markup.
7. Crunch your stylesheets on the server or manually. This can decrease their size up to 30-40% or even more depending on how the original stylesheet has been organized.
8. Arguable: Remove the semi-column at the end of the last property value of the selector. This does not have negative implications on any browser, but spoils the normal flow of the code.
9. Arguable: Do not use single or double quotes when specifying URLs for background, @import or @font-face. According to some, using quotes for specifying URLs may trigger issues with IE.
10. If your website utilizes a couple of stylesheets, merge them before sending to the client in order to reduce server requests. If you cannot merge them, deploy them on the page with a single .css file that registers the rest of stylesheets via the @import url directive.
11. If a property value is 0 you do not need to specify unit, as null is null in any language and measurement system:
padding: 0; is the same as padding: 0px;
12. Optimize hex color values when possible, for example:
#000 is the same as #000000 #369 is the same as #336699 red is the same as #ff0000
… But also have in mind that:
#cf is not the same as #cfcfcf
13. Do not use element types for class and ID selectors, for example:
div#mydiv is the same as #mydiv div.myclass is the same as .myclass
14. Do not redeclare inherited values.
15. Use descendant selectors rather than specifying classes for the children.
16. Combine property values, for example:
element
{ padding: 10px 10px 10px 10px; /* top right bottom left */
}… Is the same as:
element
{ padding: 10px;
}If horizontal and vertical values differ, like:
element
{ padding: 4px 8px 4px 8px;
}… You can couple them like that:
element
{ padding: 4px 8px; /* top|bottom - left|right */
}If left and right values are the same, but top and bottom differ:
element
{ padding: 4px 6px 8px 6px;
}… You can optimize the selector even further like:
element
{ 4px 6px 8px; /* top left|right bottom */
}17. Don’t use images for elements that can be styled with pure CSS.
18. If you comment your code, keep comments short and up to the point. Don’t comment what is obvious.
19. If an element (such as <td /> or <option />) normally resides in the context of certain parent (such as <table /> or <select />) you can save a couple of bytes if you change your selector from:
table tr td
{
/* properties */
}… To simply:
td
{
/* properties */
}12. Do not evaluate JavaScript expressions in CSS a lá IE style, e.g:
element
{
width: expression(document.documentElement.offsetWith > 600 ? "600px" : "auto" ); /* This may stall or even crash the browser. */
}13. Create your own CSS reset and add only elements that you are actually using on the website instead of all possible tags.
14. If you don’t care about IE6, use the CSS3 attribute selectors, for example:
input[type="text"]
{
color: green;
}
input[type="password"]
{
color: red;
}15. Always register external stylesheets or add the <style /> tag in the <head /> section of the page.
16. Avoid using inline styles.
17. If you have version-specific styles for IE, use conditional comments to load these as external stylesheets instead of using CSS hacks.
18. Refrain from using the Microsoft proprietary CSS filters unless this is really needed. These are tightly connected with Direct X and users with older machines, OS or video cards may have serious problems when viewing pages with IE.
© 2006 - 2023 Martin Ivanov