CODEWITHSUNDEEP
ruby-on-rails-3sass
Silva
Silva

Reputation: 161

Rails CSS loads, but style isn't applied

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 %>">

Upvotes: 4

Views: 1732

Answers (2)

Samiron
Samiron

Reputation: 5317

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.

Upvotes: 2

Salil
Salil

Reputation: 47462

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;
    }

Upvotes: 0

Related Questions