Hi Guys, I thought I should share whatever I have learned in the past about CSS optimization, Some of them are really what we do everyday and are not aware that If thats what you need. Let me go through the list I've compiled over all these years working with CSS. This may not be the complete post because there are far too many things that I may have covered by I will share some obvious ones. So let get started. Using * vs ID Consider this When we use * in defining CSS styles that for me is the slowest one. use IDs wherever possible. Browsers render selectors Right to Left Consider this Now that we know that we are using an ID as in #myDiv and we are in wrong frame of mind that browser will definitely find #myDiv very easily and quickly, But you got to understand that browser reads from right to left, thus the first thing in the above CSS style definition they will be searching for span tags and then its parent with ID myDiv. Thus this in itself is not really a good declaration. External Stylesheet file and Style tag in Head I will always put my styles in the head tag of my HTML file. When putting the CSS the page render progressively. This for me has couple of advantages. Styles gets downloaded in progressive manner You will eliminate flash of page load without styles. I would recommend combining all external CSS into one CSS file and moving on page styles to a external CSS file. Descendant selectors They are bad. Consider this This stuff is overly expensive. I always avoid these type of declarations. Many CSS pundits won't recommend it especially when you are trying to form a tree with tags. Using @import @import is there for use but its not so efficient after all. What happens when you use @import is that it adds one more round trip, thus increasing the total download time. Browsers are improving and poor old IE is trying to catch up, but with IE page download seems to be a bit slower that other browsers. I … [Read more...]