CSS Frameworks and Semantic Class Names

Share this article

A bulldozer pushing the letters C S S
One of the most common complaints about CSS frameworks like Blueprint, YUI Grids, and 960.gs is that they require designers to dirty their fingers by adding presentational class names to their HTML documents, like so:
<div class="span-9 last">
<div class="grid_6 alpha">
Class names like "span-9" really bother designers who care about the quality of their HTML code, because they describe the appearance of an element; this should really be left to the CSS properties defined in your site’s style sheets. The problem with presentational class names is explained especially well by the W3C QA tip, Use class with semantics in mind:
Good names don’t change. Think about why you want something to look a certain way, and not really about how it should look. Looks can always change, but the reasons for giving something a look stay the same.
Maybe you’re the pragmatic type who takes no issue with this sort of thing, or decides that it’s a necessary evil given the limitations of the CSS language. Nevertheless, there are plenty of front-end ninjas out there who refuse to use CSS frameworks for this very reason. It turns out, however, that the latest crop of CSS frameworks provide clever solutions to the problem of presentational class names. Blueprint CSS, the granddaddy of CSS layout frameworks, now includes a clever Ruby script called compress.rb in its download package. In Blueprint’s compress.rb: A Walkthrough, Blueprint author Joshua Clayton explains how to use the script to generate a custom version of the Blueprint style sheets using your own semantic class names. The process boils down to writing a simple configuration file that tells the script how to map Blueprint’s presentational class names to your own semantically meaningful class names. The file will look like this:
demo:
  path: /Users/kyank/Documents/myproject
  semantic_classes:
    ".header, .footer": ".span-24, div.span-24"
    ".content": ".span-18, div.span-18"
    ".sidebar": ".span-6, div.span-6,
                 .last, div.last"
The semantic_classes section provides the mapping. In this example, the header and footer classes will be 24 grid units wide and the content class will be 18 grid units wide. The sidebar class will be 6 grid units wide and the last block in its row. With this configuration file written, you simply run the compress.rb script, and the customized version of the Blueprint style sheet files (screen.css, print.css, and ie.css) will be generated in the specified path. The style sheet will contain rules like this one, that apply the grid dimensions to your custom class names:
/* semantic class names */
.content {float:left;margin-right:10px;
  width:710px;}
… and just like that, you gain all the layout facilities of Blueprint CSS with none of the HTML cruft! If manually compiling your style sheets with a Ruby script sounds like a bit of a pain (which it can be — especially if you develop on a Windows computer without Ruby installed), a server-side CSS framework might be a better option for you. CSS frameworks are popping up for all the major server-side programming languages. Two prominent examples include Compass (for Ruby), and Scaffold (for PHP). These frameworks let you write your style sheets with extra language features, and automatically compile them to standard CSS code when sending them to the browser. Using Scaffold, for example, you could write your style sheet like this:
@grid {
  column-width:30;
  column-count:24;
  right-gutter-width:20;
  baseline:20;
  unit:px;
}
.header, .footer {
  +columns(24);
}
.content {
  +columns(18);
}
.sidebar {
  +columns(6);
  +last;
}
The @grid at-rule sets up the options for Scaffold’s layout plugin, and then lines like +columns(24); (called mixins) are compiled into standard CSS properties when the browser requests the style sheet. These are just a couple of the ways that the latest CSS frameworks respond to those critics who complain about having to sacrifice HTML code quality to use them. Now you can have all the benefits of a well-tested layout framework, and apply them to your HTML code on your terms.

(photo: Nbauer)

Frequently Asked Questions on CSS Frameworks and Semantic Class Names

What is the importance of semantic class names in CSS frameworks?

Semantic class names in CSS frameworks are crucial because they provide a clear understanding of the function of the HTML elements they are associated with. They make the code more readable and maintainable, which is especially important in large projects. Semantic class names also improve accessibility, as assistive technologies can better interpret the content.

How do I choose the right CSS framework for my project?

Choosing the right CSS framework depends on several factors. These include the size and complexity of your project, your familiarity with the framework, the community support, and the documentation available. It’s also important to consider the specific features you need, such as responsiveness, customization options, and pre-designed components.

What are the benefits of using a CSS framework?

CSS frameworks offer several benefits. They provide a structured and standardized approach to styling, which can speed up development time. They also come with pre-designed components, which can ensure consistency across your project. Additionally, most frameworks are responsive, meaning they automatically adjust the layout based on the screen size.

How can I make my CSS code more maintainable?

To make your CSS code more maintainable, use semantic class names that describe the function of the elements they are associated with. Also, organize your code in a logical way, such as grouping related styles together. Commenting your code can also be helpful, especially in large projects.

What is the difference between semantic and non-semantic class names?

Semantic class names describe the function or meaning of the elements they are associated with, such as .button or .menu. Non-semantic class names, on the other hand, describe the appearance of elements, such as .red or .big. While non-semantic class names can be easier to write, they can make the code less readable and maintainable.

How does semantic CSS improve accessibility?

Semantic CSS improves accessibility by providing more information to assistive technologies. For example, a screen reader can interpret a .button class as a clickable element, while a .red class would not provide any meaningful information.

Can I use multiple CSS frameworks in a single project?

While it’s technically possible to use multiple CSS frameworks in a single project, it’s generally not recommended. This is because different frameworks may have conflicting styles and conventions, which can lead to unexpected results and make the code harder to maintain.

What are some popular CSS frameworks?

Some popular CSS frameworks include Bootstrap, Foundation, Bulma, and Semantic UI. Each of these frameworks has its own strengths and weaknesses, so it’s important to choose the one that best fits your project’s needs.

How can I customize a CSS framework to fit my project’s needs?

Most CSS frameworks allow for customization. This can be done by overriding the default styles with your own, or by using the framework’s built-in customization options, if available. Some frameworks also offer Sass or Less versions, which allow for more advanced customization.

What are some best practices for using CSS frameworks?

Some best practices for using CSS frameworks include understanding the framework’s conventions and structure, using semantic class names, organizing your code in a logical way, and customizing the framework to fit your project’s needs. It’s also important to keep your code DRY (Don’t Repeat Yourself) to avoid unnecessary repetition and complexity.

Kevin YankKevin Yank
View Author

Kevin Yank is an accomplished web developer, speaker, trainer and author of Build Your Own Database Driven Website Using PHP & MySQL and Co-Author of Simply JavaScript and Everything You Know About CSS is Wrong! Kevin loves to share his wealth of knowledge and it didn't stop at books, he's also the course instructor to 3 online courses in web development. Currently Kevin is the Director of Front End Engineering at Culture Amp.

Share this article
Read Next
Get the freshest news and resources for developers, designers and digital creators in your inbox each week
Loading form