5 Tips to Optimize the %!## Out of Your CSS


css optimization vector imageGone are the days when a design experts and industry-leading web hosts recommended a webpage not exceed 30KB max. Back then, this value was expected to handle HTML, JavaScript, images, CSS and Flash. It does not take much to completely exceed 30KB. As JavaScript and CSS gained popularity, it became common for CSS alone to exceed the 30KB ceiling. This is especially true for larger websites.

However, you do not want to just create pages and not pay attention to the KB count. It is important to keep your pages optimized and tight when writing your CSS. Optimization is not just making the sizes of your files smaller. It also helps to ensure your webpages are as clutter-free, organized and efficient as possible. As you learn more about optimal CSS practices, you will find that you automatically create smaller file sizes.

Use Shorthand

Writing in shorthand has become a very common practice. This is by far the simplest way to reduce your code and how long it takes you to code. If you are not doing this yet, there is no time like the present.

css font property

There are a multitude of elements that you can use shorthand for, but the most common include:

  • Margin
  • Padding
  • Font
  • Outline
  • Border
  • Background
  • List-style

shorthand config valuesYou can also combine values using shorthand. By specifying different values, the browser will essentially use a specified manner to interpret the rules. This will appear as the following:

Using any shorthand will make your overall code far more succinct. You are saving both characters and lines. If you use shorthand in every area possible, this can dramatically reduce the overall file size.

Get Rid of the Hacks

ie css rule

To serve IE-specific CSS rules, using conditional hacks gives you the benefit of serving a smaller and cleaner default CSS file. It helps with the browsers that are more standards-compliant. However, the additional page weight will only be downloaded by the browsers that require it.

If you must use a hack, it is imperative that the code you use is specific to the version of Internet Explorer you are focused on. There are numerous pre-written codes that serve as hacks if you do not want to write your own. Just take the time to really look at the pre-written code and ensure that it is accurate or else this could result in even more problems.

Now, if you can use CSS to get the results that you desire, do this without any hacks. Of course, this is dependent on all other things being equal. Your overall code will be far lighter and simpler when you use fewer hacks on your site.

Be Smart About Using Whitespace

For your CSS code, whitespace is imperative for readability. Whitespace includes elements, such as tabs, spaces and extra line breaks. Every bit of whitespace that you are able to eliminate is similar to eliminating a character.

remove empty linesHowever, it is often not recommended to skimp on whitespace for the sake of a smaller file. You still need to maintain optimal readability on your webpages. Whitespace is important for formatting, so you want to find a balance. If you write in large blocks to text to eliminate some whitespace, the short attention span of readers of the internet will make them click away.

One way to provide both a smaller file size and readability is to ditch tabs and only put a single line in between paragraphs. This provides sufficient whitespace from a readability standpoint, but it also eliminates some of that whitespace that is not necessary.

Now, for your CSS file’s production version, you can remove the whitespace. It will still be present in your working file. This is another way to compromise so that you have both smaller files and readable formatting.

Prune Resets and Frameworks

When you are using a CSS framework, it is imperative that you review the documentation. It is equally important to look at every single line that is within your CSS file. There are times when you will discover that there are some rules in the framework that you do not want for your current project. These can be removed.

removed unused css rules

You might find that you can achieve presentational detail in a more concise and elegant way. This might not be what you typically use, but if it works, this can allow for cleaner framework. When you know about them, this also helps you to avoid unintentional duplicating of rule sets.

The same information also applies to resets. When you use resets, they aid in neutralizing the default style of a browser. Now, if you are familiar with the website that you are creating, it is not uncommon to find certain declarations that you know that you are not going to need. For example, on a general blog, you will likely not use them. Just get rid of whatever you do not need for the specific site you are building. You can ensure better optimized work when you use a set of rules regarding a reset or framework. However, in their default state, they should not be accepted. To keep your CSS files readable and lean, look at every declaration individually and cut back on the ones that are unnecessary.

Future-Proof Your CSS

Css syntaxAnother optimization option that you can consider is separating the majority of your rules from your layout-specific declarations. Assign your layout to its own individual file if this is possible. If not, at least giving it its own section can be beneficial.

Ultimately, the positioning and floats, which are the current methods using CSS, were not meant to serve as layout tools. Some go as far as to say that these are actually similar to layout hacks. There is not a viable alternative at this time and the hope is that once agreed upon layout standards occur, they start to get support from browsers. Once this support happens, it should not be very difficult to swap out the box-model properties that are hacked up for those intended for layouts.

Right now, the best choice is to handle your layout using the right properties. This will usually condense page weight more effectively than using the limited set of properties currently available to compensate for quirks.

Always Keep Updated Documentation Regarding Your Work

Whether you are working on a website as a team or alone, it is imperative to keep track of everything that you have done. For example, alone, you may forget something you have done. As a team, someone may do something, and you may not be aware until you make changes that can cause issues with various elements of the code.

adding css commentDuplication is also an area of concern for both teams and individual designers and those using  website builders. Using style sheet guides and markup guides are viable documentation choices. You can also use CSS comments is another option and this can be beneficial for sectioning off the elements of CSS files that are long. Putting these in the style or markup guide, prevents them from adding the file size.

One of the fastest ways to bloat code is by doing the same work twice. Coding is complex, so it is imperative to keep accurate documentation of everything that you have done. If you are working alone, it is ideal to review this documentation every time you sit down to start working. Those working as a team should have a community style or markup guide that everyone can access at any time.

Utilize Compression

One effective way to optimize CSS is by using compression. This is a way to ensure that your files are browser-friendly even though that are unreadable by humans. Compared to the working copies, these will be a fraction of the size. There are different applications that you can take advantage of to make the compression process easier. These will perform tasks, such as finding and fixing any CSS properties that are overwriting one another, compressing white space and looking for chances to use CSS shorthand.

In addition to the convenience of these applications, they can also help you to learn more about the tasks that you can do by hand if you prefer. You can also use various text editors to help format your CSS files. They can serve zip versions of the various CSS files you have. This is typically done using PHP. If you want to use optimizing and compressing tools, make sure to review multiple options before choosing the right one for you.

Now, these applications are generally good at minimizing errors, but they are not perfect. Because of this, you should always review your CSS after using an application to ensure accuracy. Code that is optimized and clean is critical for file size, but also for readability and maintenance. The principles discussed here are solid considerations for CSS, but also for JavaScript, HTML and other programming languages. Compared to the rendering of your website, CSS files are not as prominent to the end-user. However, the principles discussed here help with both the develop experience and the user experience.

You May Also Like: