kristoferjoseph

.button {
    background-color: Aqua;
}

/* Some thousand lines later */

.button {
    background-color: BurlyWood;
}

kristoferjoseph

header > p {
    /* Styles for all <p> in a <header> */
}

/* Wait, you have to style a <p> differently based on context!? */

section > header > p {
    /* Styles for all <p> in a header, in a section */
    /* Because you never need to style it differently right!? */
}

kristoferjoseph

/* Somtimes you don't control the order fo concatination for multiple files */
/* <button class="button button--burly">Burly?</button> */

.button--burly {
    background-color: BurlyWood !important;
}

/* Some thousand lines later */

.button {

kristoferjoseph

<div class="button-bar">
  <div class="button-bar__item">
    <button class="button">One</button>
  </div>
  <div class="button-bar__item">
    <button class="button">Two</button>
  </div>
  <div class="button-bar__item">
    <button class="button">Three</button>
  </div>

kristoferjoseph

<div class="ButtonGroup">
  <div class="ButtonGroup-item">
    <button class="Button">One</button>
  </div>
  <div class="ButtonGroup-item">
    <button class="Button">Two</button>
  </div>
  <div class="ButtonGroup-item">
    <button class="Button">Three</button>
  </div>

kristoferjoseph

<div class="topcoat-button-bar">
  <div class="topcoat-button-bar__item">
    <button class="topcoat-button">One</button>
  </div>
  <div class="topcoat-button-bar__item">
    <button class="topcoat-button">Two</button>
  </div>
  <div class="topcoat-button-bar__item">
    <button class="topcoat-button">Three</button>
  </div>

kristoferjoseph

var awesomeModule = require('awesome-module');

module.exports = function() {
    var myThing = {};
    return awesomeModule.doStuff(myThing);
};

kristoferjoseph

var express = require('express'),
    instant = require('instant'),
    colors = require('colors'),
    app = express();

app.use(instant(__dirname));
app.listen(3000,
  console.log('Navigate to ' + 'http://localhost:3000'.green + ' to view your page')
);

kristoferjoseph

/*
 * Scale CSS
 * =========
 *
 * API
 * ---
 *
 * Use an @import file to override the
 * `--ratio` variable.
 * Default is the golden ratio or phi

kristoferjoseph

Keybase proof

I hereby claim:

• I am kristoferjoseph on github.
• I am dam (https://keybase.io/dam) on keybase.
• I have a public key whose fingerprint is C57C BCA0 3E80 13C3 76AA 8790 68C9 8869 1845 EC5E

To claim this, I am signing this object: