Developing Efficient, Streamlined CSS

CSS can be compared to a sculptor’s tool set; like sculptors at work, we designers use CSS to create structured layouts of websites.

Over the years, this process has become more organized; rules have been put in place to create best practices of coding.

In this article, we’ll take a look at some ideas you can use when writing style sheets to speed up your code.

Efficient CSS is easy to manage and easy to read and can be a resource for web designers. Getting organized is a big step, but using CSS can be a little more complicated than that.

As you read this article, keep your own preferences in mind; the best advice you can get from any developer is to find your own way of working. Combine a few of the techniques here with your own methods to get the most benefit.

Why Bother Streamlining CSS?

Many designers confuse front-end and back-end languages when talking about parsing code. CSS and HTML are front-end design languages used to format and style elements on a website. Files are downloaded and parsed by the visitor’s browser, which means that front-end code has a substantial loading time.

Code downloaded and parsed by the browser takes time to be read and computed, just like code written in back-end languages (such as PHP or Ruby). Streamlined CSS can greatly benefit a website because it can shorten loading times and speed up page-element structuring.

The benefits may not be obvious with today’s high-speed connections and advanced operating systems. You may want to look at your website on a mobile browser to compare load times and see how the website loads.

When CSS is coded efficiently, you should see the form and style of website elements as they are being processed. This can look different from browser to browser, but it still happens. The more you test your website’s code, the more you’ll see it.

Keep your code standardized and simple. If you’re updating your blog or personal website a few months after initial development, churning through CSS styles that you’re familiar with is easier than dealing with new ones. Adapting to established standards helps in the long run.

How to Work With Efficient Code

To begin coding styles with utmost efficiency, you’ll have to adopt some new ideas. These are basic CSS techniques being used today by top-notch Internet websites and app developers.

Keep Your Code Simple

This can be easily overlooked. When mapping out a set of data for your styles, keep it simple. Create data sets in a column stack if you need to.

Start by creating a list of different sections to work on in your styles. You can include text, forms, layout boxes, headers, footers and anything else you might need. To really get organized, you can break it down into a few known styles, such as an id or class for navigation links.

This first step helps create a blueprint for your website using plain words, before you get into any style language. Afterwards, sitting down to write code will be much simpler; having the resource list in front of you will help you pour out code at an almost superhuman rate.

Keep Blocks of Code Delineated and Sparse

There is an ongoing debate about how CSS code should be written. When I first started, I used block notation because it was all I had ever seen. But single-line notation is much faster when it comes to parsing text and making it legible.

I’m not making a case for ignoring block-style CSS-far from it. When you’re dealing with an important element or id that holds six or seven major properties, keeping it in blocked form will be easier. You’ll be isolating the important parts of your style, making them easier to find at a glance.

Reading long styles in block notation is also easier because most text editors wrap long lines, and reading property-value pairs can get confusing when you’ve got 10 or more to go through. Being the web designer, you have to make the call on how to space out the CSS code. Keep efficiency in mind, and use your best judgment.

Working with other Developers

If you’re a professional web designer or aspire to be one, chances are you’ll work with a team sooner or later. This can be a blessing or a curse, depending on the team.

Designers are often reluctant to make major changes to their work. CSS code is a bit different because you’re trying to create a beautiful layout using only property values, and files can get messy when passed between a few hands. So, stay organized.

Comments are a major help. If lines or blocks of code might confuse or mislead others, comments will save hours. Explain everything you put into the style sheet as elegantly as possible.

Make sure no duplicate or appended styles are overwritten. Imagine that the h1 to h4 headings are styled high up in a CSS document, but then some code lower down changes their fonts. This could be immensely confusing for someone who didn’t write the code and now has to go through and fix the bug.

Communication is also critical. You could write the most efficient code around, but a lack of communication will doom your team. Focus on the task at hand, and work with the creative ideas produced collectively by the team (not just your own).

Keep Track of Separate CSS Documents

Another way to keep code clean and organized is to keep style types separate. This works well for large websites on which holding all the styles in a single document would be unrealistic.

Facebook is a good example. It likely has many different styles for all its various pages: profile, search, registration, photos, etc. If the styles were all consolidated in one file, I wouldn’t want to be the guy who has to sort through the code just to fix a simple bug.

Facebook gets a lot more traffic than your website, but the principles are the same. If organization is a concern, separate style sheets can go a long way. Web designers often organize code based on the aspect of the document that it structures (e.g. layout.css, text.css, forms.css).

Not all styles need to be loaded on every page. And here lies the benefit: the method allows for greater customization when building your website. You’ll cut down on parsing time tremendously just by creating separate views and styles.

Testing Support for IE

Web developers have always painted Internet Explorer as the villain, especially with CSS. Luckily, you can apply conditional comments (which look like regular comments to most browsers) to the HTML.

You can use these to apply styles in Internet Explorer. Check out conditional comments if you’re not familiar with them; they can prove invaluable when CSS properties don’t work right and you need an alternative.

With the release of Internet Explorer 9 Beta, we’re getting a bit closer to a unified Internet experience. The only problem is the number of people who are still running browsers as old as IE6 and IE7, which have serious processing bugs (due to flawed rendering engines) and sometimes require external styles. Thankfully, support has improved, and Microsoft seems to be turning things around.

Adding a Table of Contents

This step is optional, but I find it works wonders for my style sheets. You can store the table outside of the CSS document itself, but I have found this to be somewhat counterproductive-especially because adding comments inline is so easy.

The main reasons to put a table of contents in your styles are that it facilitates access and streamlines the editing process. Put markers at the beginning of your document to separate the code into logical divisions.

Creating your own keys is a good approach. For example, if you plan to split your table according to the main areas of the document (layout, font, header, navigation, etc.), you could key the sections with unique characters.

You could use =!layout and =!font to delineate the layout and font sections, respectively. You probably won’t run into those exact sequences of characters anywhere in the code, so adding them to both your table and the beginning of each comments section should be safe. Then, use the search function in your text editor to skip down to the section you want.

This is also a good strategy for projects in which many people will be looking at the code. It keeps everything organized and accessible.

There are many ways to optimize code and make it more efficient, and these tips are a great start. CSS is evolving, and a lot of new ideas about it are being built up.

You need passion and dedication to make it in the design industry. If you can hold on to your passion for digital design, then keeping up with CSS best practices shouldn’t be difficult. Reaching out to others in this huge global community of web designers can be a great help; industry experts are usually happy to share their techniques and innovations.

This post was written exclusively for Webdesigner Depot by Jake Rocheleau, a passionate web designer and social media enthusiast. Jake loves reading and writing about the latest digital and Internet trends and networking with the design community. To hear more about his work, find him on Twitter @jakerocheleau.

What are your methods for streamlining CSS? Any suggestions for newbie CSS developers? What new features or additional support would you like to see in future iterations of CSS?

WDD Staff

WDD staff are proud to be able to bring you this daily blog about web design and development. If there's something you think we should be talking about let us know @DesignerDepot.