1

I noticed in Firebug that the css for the body element is showing twice (the first time all the rules are striked out). The first body element comes from the url: http://localhost:3000/assets/application.css?body=1

The 2nd body element comes from the url: http://localhost:3000/assets/scaffolds.css?body=1

I added another scss file in the /app/assets/stylesheets directory called header.css.scss. That is now being included in all webpages as /assets/header.css, like I wanted. But the application.css is again duplicating all of its contents in every page.

Did I do something wrong? Was I not supposed to create the header.css.scss file in assets? Why are all my css rules being duplicated?

UPDATE: My application.css file only has some simple css in it:

/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
 * or vendor/assets/stylesheets of plugins, if any, can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the top of the
 * compiled file, but it's generally better to create a new file per style scope.
 *
 *= require_self
 *= require_tree .
*/
body {
    margin: 0;
}
#content {
    padding: 10px;
    background-color: #eee;
}
code {
    background-color: #d0d0d0;
    padding: 1px 3px;
}

My header.scss file has nothing in common with application.css:

@import "compass/css3/images";

header {
  border-bottom: 1px solid #6787d2;
  height: 7em;
  position: relative;
  background-color: #f0edee;
  background-image: url("/assets/background_header.png");
  padding: 10px 10px 0 10px;
  box-shadow: 0 -1px 3px #C0BABB inset;
}
header address {
  background-color: #b9dd8c;
  @include filter-gradient(#b9dd8c, #5ab86d, vertical);
  $experimental-support-for-svg: true;
  @include background-image(linear-gradient(top,  #b9dd8c 0%,#5ab86d 100%));
  border: 1px solid #15905b;
}

application.html.erb layout only has a single CSS reference:

<!DOCTYPE html>
<html>
<head>
  <title>whatever</title>
  <%= stylesheet_link_tag "application", :media => "all" %>

Finally, views have no references to CSS whatsoever.

Improve this question
2
  • What's at the top of your application.css.scss file? Also, are you including more than just application.css from your html? You are only supposed to have a CSS link to application.css. Commented Oct 5, 2012 at 23:30
  • With the asset pipeline in development, you get all files separately, and the application.css should not contain any code from the rest of files. You should post the whole application.css as in your filesystem (not the one served to the browser). Commented Oct 6, 2012 at 6:38

2 Answers 2

Reset to default
1

You are not actually doing anything wrong.

You might be slightly mis-interpreting what you see in firebug.

  1. You have multiple CSS selectors which match the body tag. The CSS with the more specific selector is applied based on the way CSS works. Firebug is showing you all the CSS which matches, and striking out the styles which are being redefined by the CSS which is actually applied.

    If it seems important to you to not have the CSS which is getting redefined even apply in the first place, apply it to a class or id for the body tag.

  2. When you add header.css, you should expect Rails to include all the contents of application.css, scaffolds.css, and header.css for every page. The intention is the all the CSS will be precompiled into one master CSS file, which every page will reference. The browser will make exactly one call for the CSS file, and cache it so it will not have to fetch the CSS file again.

    So simply put, adding header.css to the assets was intended to include header.css and all the other CSS from every page. To not have the rules applied which are going to be redefined by a duplicate rule, it's up to you to define the rules so they do not overlap unintentionally. (They should only overlap if that's what you intended. For instance setting a font for body, and than later changing the font inside td tags.)

I hope I understood what you were asking and that this cleared things up.

Another answer edited after comments

I think what you might be doing is adding a stylesheet_link_tag each time you add a new CSS file. You should only have a stylesheet_link_tag for application, and not any for scaffold or header. By including scaffold and header in application.css.scss they are already being included, and using the stylesheet_link_tag is including them again.

Improve this answer
Sign up to request clarification or add additional context in comments.

5 Comments

The way you asked, makes me think you are new to all this, and I answered appropriately. I have used chrome's developer tools to identify duplicate CSS and then re-wrote my CSS to avoid duplication. I have also broken the CSS into different files outputted by the asset pipeline. But simply, things are working as designed, and designed for newbies to have all this happen as it is.
I think you misunderstood the question. Thanks though.
I thought you were asking two things. One about the strike through, and then something else as you added headers.
basically application.css is duplicating all the css rules in each of the scss files, so my webpages get 2 sets of the exact same css rules.
@at. If the question was misunderstood it only means that you did not ask correctly. Sorry to seem harsh, but I would have interpreted it exactly as marlin did.
0

I fixed the issue by renaming application.css to application.css.scss. I did that because I wanted to add some scss application-wide and it turned out to remove all the duplication of css in my webpages.

So I don't know what happened to cause the duplication originally..

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.