Rails CSS loads, but style isn't applied

Question

I'm following the book http://pragprog.com/book/rails4/agile-web-development-with-rails and my scss files aren't working.

The css file is this one:

.store {
  h1 {
    margin: 0;
    padding-bottom: 0.5em;
    font:  150% sans-serif;
    color: #226;
    border-bottom: 3px dotted #77d;
  }

  /* An entry in the store catalog */
  .entry {
    overflow: auto;
    margin-top: 1em;
    border-bottom: 1px dotted #77d;
    min-height: 100px;

    img {
      width: 80px;
      margin-right: 5px;
      margin-bottom: 5px;
      position: absolute;
    }

    h3 {
      font-size: 120%;
      font-family: sans-serif;
      margin-left: 100px;
      margin-top: 0;
      margin-bottom: 2px;
      color: #227;
    }

    p, div.price_line {
      margin-left: 100px;
      margin-top: 0.5em; 
      margin-bottom: 0.8em; 
    }

    .price {
      color: #44a;
      font-weight: bold;
      margin-right: 3em;
    }
  }
}

and the html file the following:

<% if notice %>
<p id="notice"><%= notice %></p>
<% end %>

<h1>Your Pragmatic Catalog</h1>

<% @products.each do |product| %>
  <div class="entry">
    <%= image_tag(product.image_url) %> 
    <h3><%= product.title %></h3>
    <p><%= sanitize(product.description) %></p>
    <div class="price_line">
      <span class="price"><%= product.price %></span>
    </div>
  </div>
<% end %>

The CSS is loading properly, but not being applied. However if add a surrounding div with the class "store" it works. The book doesn't refer this situation, and I believe it should "automatically" apply the style, right?

Thanks.

**EDIT********

I found the problem. For those who may encounter the same issue, check the file:

app/assets/views/layouts/application.html.erb

body tag should have the following code:

<body class="<%= controller.controller_name %>">

score 2 · Accepted Answer · edited Jun 20 '20 at 09:12

Great that you found out the solution. But im trying to explain what happened behind the scene.

The way you are using the css is not a general convention. This facility comes with some additional gem. Check this link https://stackoverflow.com/a/4564922/1160106. With these gems you are able to design your css more DRY way.

General Convention

if you want to apply style to the following h1 element

# Here "store" class is the parent element of "h1"
<div class="store">
     <h1> some text </h1>
</div>

Will require following way of css

#Here also "store" is written before "h1"
.store h1 
{ 
   #some designs
}

Whats happening in your case?

Probably you are maintaining controller wise css files. And presuming that you have a stores_controller. Thats why the classes for your stores_controller is encapsulated in .store {} block. Like

.store {
    h3 {font-size: 120%;}
}

So it is clear that your h3 elements require a parent element having store class. And you are doing so by adding class="<%= controller.controller_name %>" with your body tag. Undoubtedly the <body> tag is parent of all following nodes. Now when you are hitting stores_controller it sets class="store" and your styles are working.

The approach is really DRY and recommendable.

Thank you for your explanation. I was aware this isn't normal css, and what was happening behind the scenes, however, since I am new to Rails, I didn't know how it worked in Rails. I just didn't know whether the class name should be somewhere or not. I suspected Rails "connected" somehow the stylesheet to this specific controller view. However, when I figured out the solution, I found out it was a lot more straightforward than I expected :) — Silva, Oct 16 '12 at 11:41

score 0 · Answer 2 · answered Oct 16 '12 at 10:43

0

As per your code all the styling is between the .store { } block, so it will not reflect as long as you surrounding div with the class "store"

For example

.store {
  h3 {
      font-size: 120%;
      font-family: sans-serif;
      margin-left: 100px;
    }
}

is same as

.store h3 {
      font-size: 120%;
      font-family: sans-serif;
      margin-left: 100px;
      margin-top: 0;
      margin-bottom: 2px;
      color: #227;
    }

answered Oct 16 '12 at 10:43

Salil

46,566
21
122
156

Yes, like I said, if I add a surrounding div with store class, the style works. However, the book never refers this! I believe it should work without that. – Silva Oct 16 '12 at 10:52

Rails CSS loads, but style isn't applied

2 Answers2

General Convention

Whats happening in your case?