Back in 2010 Nicole Sullivan made a talk on the top 5 massive CSS mistakes. Her talk was based on her experiences involved in optimizing the massive amounts of CSS found in Facebook. Even though the talk dates back 4 years ago, and since then technology has evolved and we are now with a HTML5 CSS3 era, most of the concepts explained are still fruitful as I feel, since they speak of the rudimentary concepts of CSS styling.
Since we ourselves rare get a chance to work with a massive CSS project as Facebook involving many reusable css structures and variations of them, its highly doubtful that we spent our thoughts on these details. The goal of this post is to summarize and extract out the key areas discussed during the talk.
During her talk Nicole explains that during the maintenance of Facebook people tend to forget the existence of current styles. Therefore proper page planning is lost.
She emphasizes on the importance of breaking down the page into granular entities and understanding repeatable styles. The importance of identifying patterns of styles and identifying places that could be repeated is explained well in the talk.
2. Stale Rules
Next she speaks of rules that are never been used in pages, and explains that there are two rules of such.
- Rules that are not used at all.
- Rules that get applied on a subsequent page or on user actions.
Addons like Dust-Me-Selectors can be used to analyze and track such stale rules.
Unpredictability involves having the same element (headings) differ in styling according to the place where it is placed in the page. The simple explanation is that the behavior of the same reusable components should not differ based on the location it appears on the page.
This was one of the most interesting and important facts I learnt from the talk. Specificity involves in CSS rule overriding and how all rules converge into styling and element. The general behavior in CSS is that it inherits rules from its parent in places the rules are not found. Even though this sounds simple specificity can be messed up by using ID selectors and class selector, and by mixing up selectors. This leads to hard to track and spaghetti CSS style inheritance. People override styles just to make things simple for them, but this causes duplication and the styling rules end up in multiple places in maybe multiple CSS files to make things worse!
Specificity is complex as it sounds when it comes to IE hacks and other rules designers use to negate specific styles out of IE and other browsers.
Duplication involves in everyone resetting margins, resetting padding, e.t.c and everyone performing the general stuff in styling over and over again since a proper styling plan is not done at the start. She encourages developers to use CSS reset files such as to deal with the inconsistencies of browser styling.
Here is a quick reference to the entire talk.