CSS guide

This guid is plagiarized from the following (genius) guys:

* 

## Componentizing

Components should belong to their own less file. For example, all general button definitions should belong in buttons.less.

## Name-spacing

Name-spacing is great! But it should be done at a component level – never at a page level.

Also, namespacing should be made at a descriptive, functional level. Not at a page location level. For example, .profile-header could become .header-hero-unit.

## Style Scoping

Medium pages should largely be reusing the general component level styles defined above. Page level name-spaces however can be helpful for overriding generic components in very specific contexts.

Page level overrides should be minimal and under a single page level class nest.

.home-page {
  .nav {
    margin-top: 10px;
  }
}


## Nesting

Don't nest. Ever.

Nesting makes it harder to tell at a glance where css selector optimizations can be made.

Wrong:

.list-btn {
  .list-btn-inner {
    .btn {
      background: red;
    }
    .btn:hover {
      .opacity(.4);
    }
  }
}
Right:

.list-btn .btn-inner {
  background: red;
}
.list-btn .btn-inner:hover {
  .opacity(.4);
}

## Style Guide
* `.js-` prefixed class names for elements being relied upon for javascript selectors

* `.u-` prefixed class name for single purpose utility classes like .u-underline, .u-capitalize, etc.

* Introduction of meaningful hypens and camelCase — to underscore the separation between component, descendant components, and modifiers

* `.is-` prefixed classes for stateful classes (often toggled by js) like .is-disabled

* New CSS variable semantics: [property]-[value]--[component]

* Mixins reduced to polyfills only and prefixed with .m-