Structuring CSS and naming conventions


I would be really interested if there is any convention or strategy to
help with CSS in Rails.

Currently my styles are in a couple of fairly large stylesheets and I
use the single application layout throughout. (I like a consistent
pages for my whole app)

However, I find naming styles a constant struggle. The stylesheet has
become unwieldy and I struggle to avoid name conflicts. (I find this
with CSS generally anyway)

I am thinking that I should start to have different stylesheets for
different areas of the app and one for common functions, then the
different stylesheets need to be loaded. What is the best way. I am
reluctant to use different layouts because that would not be DRY. I
could use content for to pick up the different stylesheets, but that
seems a bit messy.

also what about performance, if I keep changing stylesheets, would
they still be cached by the browser (Firefox in my case).

Finally what about naming convention. I am rapidly coming to the
conclusion, that the best approach is to have a main div for each page
with an id of the controller-action. Then id’s in that div could be
simple and need not clash as long as I always target my rules using
div#name-controller div#something etc { css rules }

This starts to feel a bit more structured like the rails app. But am
I over doing it? It seems to me there must be a generally “best” or
pragmatic or agile way to do css stuff. I just cant see it. So maybe
those of you who have been doing this for large apps could give some


This forum is not affiliated to the Ruby language, Ruby on Rails framework, nor any Ruby applications discussed here.

| Privacy Policy | Terms of Service | Remote Ruby Jobs