Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>Great that you found out the solution. But im trying to explain what happened behind the scene.</p> <p>The way you are using the css <strong>is not a general convention</strong>. This facility comes with some additional gem. Check this link <strong><a href="https://stackoverflow.com/a/4564922/1160106">https://stackoverflow.com/a/4564922/1160106</a></strong>. With these gems you are able to design your css more <a href="http://en.wikipedia.org/wiki/Don%27t_repeat_yourself" rel="nofollow noreferrer"><strong>DRY</strong></a> way.</p> <hr> <h2>General Convention</h2> <p>if you want to apply style to the following <code>h1</code> element</p> <pre><code># Here "store" class is the parent element of "h1" &lt;div class="store"&gt; &lt;h1&gt; some text &lt;/h1&gt; &lt;/div&gt; </code></pre> <p>Will require following way of css</p> <pre><code>#Here also "store" is written before "h1" .store h1 { #some designs } </code></pre> <hr> <h2>Whats happening in your case?</h2> <p>Probably you are maintaining controller wise css files. And presuming that you have a <code>stores_controller</code>. Thats why the classes for your <code>stores_controller</code> is encapsulated in <code>.store {}</code> block. Like</p> <pre><code>.store { h3 {font-size: 120%;} } </code></pre> <p>So it is clear that your <code>h3</code> elements require a parent element having <code>store</code> class. And you are doing so by adding <code>class="&lt;%= controller.controller_name %&gt;"</code> with your <code>body</code> tag. Undoubtedly the <code>&lt;body&gt;</code> tag is parent of all following nodes. Now when you are hitting <code>stores_controller</code> it sets <code>class="store"</code> and your styles are working.</p> <p>The approach is really <a href="http://en.wikipedia.org/wiki/Don%27t_repeat_yourself" rel="nofollow noreferrer">DRY</a> and recommendable. </p>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload