When to use a utility

[simonsmith]

I'm pretty clear on using utlity classes most of the time, but the lines blur a bit and I wonder if there are any guidelines on using them vs putting the styles in the component?

I have a feeling that you can go a bit mad with utility classes and essentially replicate inline styles.

An example:

<a href="/" class="Logo">
    <p class="Logo-title">My website</p>
    <p class="Logo-subtitle">A slogan</p>
</a>

My first pass at component styles were the following:

.Logo {
    display: inline-block;
    text-transform: lowercase;
    text-decoration: none;
    color: inherit;
}

.Logo-title {
    font-size: 26px;
    font-weight: bold;
}

.Logo-subtitle {
    color: #777;
    font-size: 14px;
}

.Logo-subtitle, .Logo-title {
    margin: 0;
    display: inline-block;
}

Now, some of these can be replaced with utility classes, namely the display and margin:

<a href="/" class="Logo u-inlineBlock">
    <p class="Logo-title u-inlineBlock u-marginAn">My website</p>
    <p class="Logo-subtitle u-inlineBlock u-marginAn">A slogan</p>
</a>

I could go even further, but already the repetition feels wrong in the markup.

What is the general view on this? Do I just need to judge it on my own tastes?

Sold on the Suit methodology so far though, great stuff.

[yk1711]

I'm wondering about this all the time as well. For me, it's usually about quickly adding new features through existing utilities without writing a single line of new css, but at the same time I get more control by styling this stuff on component level in the long run. I guess it comes down to how much you're willing to refactor html + css instead of just css when changes to the project are required.

[necolas]

Yes it's a little bit up to judgement and generally fall on the side of rolling styles into the component. But it depends on the purpose of the utility. You'd probably want to use the sizing ones often, as well as utilities that package up the implementation for specific presentations: u-cf, u-textTruncate, or u-linkComplex. But with display and alignment, it's a little different.

In your logo example, I'd control the display styles in the component. You're already going to be applying a collection of specific styles to those elements.

But sometimes you'll want to "surgically" adjust a component or some minor internals. For example:

<span class="u-inlineBlock">
  <button class="Button"></button>
</span>

<span class="Icon Icon--save u-block"></span>

<div class="Tweet">
  <div class="Tweet-context">
    <span class="Icon Icon--retweeted u-alignMiddle"></span>
    <span class="u-alignMiddle">Retweeted by ...</span>
  </div>
  ...
</div>

Hope that clears up where my thinking is at. Thanks