22

I am building a personal homepage. I have 4 HTML pages and only one CSS sheet linked for all of the pages. That is, inside a single CSS file I have set up layout for all different pages. [In fact, each page has pretty much the same layout, only the contents and their style looks different. And my website isnt that advance.]

Is it a good practice? Or I should create separate CSS for each page?

An example of that what I have done:

page-1.html:

<link rel="stylesheet" type="text/css" href="design.css">

page-2.html:

<link rel="stylesheet" type="text/css" href="design.css">

design.css:

/*
.......
*/
Esha
  • 435
  • 2
  • 5
  • 12
  • 3
    For small websites, I think one CSS file could be enough for multiple HTML pages. But for larger ones, you can consider using multiple CSS files as it could help your web site to be more modular and well-structured. But from performance point of view, for each HTML external objects (e.g. JS, CSS, images, ... files), an extra HTTP transaction is needed in [non-persistent HTTP mode](http://en.wikipedia.org/wiki/HTTP_persistent_connection). But this is not considered to be high-impact. – frogatto May 31 '15 at 13:42
  • 1
    Possible duplicate of [Single huge .css file vs. multiple smaller specific .css files?](https://stackoverflow.com/questions/2336302/single-huge-css-file-vs-multiple-smaller-specific-css-files) – Declan McKenna Jun 17 '19 at 07:21

6 Answers6

17

Just have 1 css file for something so small. When you get into building larger sites you can split your style sheets up into modules.

Have a read through the Scalable and Modular Architecture for CSS approach as it's a solid way of thinking before you get to a level where you can build out your own css architecture.

Ben Nieting
  • 1,360
  • 2
  • 14
  • 23
Joshua Kelly
  • 1,023
  • 8
  • 12
12

Your example shows you using one design.css file for your entire website.

Generally, it is better to have one single .css file containing data for all pages for 2 reasons:

  1. You will allow browsers to cache .css files thus resulting in faster loading times;
  2. It will ease the maintenance process.

I would advise you, if you really want to divide .css in separate blocks to use CSS' @import to divide blocks of code f.e form styles and so on.

Cristian D
  • 673
  • 5
  • 21
  • 1
    Huh? `@import` will normally result in multiple requests, not a Good Thing. –  May 31 '15 at 13:59
  • It makes maintenance easier and allows all styles to be imported from one file. If a project becomes bigger it is advisable to split .css files into chunks, it is the same as having multiple tags for .css files in one page. Such thing is sometimes necessary, try running a performance report on websites like Facebook, Chrome tells me Facebook is terrible at this chapter. – Cristian D May 31 '15 at 14:12
  • 1
    You would not go to production with a css file with a load of imports though. This is actually poor advice. It makes maintenance easier during development but if used in production, @torazaburo is right in regards to the multiple http requests it would create. – Joshua Kelly Jun 02 '15 at 05:21
3

It's a good practice. As you said that

In fact, each page has pretty much the same layout, only the contents and their style looks different. And my website isnt that advance.

So keep just one CSS file. Reasons:

  1. It's easy for browsers to keep the cache
  2. It's better for maintenance, as you have all your design rules in just one place.
  3. As your project is small, the CSS file is not so big at all.

If you want to separate the files for organizational reasons, I will suggest you to read about CSS Preprocessors like Less or Sass. With them you can set your styles in separated files and join all of them before the releasing.

Dinei
  • 4,494
  • 4
  • 36
  • 60
2

There's not universal best practice for doing it. Generally for large projects, it is recommended to separate css among multiple files for debugging and maintenance during development. As your personal website doesn't seem too complicated, it doesn't seem reasonable to separate them out. This type of question has already been answered.

Single huge .css file vs. multiple smaller specific .css files?

One Stylesheet Per Page!

Community
  • 1
  • 1
Sarit Adhikari
  • 1,344
  • 2
  • 16
  • 28
2

you should keep only one css file. Let me tell you in simple one line, once your website loads in client web browser the static resource can be cached that helped your website to boost and number of web request can be reduce when user browse multiple pages of your website.

Kaushik Thanki
  • 3,334
  • 3
  • 23
  • 50
2

I would recommend you use SCSS or LESS. These pre-compilers will allow you to use valid CSS if you do not want to use the fancy syntax. They will allow you to modularise your code and then com