iammerrick/CSS Components.md

Last active June 16, 2016 22:05

Star (0) You must be signed in to star a gist
Fork (0) You must be signed in to fork a gist

Learn more about clone URLs
Clone this repository at <script src="https://gist.github.com/iammerrick/876c971b18a48e10e424b7e6a2df8b55.js"></script>
Save iammerrick/876c971b18a48e10e424b7e6a2df8b55 to your computer and use it in GitHub Desktop.

Raw

CSS Component

.MyComponent {
  component: children;
  background-color: #000;
  
  .icon {
    background: #FF0000;
    component: icon;
  }
}

Nested CSS Creates Component

<MyComponent icon={<Icon type='user' />}>
  Hello world!
</MyComponent>

Renders HTML

<!-- CSS is classes are hashed, e.g. css modules -->
<style>
.a {
  background-color: #000;
}
.b {
  background: #FF0;
}
</style>
<div class='a'>
  Hello world!
  <div class='b'>
    <i class='icon-24-user' />
  </div>
</div>