RSCSS CHEAT SHEET

RSCSS-1: Naming Components

Components will be named with at least two words, separated by a dash. Examples of components:

A like button (.like-button) A search form (.search-form) A news article card (.article-card)

RSCSS-2: Naming Elements

Each component may have elements. They should have classes that are only one word.

.search-form {
    > .field {
        /* ... */
    }
    > .action {
        /* ... */
    }
}
copy

RSCSS-3: Element Selectors

Prefer to use the > child selector whenever possible. This prevents bleeding through nested components, and performs better than descendant selectors.

.article-card {
    .title {
        /* okay */
    }
    > .author {
        /* ✓ better */
    }
}
copy

RSCSS-4: Multiple Words

For those that need two or more words, concatenate them without dashes or underscores.

.profile-box {
    > .firstname {
        /* ... */
    }
    > .lastname {
        /* ... */
    }
    > .avatar {
        /* ... */
    }
}
copy

RSCSS-5: Avoid Tag Selectors

Use classnames whenever possible. Tag selectors are fine, but they may come at a small performance penalty and may not be as descriptive.

.article-card {
    > h3 {
        /* ✗ avoid */
    }
    > .name {
        /* ✓ better */
    }
}
copy

RSCSS-6: Variants

Components may have variants. Elements may have variants, too.

eg.

.search-form
.search-form .-prefixed
.search-form .-compact
copy

RSCSS-7: Naming Variants

Classnames for variants will be prefixed by a dash (-).

.like-button {
  &.-wide { /* ... */ }
  &.-short { /* ... */ }
  &.-disabled { /* ... */ }
}
copy

RSCSS-8: Element Variants

Elements may also have variants.

.shopping-card {
    > .title {
        /* ... */
    }
    > .title.-small {
        /* ... */
    }
}
copy

Dash prefixes

Dashes are the preferred prefix for variants.

It prevents ambiguity with elements. A CSS class can only start with a letter, _ or -. Dashes are easier to type than underscores. It kind of resembles switches in UNIX commands (gcc -O2 -Wall -emit-last).

RSCSS-9: Nested Components

Sometimes it's necessary to nest components. Here are some guidelines for doing that.

<div class='article-link'>
  <div class='vote-box'>
    ...
  </div>
  <h3 class='title'>...</h3>
  <p class='meta'>...</p>
</div>
copy

A component may need to appear a certain way when nested in another component. Avoid modifying the nested component by reaching into it from the containing component.

.article-header {
    > .vote-box > .up {
        /* ✗ avoid this */
    }
}
copy

Instead, prefer to add a variant to the nested component and apply it from the containing component.

<div class='article-header'>
  <div class='vote-box -highlight'>
    ...
  </div>
  ...
</div>
copy

.vote-box {
    &.-highlight > .up {
        /* ... */
    }
}
copy

RSCSS-10: Simplifying Nested Components

Sometimes, when nesting components, your markup can get dirty:

<div class='search-form'>
  <input class='input' type='text'>
  <button class='search-button -red -large'></button>
</div>
You can simplify this by using your CSS preprocessor's @extend mechanism:

<div class='search-form'>
  <input class='input' type='text'>
  <button class='submit'></button>
</div>
copy

.search-form {
    > .submit {
        @extend .search-button;
        @extend .search-button.-red;
        @extend .search-button.-large;
    }
}
copy

RSCSS-11: Layouts

<div class="recipe-item">
    <div class="recipe-list">
    </div>
</div>
copy

RSCSS-12: Avoid positioning properties

Components should be made in a way that they're reusable in different contexts. Avoid putting these properties in components:

Positioning (position, top, left, right, bottom) Floats (float, clear) Margins (margin) Dimensions (width, height) *

RSCSS-13: Fixed Dimensions

Exception to these would be elements that have fixed width/heights, such as avatars and logos.

RSCSS-14: Define Position in Parents

If you need to define these, try to define them in whatever context they will be in. In this example below, notice that the widths and floats are applied on the list component, not the component itself.

.article-list {
    & {
        @include clearfix;
    }

    > .article-card {
        width: 33.3%;
        float: left;
    }
}

.article-card {
    & {
        /* ... */
    }
    > .image {
        /* ... */
    }
    > .title {
        /* ... */
    }
    > .category {
        /* ... */
    }
}
copy

RSCSS-15: Helpers

For general-purpose classes meant to override values, put them in a separate file and name them beginning with an underscore. They are typically things that are tagged with !important. Use them very sparingly.

._unmargin {
    margin: 0 !important;
}
._center {
    text-align: center !important;
}
._pull-left {
    float: left !important;
}
._pull-right {
    float: right !important;
}
copy

RSCSS-16: Naming Helpers

Prefix classnames with an underscore. This will make it easy to differentiate them from modifiers defined in the component. Underscores also look a bit ugly which is an intentional side effect: using too many helpers should be discouraged.

<div class='order-graphs -slim _unmargin'>
</div>
copy

RSCSS-17: Organising Helpers

Place all helpers in one file called helpers. While you can separate them into multiple files, it's very preferrable to keep your number of helpers to a minimum.

RSCSS-18: CSS Structure

RSCSS-19: One Component Per File

For each component, place them in their own file.

/* css/components/search-form.scss */
.search-form {
    > .button {
        /* ... */
    }
    > .field {
        /* ... */
    }
    > .label {
        /* ... */
    }

    // variants
    &.-small {
        /* ... */
    }
    &.-wide {
        /* ... */
    }
}
copy

Use glob matching

In sass-rails and stylus, this makes including all of them easy:

@import 'components/*';
copy

RSCSS-20: Avoid Overnesting

Use no more than 1 level of nesting. It's easy to get lost with too much nesting.

/* ✗ Avoid: 3 levels of nesting */
.image-frame {
    > .description {
        /* ... */

        > .icon {
            /* ... */
        }
    }
}

/* ✓ Better: 2 levels */
.image-frame {
    > .description {
        /* ... */
    }
    > .description > .icon {
        /* ... */
    }
}
copy

RSCSS-21: Pitfalls

RSCSS-22: Bleeding Through Nested Components

Be careful about nested components with elements sharing the same name as elements in its container.

<article class='article-link'>
 <div class='vote-box'>
    <button class='up'></button>
    <button class='down'></button>
    <span class='count'>4</span>
  </div>

  <h3 class='title'>Article title</h3>
  <p class='count'>3 votes</p>
</article>
copy

.article-link {
    > .title {
        /* ... */
    }
    > .count {
        /* ... (!!!) */
    }
}

.vote-box {
    > .up {
        /* ... */
    }
    > .down {
        /* ... */
    }
    > .count {
        /* ... */
    }
}
copy

In this case, if .article-link > .count did not have the > (child) selector, it will also apply to the .vote-box .count element. This is one of the reasons why child selectors are preferred.

RSCSS-23: Apprehensions

Some people may have apprehensions to these conventions, such as:

"But dashes suck"

You're free to omit them and just use regular words, but keep the rest of the ideas in place (components, elements, variants).

"But I can't think of 2 words!"

Some components will only need one word to express their purpose, such as alert. In these cases, consider that using some suffixes will make it clearer that it's a block-level element:

.alert-box.alert-card .alert-block Or for inlines: .link-button .link-span;
copy