Mobile app version of vmapp.org
Login or Join
Ann8826881

: File Specific CSS. Inside HTML doc or as a seperate file? What is the preferred method for organizing CSS that is only used by a single HTML page. Should I put the CSS in: a section in

@Ann8826881

Posted in: #Css

What is the preferred method for organizing CSS that is only used by a single HTML page. Should I put the CSS in:


a section in the HTML doc?
a CSS file associated with the HTML doc? eg: contacts.html, contacts.css
a master CSS file and organize it into sections indicated with header comments.

10.04% popularity Vote Up Vote Down


Login to follow query

More posts by @Ann8826881

4 Comments

Sorted by latest first Latest Oldest Best

 

@Shakeerah822

The third option – a master CSS file organised into sections – is definitely the best option for maintenance and performance. While it may seem better to use a STYLE element on individual pages, it is a false economy. In isolation, it is quicker (at least, in the short-term), but STYLE elements are not individually cached, and must be reloaded with the HTML every time.

Also, I think that it is easier to manage your CSS when it's in one external file (or even a group of smaller, modular files), than it is to go rooting through your file system, hunting for the odd STYLE element here and inline style rule there. Personally, it helps me to create a more consistent look and feel across a website.

10% popularity Vote Up Vote Down


 

@Gretchen104

I'm assuming that there are other pages which use the master CSS file you mention. In that case I think the third option is best. I'm also assuming that this single HTML file also uses CSS from that master file.

The trouble with the first option is that it's not the way things are usually done, and so in the future when either you or someone else wants to change things it may take you/them a while to find out where the CSS is.

The advantage of the third option is if you want to change the way this contacts.html file looks you only have to go and look in one place - the master file. The CSS that applies to that page and others is there, and the CSS that applies only to that page is there. It also helps with performance because if visitors to your site have already visited the other pages then they have that file cached and they don't need to load it again.

10% popularity Vote Up Vote Down


 

@Moriarity557

Before answering this question, ask yourself a question, How do you centralise your codes? Is it based on type? or Is it based on modules / pages?

If it is based on types, it is better you centralise your codes in a particular folder of a single type only

css/
index.css
home.css
aboutus.css


Or if it is based on modules then better centralize in a single page / module.
Like

home.html (It will contain, markup, css and script that is related to home.html)
aboutus.html (..............

10% popularity Vote Up Vote Down


 

@Sarah324

If the CSS directives affect only one HTML document, it only makes sense to keep the directives in the document.

From a maintenance perspective, if the document's structure or content changes the CSS directives may need to change as well and, from a performance perspective, it does not make sense to force users to download directives for a single document when they visit other pages on the site.

10% popularity Vote Up Vote Down


Back to top | Use Dark Theme