UI prototyping and CSS methodologies

At Cloud 66 we're a small agile team, we design in the browser and move quickly from rough sketches to UI code. We don't get everything right first time but we iterate fast and ship features so we can get feedback and improve the product.

This approach has served us well however over time it can lead to significant technical debt, particularly when it comes to managing <abbr title="Cascading Style Sheets">CSS</abbr>.

• Difficult to refactor — Code for old UI components is hard to identify and remove, leading to degraded performance.

<li><p><strong>Leaky abstractions</strong> &mdash; Tight coupling and entanglement between components ultimately results in a brittle code base with unpredictable results in design and layout.</p></li>

<li><p><strong>Lack of isolation of responsibilities</strong> &mdash; leading to bloat and over complexity.</p></li>

Writing scalable CSS in a rapid prototyping environment

One approach is to focus on building modular loosely coupled components. Over recent years a number of methodologies have evolved that can help with this:

• <abbr>OOCSS</abbr> — Object-Oriented CSS
• <abbr>SMACSS</abbr> — Scalable and Modular Architecture for CSS
• <abbr>BEM</abbr> — Block, Element, Modifier

After experimenting with various approaches we have found SUIT CSS to be a great fit. It uses a variant of the block, element modifier naming convention.

The example below shows a .Photo and .Icon components.

<articleclass="Photo Photo--sizeLarge">
  <aclass="Photo-crop Photo-crop--circle"href="photo.jpg">
    <spanclass="Photo-icon">
      <spanclass="Icon Icon--zoom"></span>
    </span>
    <imgclass="Photo-img u-block"src="photo.jpg"alt="">
  </a>
  <divclass="Photo-caption u-textBreak">
    A photo of <ahref="/barackobama">Barack Obama</a> in the Whitehouse.
  </div>
</article>

In this example the base components Photo and Icon are modified by Photo--sizeLarge and Icon--zoom modifiers. More on SUIT CSS naming conventions.

Build reusable combinable components

These components are name spaced and loosly coupled so they can be combined in different ways without affecting one another. Commonly used utility classes can be further abstracted into name spaced reusable libraries.

Scalable HTML/CSS must, by and large, rely on classes within the HTML to allow for the creation of reusable components. A flexible and reusable component is one which neither relies on existing within a certain part of the DOM tree, nor requires the use of specific element types. It should be able to adapt to different containers and be easily themed.

<footer>— <a href="http://nicolasgallagher.com/about-html-semantics-front-end-architecture/">About HTML semantics and front-end architecture, Nicolas Gallagher</a></footer>

It takes a little time to get used to the SUIT conventions but it's very well thought out and offers a nice balance of simplicity and structure. HTML Inspector is a great tool you can run in development to help with best practices including a conformance check for SUIT/<abbr title="Block, Element Modifier">BEM</abbr> nameing conventions.

If you'r building the UI for a rapidly changing app or even if you'r developing content sites and want to standardize on a consistent methodology for your CSS we'd strongly recommend checking out SUIT.