I am new to CSS and have created a web page with a menu, rounded corners and other elements. I was wonder if there is an advantage/disadvantage to put each element in its own external file and link it to the HTML. My thought is once an element is finished having its own file will make it easy to only edit one element at a time. Any suggestions would be appreciated. Thanks... Ronnie
Tek-Tips is the largest IT community on the Internet today!
Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!
-
Congratulations Mike Lewis on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!
Multiple External CSS Files 3
- Thread starter k4ghg
- Start date
-
1
- #2
southbeach
Programmer
Think of it from an IO point of view, the fewer times you go to the server the faster your load will be.
That said, I group them based on targeted application. In other words, I keep three CSS files
1) For <div>
2) For <table>
3) For <form>
If there aren't too many of them, I keep them in a single file. It makes no sense to have too many files and say that it will be easier to maintain ...
In the end, there is not right nor wrong as far as which way you go. As a long time developer, I have found that programmers are creatures of habits and once we define our comfort zone, it is hard to break away from it.
Regards,
--
SouthBeach
The good thing about not knowing is the opportunity to learn - Yours truly, 2008.
That said, I group them based on targeted application. In other words, I keep three CSS files
1) For <div>
2) For <table>
3) For <form>
If there aren't too many of them, I keep them in a single file. It makes no sense to have too many files and say that it will be easier to maintain ...
In the end, there is not right nor wrong as far as which way you go. As a long time developer, I have found that programmers are creatures of habits and once we define our comfort zone, it is hard to break away from it.
Regards,
--
SouthBeach
The good thing about not knowing is the opportunity to learn - Yours truly, 2008.
-
1
- #3
BigRed1212
Technical User
I've seen where the structure elements (divs, spans, lists, etc) are in one file and the typography elements (font-weight, font-family, text-decoration, etc) are in another.
My problem with that is that if I am workig on something like a list I am using for navigation then most of the time some of what I need is in one file and some of what I need is in another and I find that to be a PITA.
I just put everything in sections in one big file so I don't have to junmp around. I agree with the creature of habit comment.
My problem with that is that if I am workig on something like a list I am using for navigation then most of the time some of what I need is in one file and some of what I need is in another and I find that to be a PITA.
I just put everything in sections in one big file so I don't have to junmp around. I agree with the creature of habit comment.
- Thread starter
- #4
southbeach
Programmer
Just keep the shots between programs to a minimum and you will be fine. ![[wink]](/data/assets/smilies/wink.gif "[wink] [wink]")
Talking of which, I have noticed that two things I normally do are remove my watch and my wallet and put then in a drawer. The wallet because it bothers me to seat on it and my watch because it bugs the heck out of me when typing.
And there is the high volume of water and ice-tea or lemonade I drink (down from coffee and coke). I attribute this change to age - I am not that twenty something young man any more.
--
SouthBeach
The good thing about not knowing is the opportunity to learn - Yours truly, 2008.
Talking of which, I have noticed that two things I normally do are remove my watch and my wallet and put then in a drawer. The wallet because it bothers me to seat on it and my watch because it bugs the heck out of me when typing.
And there is the high volume of water and ice-tea or lemonade I drink (down from coffee and coke). I attribute this change to age - I am not that twenty something young man any more.
--
SouthBeach
The good thing about not knowing is the opportunity to learn - Yours truly, 2008.
TheOctagon
Programmer
I find that having a layout stylesheet is advantageous some of the time; however, when using descendant selectors (e.g. div#id div.class h1 {..}), as I frequently do, it helps to have the layout styles included alongside your other selectors for quick reference. You could argue that your XHTML would provide ample reference for parent/child groupings as well. In the end, I recommend keeping it as simple as possible to facilitate easy editing.
- Thread starter
- #7
Thanks... I tryed several of the ideas and the approach that seems to be working is to include all my style codes in the header. After I am satified that the style is debuged and meets my needs I move it into its own css file. My origional problem was going through too much code to correct/change a property. After its moved to the css file I don't touch it again. Thanks again Ronnie
-
1
- #8
Ascalonian
Programmer
Mike, yes... and no. I read High Performance Websites which was written by the Yahoo guy who created that site; and I agree largely with what he has to say on most issues.
However, I would argue that typography should be separate from layout for two reasons. The typography should be for all media (except aural/speech), the layout is only for screen media. Your print style sheet shouldn't duplicate your typography (DRY - Don't Repeat Yourself) and shouldn't have to overwrite all your screen layout (why do something in CSS, just to have undo it in the print CSS).
The performance hit of three style sheets for a whole site (i.e. cached on first page load) are negligible if sane CSS rules are used, CSS is sent GZiped, far future expiration dates are set and the CSS scripts are "minifyed".
However, I would argue that typography should be separate from layout for two reasons. The typography should be for all media (except aural/speech), the layout is only for screen media. Your print style sheet shouldn't duplicate your typography (DRY - Don't Repeat Yourself) and shouldn't have to overwrite all your screen layout (why do something in CSS, just to have undo it in the print CSS).
The performance hit of three style sheets for a whole site (i.e. cached on first page load) are negligible if sane CSS rules are used, CSS is sent GZiped, far future expiration dates are set and the CSS scripts are "minifyed".
- Status
Similar threads