hookable_markup.html

<!-- references: -->
<!-- accessibility -->
<!-- semantics -->
<!-- idiomatic markup -->
<!-- modular components -->
<!-- css class selector performance -->
<!-- js id selector performance -->
<!-- object-oriented-like css classes -->

<!-- good example -->
<section id="section-id">
	 <div id="component-name" class="component--type component--name">
	      <ul role="menu">
	        <li role="menuitem"></li>
	      </ul>
	 </div>
</section>

<!-- bad examples -->

<!-- not semantic -->
<div class="container">
	<div class="wrapper">
	</div>
</div>

<!-- not idiomatic -->
<section>
	<div class="type_o_div1">
	</div>
</section>

<!-- not inheritable -->
<section>
	<div class="i_have_no_parent_class_even_though_i_share_properties_with_other_elements">
	</div>
</section>

<!-- not accessible -->
<ul>
  <li>content</li>
  <li>content</li>
</ul>