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: stackoverflow.com/questions/5425857/one-stylesheet-per-page and there stackoverflow.com/questions/2336302/… — Ray Cheng
– Ray Cheng, Commented Aug 14, 2012 at 22:01

Daniel Fischer · Accepted Answer · 2012-09-13 20:06:32Z

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

Dmitry Pashkevich · Accepted Answer · 2012-09-13 20:31:35Z

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.

Collectives™ on Stack Overflow

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

2 Answers 2

1 Comment

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Linked

Related