flow-css-naming-convention-semantic-example.css

// Incorrect:
<div class="article">
  <div class="title">Title</div>
  <div class="content">Article contents goes here!</div>
</div>

.article {}
.article .title {}
.article .content {}

// Correct:
<article>
  <h1>Title</h1>
  <p>Article contents goes here!</p>
  <ul>
    <li>list item</li>
  </ul>
</article>

article {}
article > h1 {}
article > p {}
article > ul {}