All geek questions in one place

Rails loads CSS but style doesn't apply

I follow the book http://pragprog.com/book/rails4/agile-web-development-with-rails and my scss files do not work.

The css file is as follows:

.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 html file:

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

CSS loads properly, but doesn't apply. However, if you add an surrounding div with the class "store", it works. The book does not apply to this situation, and I believe that it should "automatically" apply the style, right?

Thanks.

** EDIT ********

I found a problem. For those who may run into the same problem, check the file:

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

Tag

body should have the following code:

 <body class="<%= controller.controller_name %>">
+4
source share
2 answers

It’s great that you found a solution. But I'm trying to explain what happened behind the scenes.

The way you use css is not a general agreement . This object comes with an additional stone. Check out this link fooobar.com/questions/184949 / .... With these gems you can design your css more DRY .

General convention

if you want to apply style to the next element h1

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

The following css method is required

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

What happens in your case?

Perhaps you support files with a wise css controller. And suppose you have stores_controller . This is why the classes for your stores_controller enclosed in a .store {} block. how

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

So it’s clear that your h3 elements require a parent element that has a store class. And you do this by adding class="<%= controller.controller_name %>" with the body tag. Undoubtedly, the <body> is the parent for all of the following nodes. Now when you click stores_controller , it sets class="store" and your styles work.

The approach is truly DRY and recommended.

+2
source

According to your code, the whole style is between the .store { } block, so it will not be displayed as long as you surround the div with the class "store"

for instance

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

coincides with

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

Source: https://habr.com/ru/post/1440018/

More articles:


All Articles