CSS Utility Classes and "Separation of Concerns"

Webcraft
,
1

I’ve been leaning more towards utility classes in my CSS for a while, but this really helped organize my thoughts on why I like it best. A really great read.

2

How are you tried any of the utility CSS frameworks suggested at the end? They get really hard to read for someone not used to that framework.

Take the Tachyons Collections demo for square images and titles for example. To create that layout one would have the following HTML:

<section class="cf w-100 pa2-ns">
  <article class="fl w-100 w-50-m  w-25-ns pa2-ns">
    <div class="aspect-ratio aspect-ratio--1x1">
      <img style="background-image:url(http://mrmrs.github.io/images/0006.jpg);" 
      class="db bg-center cover aspect-ratio--object" />
    </div>
    <a href="#0" class="ph2 ph0-ns pb3 link db">
      <h3 class="f5 f4-ns mb0 black-90">Title of piece</h3>
      <h3 class="f6 f5 fw4 mt2 black-60">Subtitle of piece</h3>
    </a>
  </article>

And that is just the first article element. I know it may make good utility sense, but I see that and think I need one class on the section, and I have enough hooks to form the rest.

The author’s framework hasn’t been released yet, so maybe it seems less obscure and arcane than the others.

1 Like
3

At that level, it gets ridiculous I think. I merely liked the approach of making things very general; card vs author-section, and then having some minor utility classes like pull-left, etc.

4

Do you break your CSS into multiple files, and combine them into one? This was a workflow I picked up on, and you basically move your sections into separate files, like layout.css, typography.css, etc.

I imagine business as usual, except to add a utility.css to the mix, for common solutions that don’t fall evenly into structure vs style.

I wanted to say something else about those blog posts: they basically say, “if you’ve never worked on a large project, you don’t know what you are doing”. I see that all over the place, like we all ought to be building CSS like we are launching for a billion users. But I have a counter-point: maybe it is more important to document how you build things, and make stylers follow the docs, instead of accommodating each new designer that joins the project. The docs can be inline, pre-minified CSS!

Saying that sounds like I am advocating for simpler layouts and designs, because I am. We are about to jump into V/AR, so let’s just say we’ve seen the best the web has to offer, and it looks like fancy electro-books.

1 Like