using custom html attributes to contextualize components

contextualized-components.html

<!-- 
  Components are independent from each other.
  They have no margin or position.
  Components internal sizes are in ems.
  https://gist.github.com/giuseppeg/0c3509803f8b14fa785a
  (I am also trying to figure out if default line-height set to 1 is a good or bad thing
  and if it helps with v-align stuff)
  Component internals are styled with modifiers when necessary.
  
  At rendering time components are contextualized with custom attrs.
  Custom attrs are used only to change the component (font-)size, position, margins and layout in general.
  
  Context sizes are values in the 1-6 range (from headings I learnt that 6 are more than enough)
  and multiple of a base value. The unit is rem.
  
  This is very similar to what Segment is doing.
-->

<div class="Header" ctx-position="fixed">...</div>
<div class="Hero">...</div>
<div class="Gallery" ctx-space="top:5 bottom:2">...</div>
<a class="Button Button--hotpink" href="/moar" ctx-font="5">Moar</a>

<!-- 
  cons of using custom attributes (read meh) are: 
  - they are invalid
  - you can't select them in css in IE8
-->