robwierzbowski

<article styleName='userList'>
  <h1 styleName='title'>Friends</h1>
  <ul styleName='users'>
    <li styleName='user'>
      <UserPreview user={1} compact={true} />
    </li>
    <li styleName='user'>
      <UserPreview user={2} compact={true} />
    </li>
    <li styleName='user'>

robwierzbowski

/* type.css */

@import 'vars.css';

@define-mixin header {
  font-family: $font-sans;
  font-weight: 600;
  letter-spacing: -0.01em;
}

robwierzbowski

<article styleName="userSummary --compact">
  <img styleName="image -loading" src="/low-res.jpg" />
  <div styleName="firstName">Mr. Jim</div>
  <div styleName="lastName">Business</div>
</article>

robwierzbowski

/* vars.css */

$off-black: hsl(0, 0%, 14%);
$serif-family: "Charter BT", "Times New Roman", serif;

/* component style.css */

@import 'vars.css';

.firstName {

robwierzbowski

.image {
  /* element rules */
  
  &.-loading { 
    /* state rules */
  }
  
  &.-loaded {
    /* state rules */
  }

robwierzbowski

.userSummary {
  /* element rules */
  
  &.--compact { 
    /* modifier rules */
  }
}

.image {
  /* element rules */

robwierzbowski

.userSummary { 
  /* element rules */
}

.image { 
  /* element rules */
}

.firstName,
.lastName { 

robwierzbowski

/*
  Set default element styles
  Based partially on sanitize.css v2.0.0
  github.com/jonathantneal/sanitize.css
*/

*,
::before,
::after {
  box-sizing: border-box;

robwierzbowski

/*
  Reset text elements for easy semantic use.
  http://anthonyshort.me/global-typographic-styles-suck/
*/

/* Pseudo */

:focus {
  outline: none;
}

robwierzbowski

// Not the most expressive code, but it does the trick.
// Run with swap = true to test swapping doors.
const montyBurns = function (swap = false) {
  let wins = 0;

  for (let i = 0; i < 10000; i++) {
    const doors = [
      'empty',
      'empty',
      'empty',