having unique css file for each page (using a global file too) is a good practice?

Question

At this time I build a new website with Ruby on Rails. As the site becomes bigger and bigger, my css rules are getting messy. So I thought a way to improve my css code readability and avoid mistakes:

I have one global css.scss (SASS, something like LESS) file for all the pages that resets and handles global elements such as header and footer. For every other page I have a dedicated css file. For instance, for the about page I have an about.css.scss file. In the about_page.css.scss file the code looks like:

.about_page {
  .othersubclass {
    .
    .
  }
}

while in the 'about.erb' page I have the following:

<div class="about_page">
  <div class="othersubclass">
    .
    .
    .
  </div>
</div>

Is this a good or a bad technique? Is there any known technique that faces this problem?

(btw RoR concatenates all css files into 1 file thus there is no problem with extra http requests)

you need to provide more details on how your site works. otherwise, it's a very generic question which leads to no real answer. a simillair one is here: http://stackoverflow.com/questions/5425857/one-stylesheet-per-page and there http://stackoverflow.com/questions/2336302/single-huge-css-file-vs-multiple-smaller-specific-css-files — Ray Cheng, Aug 14 '12 at 22:01

score 2 · Accepted Answer · answered Sep 13 '12 at 20:06

2

As per: http://betterfrontend.com/guides/stylesheets/

It's generally recommended to have a stylesheet per a major section of the site.

You can then compile it all within application.css.scss (all the @import's in here).

answered Sep 13 '12 at 20:06

Daniel Fischer

3,042
1
26
49

Nice project (betterfrontend)! Will wander around :) – Dmitry Pashkevich Sep 13 '12 at 20:32

score 0 · Answer 2 · answered Sep 13 '12 at 20:31

It's perfectly fine adding a unique CSS class/id to the root element of each page on your website (in fact many CMS do that) but it's sounds like an overkill to create a separate CSS file for each page, usually there isn't a lot of page-specific CSS.

Since you mentioned that your build process concatenates all your CSS into a single file, it doesn't matter in the production environment and is only a question of code organization. If it fits in your project architecture (you have per-page separation of other resources) then I guess it's OK, but personally it'd go with a more coarse-grained division, for example as Daniel Fischer suggested.

Just think if it's convenient to maintain many (tens? hundreds?) little css files (0 - 50 lines each?) in your case.

having unique css file for each page (using a global file too) is a good practice?

2 Answers2