Take the cascade into consideration when naming elements. CSS nirvana is when selectors are written the way you would talk about them.
<body id="science">
<div class="article">
<h1>Headline</h1>
<p class="intro">Lorem ipsum dolor sit amet…</p>
<img src="http://dummyimage.com/120x60">
</div>
</body>
#science .article {…}
#science .article .intro {…}
#science .article img {…}
Repetitive naming conventions add bloat and require more thinking when making changes.
<body id="science">
<div class="science-article">
<h1>Headline</h1>
<p class="science-article-intro">Lorem ipsum dolor sit amet…</p>
<img src="http://dummyimage.com/120x60">
</div>
</body>
#science .science-article {…}
#science .science-article .science-article-intro {…}
#science .science-article img {…}