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 CSS.

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

  • Leaky abstractions — Tight coupling and entanglement between components ultimately results in a brittle code base with unpredictable results in design and layout.

  • Lack of isolation of responsibilities — leading to bloat and over complexity.

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:

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.

<article class="Photo Photo--sizeLarge">  
  <a class="Photo-crop Photo-crop--circle" href="photo.jpg">
    <span class="Photo-icon">
      <span class="Icon Icon--zoom"></span>
    </span>
    <img class="Photo-img u-block" src="photo.jpg" alt="">
  </a>
  <div class="Photo-caption u-textBreak">
    A photo of <a href="/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.

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/BEM 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.

Brent Graham

Brent is responsible for everything user experience at Cloud 66

London, UK
Subscribe and get updates

Have feedback? Please get in touch @cloud66 on Twitter.

Everything you need to build, manage and maintain containers in production on your own servers and any cloud

Try Cloud 66 — 14 Days Free Trial, No credit card required