Re: Semantics, OOCSS and DRY. - CSS-Tricks

July 1, 2013 at 9:08 pm #141225

Participant

You wouldn’t want to target these like this:

.movie-review,
.breaking-news {
background: #eee;
color: #333;
padding: 10px 20px;
}

It’s to specific. Instead, make the article your component: http://codepen.io/anon/pen/KAGvL

So something like:

.article{ /* default styles */}
.article-news{ /* news modifier styles */}