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)

Answer 1

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).