4 Apr 2017
Clean CSS

Noam Almosnino

Under the hood, WebVR Studio is mostly built on top of web technologies. There a few reasons for this decision, the primary one is preserving the same fidelity between design time and the exported file in the browser—might as well make the browser act as the view layer then… It’s also the tech stack I’m most familiar with—so I figured it’s the best tool for development speed and getting a product out fairly quickly.

Today I’ll talk about a small subset of the tech stack… CSS. More specifically I how I keep my CSS clean. Using a simple trick I learned from Guy Routledge, I’ll show you how to turn a traditional list of CSS properties into a more communicative and meaningful block of code.

The Usual CSS

Historically I’ve organized my CSS in an ad-hoc fashion, or when I tried to make an effort towards organization, sometimes I tried sorting the properties alphabetically. Sorting the properties sounds logical, but in practice doesn’t work. You’re still slowed down by browsing the list for the property. It also doesn’t communicate anything about the visual behavior of the element being styled. It’s a mechanical approach that doesn’t really save any time or effort. A computer probably appreciates this approach more than I do.

Knowing I’m human and not a computer is a great first step to making code cleaner. Code is really meant for other humans, or a future you or me—who will read the code and try to understand it in order to make changes.

A human also doesn’t loop through lists, it usually looks for patterns, groupings and other visual shortcuts in order to quickly grasp a piece of code, or more broadly, a piece of text. Which is why we learned to use paragraphs in elementary school, and why we get tired reading run-on sentences.

So back to CSS. If a sorted list doesn’t really work, and an ad-hoc style doesn’t really enforce consistency, what’s a better way? Guy calls it Outside In CSS.

Let’s take a quick look at what we mean by “hard to read and scan” CSS before we see the cleaner alternative. Here is the alphabetically sorted list for a Pop-Over UI component:

.pop-over {
        background-color: #333;
        border: 1px solid #111;
        border-radius: 4px;
        box-shadow: 0 0px 10px rgba(0,0,0,0.25);
        display: none;
        filter: brightness(1.1);
        font-size: 1em;
        height: auto;
        line-height: 1.5;
        position: fixed;
        width: 240px;
        z-index: 999;
}
.pop-over .inner {
        height: 100%;
        padding: 5px;
        width: 100%;
}

Notice, the code is scannable in the “looping through the list sense”, but doesn’t offer any of the visual shortcuts mentioned above like grouping or chunking—which are better for the human.

Outside In CSS

Outside In CSS offers a simple alternative to the above sorted list:

Start with big-picture properties which impact stuff outside the element and work in towards the finer details.

In other words, start with the outside structure, then work your way to the internal structure, then work towards the cosmetic properties.

Guy offers this checklist to work with:

  • Layout Properties (position, float, clear, display)
  • Box Model Properties (width, height, margin, padding)
  • Visual Properties (color, background, border, box-shadow)
  • Typography Properties (font-size, font-family, text-align, text-transform)
  • Misc Properties (cursor, overflow, z-index)

Personally I prefer to move the Typography Properties up one row, since the size of the font, or the line-hight could affect the internal structure of the element. Let’s do another pass of the CSS above, using these rules:

.pop-over {
        /* Layout */
        position: fixed;
        display: none;

        /* Box Model */
        width: 240px;
        height: auto;

        /* Typography */
        font-size: 1em;
        line-height: 1.5;

        /* Visual */
        background-color: #333;
        border: 1px solid #111;
        border-radius: 4px;
        box-shadow: 0 0px 10px rgba(0,0,0,0.25);
        filter: brightness(1.1);

        /* Misc */
        z-index: 999;

        /* Children */
        .inner {
                width: 100%;
                height: 100%;
                padding: 5px;
        }
}

Now when I want to make a change to the CSS (or if you noticed the SCSS), I know which section to navigate to right away. I don’t have to waste “cycles” going through the sorted list, finding the typography properties for example. They sit in their own section.

To put it another way, it’s just like your favorite design tool. Imagine you opened up your favorite design tool and all the properties in the sidebar were alphabetically sorted instead of grouped. Width and Height would be separted in the list for example. Which approach would you prefer, the grouped one, or the long list? The list would get tiring very fast.

The Outside In pattern also pays off in the long run. If all of the CSS code in the project followed this pattern, it becomes very predictable, where the relevant properties are for each use case. Predictability saves time, and for a small indie business like mine, I’ll take what I can get!

If you want to read more about this technique, check out Guy’s article here.

And stay tuned for more updates on WebVR Studio!