CSS Styleguide

This is the CSS Styleguide used to make MattSnider.com. It is meant to be both informative to you as visitors, providing examples and good styles, and also descriptive for myself as a developer, so I can be consistent across pages. I strongly recommend creating a similar CSS Styleguide for any website you might build.

There is lots of great CSS styleguides available on the web. I have included some links at the bottom of this page.

Coding Style

  1. Use soft-tabs with a two space indent.
  2. Put a space after : in property declarations.
  3. Put a space after , in property declarations.
  4. Put a space before { in rule declarations.
  5. Use hex color codes #000 unless using rgba (letters should be capitalized).
  6. Use // for comment blocks (instead of /* */).
  7. Use - to separate words (instead of _).
  8. Keep document, base, module, and layout style separated.
  9. Use classes instead of tag-specific markup, for better modularity.
  10. Styles inside rule declarations should be alphabetical with mixins first, followed by properties, followed by additional rules.

Here is a good syntax example:

    // This example shows 1-7 & 10!
    .styleguide-format {
      background: rgba(0, 0, 0, 0.75);
      border: 1px solid #0F0;
      color: #000;
    }
    

SCSS Style

  • As a rule of thumb, don't nest further than three levels deep. If you find yourself going further, think about reorganizing your rules (either the specificity needed, or the layout of the nesting).
  • Need to think about SCSS structure more, poorly organized and not universally importable

Pixels vs. Ems vs. %

Use % for dimensions whenever possible, falling back to em and px as a last resort. Fonts have been base-lined using Html5Boilerplate, so use % over px over em (avoid using pt).

Additionally, unit-less line-height is preferred because it does not inherit a percentage value of its parent element, but instead is based on a multiplier of the font-size.

Class naming conventions

Never reference js- prefixed class names from CSS files. js- are used exclusively from JS files.

Use the is- prefix for state rules that are shared between CSS and JS.

Specificity (classes vs. ids)

You should almost never reference an ID, instead use classes and design elements in a reusable way. What you may think is page specific, may end up being used again elsewhere later.

For example, if you are making a list consider the following CSS:

        .menu {
          …
        }

        .menu-item {
          …

          a {
            …
          }
        }
    

As it can be used with either of the following two sets of markup:

CSS Specificity guidelines

  • If you must use an id selector (#selector) make sure that you have no more than one in your rule declaration. A rule like #header .search #quicksearch { ... } is considered harmful.
  • When modifying an existing element for a specific use, try to use specific class names. Instead of .listings-layout.bigger use rules like .listings-layout.listings-bigger. Think about ack/greping your code in the future.

CSS Related Links