When Is Enough CSS Enough?

One of the major pushes in web development today is to try to do as much of the styling of a website as is possible from within the CSS of the site. The idea behind this is that when you do so, you remove styling responsibilities from your JavaScript and HTML content, resulting in a much better separation of concerns. The other aspect of this is that CSS styling is typically handled in a more native fashion in the browser as compared to what you can accomplish via Javascript.

This idea is one that has many merits and very few detractors. However, I believe there is at least one wrong way to handle this. As an example, Internet Explorer 9 and before has a limit on the number of CSS selectors that it can apply per stylesheet of 4095. After that, any CSS that appears in the stylesheet is completely ignored by the browser. While this seems like a lot, I know of quite a few sites that have had to specificaly split single stylesheets into multiples to simply get around this limitation.

Recently, I was tasked with taking a website that had been abandoned in mid-development and preparing it for launch as fast as possible. Once I had the basic functionality tested and working properly, I started looking into the details of the styling of the frontend of the site. When I found the main CSS file, I quickly scrolled to the bottom of the file to see how big it was, and was completely shocked. This single CSS file was over 13,000 lines of CSS. Amazingly, this was only one of the several CSS files that were compbined into a single piece of CSS that is delivered to the browser.

Once all of the CSS files have been combined, they nearly reach half a megabyte in size, more than 50 times the HTML payload of the homepage of the site. You might think that some of the space is taken up by some data-uri images, but there are no data-uri resources in that giant CSS file.

Any time your global CSS file is 50x the size of your HTML, you are doing things very wrong.

Tags:

Related Posts

Mar 2, 2015
2 minutes

Stop Wanting and Start Choosing

I am used to hearing people use phrases like “I want to be able to do X thing” or “I want to have X position at my company” when people are talking in generalities about their goals. I tend to do it often as well, especially when using “self-talk” to attempt to work on internal goals and desires. However, when reading a book from Paul Tough, How Children Succeed, one of the quotes that he references from Jonathan Rowson, a Scottish chess grand master who had written about the importance of emotion and psychology in chess success.

#rant #web-development #book-reviews
Read More
Jul 7, 2014
2 minutes

AddThis Can Cause Your Site To Not Load

Over the last few days, I have run across quite a few websites that seem to never finish loading. After waiting for 20 seconds or more, I give up, realizing that whatever content was on the site wasn’t worth it anymore for me to stare at a blank white browser until it loaded however much longer. Unfortunately for those websites, they are losing traffic that they will never get back.

#responsive-web-design #javascript #performance
Read More
Jan 8, 2015
3 minutes

Write Bulletproof JavaScript

While display issues have long been the bane of a web developer’s existence, current web development projects tend to have much more client side interactivity, focusing ever more attention on the reliability and resilience of the JavaScript you write to deliver the complete interactive experience. Many things can cause unexpected errors in your carefully crafted code.

However, there are a few things that you can do to make sure that your site degrades gracefully and still provides a basic level of functionality when something in the browser goes wrong. The following snippet of code illustrates a few best-practices for defining your JavaScript namespaced modules.

#jquery #javascript #web-development
Read More