CODEWITHSUNDEEP
htmlcssweb
Esha
Esha

Reputation: 465

Is it good idea to make separate CSS file for each HTML page?

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:

/*
.......
*/

Upvotes: 25

Views: 77954

Answers (6)

Joshua Kelly
Joshua Kelly

Reputation: 1063

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.

Upvotes: 19

user10889007
user10889007

Reputation:

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

Upvotes: 2

Kaushik Thanki
Kaushik Thanki

Reputation: 3510

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.

Upvotes: 3

Dinei
Dinei

Reputation: 5414

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.

Upvotes: 3

Sarit Adhikari
Sarit Adhikari

Reputation: 1402

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!

Upvotes: 2

Cristian D
Cristian D

Reputation: 691

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.

Upvotes: 12

Related Questions