Which CSS Selector is better practice? <p>I am wondering which selector is better practice and why?</p> <p><strong>Sample HTML Code</strong></p> <pre class="lang-html prettyprint-override"><code>&lt;div class="main"&gt; &lt;div class="category"&gt; &lt;div class="product"&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <p>and we want to reach <code>.product</code> with CSS selectors:</p> <ol> <li><code>.product</code></li> <li><code>.main .category .product</code></li> <li><code>div.main div.category div.product</code></li> </ol> <p>I am comparing them to the following criteria:</p> <ul> <li>Performance</li> <li>Maintainability</li> <li>Readability</li> </ul> <p>We may assume that <code>.product</code> is unique throughout the page. We can have used id instead of class but in this case, we chose class attribute.</p>