Modular, conflict free, BEM-style CSS
What happens if one of your slides is itself a block that contains an image, such as an article. Consider this markup:

&lt;ul class='slide-show'&gt;
  &lt;li class='slide'&gt;
    &lt;img class='image' /&gt;
  &lt;/li&gt;
&lt;/ul&gt;

&lt;article class='article'&gt;
  &lt;p class='text'&gt;&lt;/p&gt;
  &lt;img class='image' /&gt;
&lt;/article&gt;


They seem fine on their own and for six months they might be, but it's perfectly reasonable for the &lt;article&gt; block to be nested in the &lt;ul&gt; slide show block, at which point any styles defined on .slide-show .image will effect the article's images too.

By building up modules using BEM and sticking to the naming conventions you guarantee unique classes that won't clash regardless of the order or hierarchy. You know the styles won't leak or be leaked on and you know that you can move the block anywhere in the hierarchy without leakage.