The front-end web design model has been around long enough that different schools of thought, and even some controversies have emerged about its direction, and the way we code our CSS and HTML today.

With respect to CSS, we are starting to see a separation of code where the content styles are being split from the look-and-feel styles, and possibly constituting a shift in the way we plan our development for front-end web design. The base architecture is taking on a new character in which CSS style properties are not repeated throughout the stylesheet, but coded once and done. Buzz words and phrases include HTML Semantics, class naming patterns, Object Oriented CSS (OOCSS), BEM system approach, CSS Lint, Scalable and Modular Architecture for CSS, and more.

This post will attempt to highlight several emerging concepts from the recent movement to front-end web design architecture from some of the people who are working on them.

HTML5 Boilerplate, Pure CSS, and HTML Semantics

Nicholas Gallagher is the Front-End Engineer at Twitter, who also spends his free time devoted to open-source software such as Normalize.css, which makes browsers render all elements more consistently and in line with modern standards. He similarly spends time on development with HTML5 Boilerplate, the popular front-end template for building websites using the HTML5 standard template, which I highlighted in this blog several months ago.

Nicholas also runs experiments of sorts in his “Laboratory,” where you can view a number of demos and projects he has worked on. He runs experiments on things like CSS SUIT Utilities, CSS3 Social Sign-in Buttons, and Pure CSS social media icons, which use simple, semantic HTML with no empty elements, no unnecessary extra elements, no JavaScript and no images. Figure B shows an example.

You have to view the underlying CSS for this demo to appreciate the work that Gallagher has put into his efforts; you will see that all the social media icons displayed above are created from pure CSS and CSS3 properties only, not one image or a single line of JavaScript or jQuery is used in the creation and display of these icons.

His more recent and thought provoking post titled, “About HTML semantics and front-end architecture,” raises the topic of not only HTML semantics, but components of HTML and CSS, approaches to class naming patterns, and HTTP compression. He also delves into the realm of content-independent class names, reusable and combinable components, which are scalable for both HTML and CSS, and structured class names and naming patterns. He provides examples to illustrate his ideas.

SMACCS

Web developer Jonathan Snook, has written a book about a design process he calls SMACCS, which is pronounced “smacks”, and better known as Scalable and Modular Architecture for CSS: A flexible guide to developing sites small and large. The book is available online and in several eBook formats for purchase; the CAD eBook is available for $15 as of this printing.

SMACCS is more of a guideline than an actual framework — it has no library of code to download or install; rather, it is a design process, allowing you to fit a more flexible development into your existing websites.

The SMACCS process is organized such that you can pick and choose which parts you want to implement. Sections include the core concepts of categorizing CSS rules, base rules, layout rules, module rules, state rules, theme rules, and change state.

SMACSS also addresses topics such as depth of applicability, selector performance, HTML5 and SMACSS, and prototyping. These and many more topics are covered in the boo, which includes an appendix of formatting code and additional resources.

OOCSS

Nicole Sullivan, a web developer and performance engineer at Yahoo has created Object-Oriented CSS (OOCSS), which she defines as “a way of writing scalable, sane, maintainable CSS,” not a framework, so much as a “new language.” According to the FAQ from the OOCSS wiki, CSS objects consist of four things:

    1. HTML, which consists of one or more nodes of the DOM,
    2. CSS declarations about the styles for the nodes which start with a class name for the wrapper node,
    3. Components such as background images and sprites for display, and
    4. JavaScript behaviors, listeners, or methods which are associated with the object.

      If you are confused now, don’t worry; as stated in the FAQ each CSS class is not necessarily considered an object in its own right, but can become a property of a wrapper class. The exercises provided at oocss.org include:

      • Starting Template
      • Exercise 1: Template
      • Exercise 2: Grids
      • Exercise 3: Module Manipulation
      • Exercise 4: Module Creation.

      Start with the first two exercises, which can be completed in Firebug, and then you can download the finished file at the beginning of exercise three.

      Nicole also gave a presentation titled, “Our Best Practices Are Killing Us“, which is available for viewing on Slideshare. She focuses on making a better way to write CSS, and explains how messy CSS can be a direct result of our worst best-practices. She also points out the need to reexamine the assumptions about best practices and keep our eye on the practicality, scalability, accessibility, standards, and design. The presentation points out examples of CSS duplication across many popular sites such as Facebook, Salesforce, w3c, and the Alexa Top 1000 sites, for example.

      The time to act is now, for any website to grow and evolve efficiently many of the tried and true assumptions and base architecture need to take into account future proofing strategies that will ensure a scalable, standard, accessible, practical, and sensible approach to web design.