How To Create Cleaner and More Efficient Code

by Matt Montaruli on September 1, 2010

How to Create Cleaner and More Efficient Code Post Title ImageAre you tired of having to develop new HTML and CSS files from scratch for every new project?

How about revisiting code you wrote several months ago and not being able to remember any of your intentions?

If you answered yes to either of these questions, keep these buzzwords in mind: Semantic Markup and Modular CSS.

With the growing popularity of HTML5 and CSS3, developers are striving for organized and meaningful code, while also looking to work more efficiently in the process.

Having clean and understandable code is something that every developer strives for. Being able to create efficient, reusable code is a huge bonus.

However, accomplishing both of these goals is often difficult, as cleaner code can sometimes conflict with efficiency, and vice-versa.

Furthermore, it can be troublesome for a web developer to prioritize which lines of code should focus on semantics and which code should focus on efficiency. We’ll point you in the right direction.

Semantic Markup–HTML that has Meaning

Semantic HTML is markup that conveys intention of content, rather than its desired appearance.

For example, think about the tags <b> versus <strong>. By default, both tags have the same style–font-weight:bold. However, <strong> is considered W3C compliant, whereas <b> is not. Why? The answer is semantics.

The tag <b> stands for BOLD–which describes the appearance of the content, rather than its intended meaning.

The tag <strong>, on the other hand, implies distinguished text. Generally, the style for <strong> text is font-weight:bold by default, however this can be changed.

Here, <strong> describes your intention to make the text within the tags stand out, it doesn’t describe how the content should appear.

Why is this important? Firstly, using class names such as “text-pink” defeats the purpose of separating style from structure.

Secondly, the MEANING of your content is becoming more and more important for websites each day. Machines and search engines are getting better and better at reading code, so we want to ensure our HTML is as semantic as possible in order for computers to understand it.

Wikipedia’s article on the Semantic Web summarizes the benefits to this best:

“According to the original vision [of Tim Berners-Lee], the availability of machine-readable metadata would enable automated agents and other software to access the Web more intelligently. The agents would be able to perform tasks automatically and locate related information on behalf of the user.”

Since we don’t have a large selection of tags to convey meaning (ie: <sale-item>), we’d have to resort to using class names (ie: <span class="sale-item">MY WIDGET</span>) to tell machines the intention of the content.

We are already seeing a number of standards and best practices emerge for semantic code. Among them are Microformats and HTML5 (through the use of section and article tags, etc…). The rising popularity of these guidelines help to highlight the growing importance of semantics.

Useful Links:

Semantic markup gives us cleaner, more readable code that will make it easier for future services to scan and comprehend. However, it may also reduce your efficiency as a developer…

Modular CSS–Coding Efficiently

Modular CSS is the practice of reusing styles on various elements on the page without redefining them multiple times in your stylesheet. This is often referred to as Object Oriented CSS (OOCSS).

In practice, you’ll generally have a class name with one or more styles, and every time you wish to reuse those styles, you add that class name to the element.

For example, there are several objects you’d like to float left. Instead of styling float:left for each desired element, you can create one class, “left” that has the style: float:left. Then, add this class name to each component.

The usefulness of Modular CSS becomes apparent when you want to add multiple, often used styles to an object. Pretend you’d like a block of text to be colored blue, floated left and in small-caps. Also pretend these three separate styles are all effects you’ll want to reuse on your site for a variety of different sections. You create separate class names for each. You might code each element like this:

<span class="blue left small-caps">text here</span>

(I am using simplified class names for presentational purposes, I do not recommend actually using class names like this)

Now, since you are using these three styles so often, you can add any combination of these to sections of your site just by adding the class name instead of styling each object every time.

Since you won’t have to redefine common styles over and over again, you CSS files will be smaller and faster-loading.

More importantly, using Modular CSS will make you more efficient as a developer. This technique allows you to develop a set of CSS styles that you can reuse on multiple projects and can function as a mini-CSS framework.

Useful Links:

This can greatly speed up your development, however it can cause quite a few conflicts with semantic coding…

Why Semantic Markup and Modular CSS Conflict

The practice of Modular CSS may conflict with semantic coding because there are often many generic and common styles, which would have no semantic class name. Take our float:left example: the class name “left” really doesn’t describe intention, it only describes the appearance of the target object.

You may wish to add the “left” class to multiple elements in order to float them left, but since float:left is a commonly used style, these elements will usually have very diverse intentions. Because of this, no single, semantic class name would fit.

In cases like these, you’d be forced to choose: be semantic and reuse less of your styles, or be efficient, reuse your existing styles but risk being less semantic.

Get the Best of Both Worlds

While you’ll never have perfectly modular and semantic code, you can make an effort to ensure your Modular CSS is as semantic as possible and only uses non-semantic class names when absolutely necessary.

Pretend you have the following styles:

.one-column {width:12%;}.two-column {width:26%;}.three-column {width:40%;}.four-column {width:54%;}.five-column {width:68%;}.six-column {width:82%;}

These styles would be common to use for grid layouts. They do fit the description for Modular CSS, since they are styles that will be reused, however the class names aren’t semantic. Furthermore, since these styles are pretty generic and broadly used across your site, there wouldn’t be a good semantic class name to use instead.

However, these styles are vital to a grid layout, so you’ll need to compromise: I would suggest abbreviating the class names as much as possible (ie: instead of “one-column”, use “c1”). While you wouldn’t be solving the non-semantic nature of these class names, they also wouldn’t be very appearance-descriptive, either.

For less vital modular styles, I’d suggest one of two options. Firstly, these less-important styles can often be renamed with more semantic class names without facing the float:left or column issue described above. For example, lets say you have the following style:

.blue {color:blue;}

There must be a specific reason you want this text to stand out. In this case, you can rename the class name to something like “sub-heading” or “description” or anything that would explain WHY the content is being differentiated.

Your second option for making modular styles more semantic is to sacrifice some modularity. Pretend you have the following styles, which you add to your different headings and maybe several other elements on your site:

.margin-small{margin:5px;}.margin-medium{margin:7px;}.margin-large{margin:9px;}

We at 26Twelve are currently using separate, modular margin styles such as this on our main site, and we have learned that adding these styles directly to our other element styles will not drastically increase the size of our CSS file.

Furthermore, the difference between these three styles are very, very small–your viewers will most likely not even be able to notice a difference between the three. I’d suggest combining these three styles into one:

h1, h2, h3, h4, h5, h6, .someClass1, .someClass2 {margin:7px;}

In short, for those generic, often used modular styles where no semantic class names would fit, use abbreviated class names–they’re good shorthand for commonly used class names, while they also won’t seem blatantly appearance-descriptive. The remaining class names for modular styles should either be renamed to be semantic, or they should be condensed with similar styles, then applied to the appropriate elements as semi-modular CSS.

Have any thoughts about semantic markup versus modular CSS? Have any additional tips for ensuring your Modular CSS allows for semantic class names? Comment below!