I (a Rails newbie) am trying to understand how CSS works in Rails, relying on guidance from http://guides.rubyonrails.org/configuring.html. I’m getting some surprising, perplexing, and unwelcome results, regarding how the CSS settings cascade to different views.
To follow the story, see numbered screen shots at https://drive.google.com/file/d/0B-thboqjuKZTeVI3R0tPbGhPVjQ/view?usp=sharing:
Here’s the legend for all the screen shots: This app has two models, users and toys. The views and other Rails objects for both models have been generated using scaffold. On each screen, the top window shows scaffolds.scss; below that on the left is users.scss; at the right of that is toys.scss; at lower left is the users object list; and at lower right is the toys object list. This screen shows the unmodified versions of all this. The screen backgrounds are both white, following the CSS in scaffolds.scss. Thru all these screens, the variable to watch is the background color.
I modified (and saved) users.scss to make a yellow background, and I refreshed the pages at the bottom. Here came the first surprise: I expected the users background to turn yellow and the toys background to remain white. In other words, I assumed that the scope of the users.scss setting would be just the users pages, and that the toys pages would continue to inherit the (unmodified) white background from scaffolds.scss.
I modified (and saved) toys.scss to make a yellow background, and I refreshed the pages at the bottom. I was hoping that the toys screen would turn green and the users screen would stay yellow. Nothing changed. So it seems that the users CSS overrides the toys CSS, tho I have no idea how this precedence got established.
THis is further confirmed when I change the users CSS, and it applies to both.
When I remove the users CSS color specification, both screens now follow the toys CSS. This too is weird; why doesn’t one or both of these screens inherit the scaffold.scss setting?
6-7. A couple more experiments confirm that (a) If the CSS attribute for any model is set, that setting applies to all models in the application (rather than just to that model); and (b) among the models in an app, there is some kind of precedence ordering that determines which model’s setting of a given CSS attribute applies to all models.
Clearly, there is a bug here. Whether the bug is in in the machinery of Rails or in my understanding of it, I can’t tell. What I would like to know is, how (or where) to set CSS attributes so they apply to the displays of just one model.
~ Thanks, Ken