Not signed in (Sign In)
SkillShare - A place to discuss Web Standards and Web Design topics
Categories
Vanilla 1.1.9 is a product of Lussumo. More Information: Documentation, Community Support.
- Friends
-
Hi everyone, I'd tagged this topic on to another post but it got lost in the shuffle, so...
I'm working on a pretty large site with public, client, and admin areas. When organizing css for each area, I decided to take the styles from one sheet and use the @import method.
So on the public side, I call styles.css which calls public.css and global.css. The same goes (with their respective css files) for the client and admin sides.
Thing is... it seems really cumbersome and I fear there might be instances of overlap later on when someone edits a style but it's already covered in global.css or something like that. Make sense?
So now I'm thinking maybe I need to use < body id= for the three areas and then style from there. What do you think? -
I've worked with pretty large sites, and usually settle for the @import method... the key is writing documentation for developers, setting rules etc.
Using the <body id="myid"> method means having to load styles that are not necessary in other places. -
Thanks Alex,
By "setting rules" I assume you're talking about rules for modification? Or something else?
Also, for some reason I thought it logical to overlap some things... so if all pages' body padding is zero, I put that in the global.css.body {padding:0;}
Then since I want a background color for public, but not admin, I add this in public.css:body {background:#fc3;}
Is that okay to do? It made sense to me because I call global everywhere and then specify for some styles in their respective stylesheets... but I didn't know if that was a bad idea or not.
Thanks!
Rob -
-
CommentAuthoradjustafresh
- CommentTimeApr 5th 2006 edited
Hey Rob,
I think you're on the right track, and it's okay to do what you've descibed as long as the public.css file comes after the global.css file in your HTML.
I've done this 2 ways.
On thisiscable.com I included only the pertinent css files with each section. For instance: global.css (all pages), secondary.css (all subpages) and hdtv.css (specifically to style the HDTV section). This helps organize the styles in each section, and helps make editing styles a bit smoother by keeping the css files more segmented. It does make it harder to make global include files for the section of the HTML though...
On the upcoming redesign of e3insider.com (Coming soon), I've gone with the technique. This makes the only css files global.css and secondary.css for almost every page/section (not including the print.css file). WIthin the secondary.css file I specify common IDs by using the body ID example:
#name-of-section1 #header {
background: blue;
}
#name-of-section2 #header {
background: red;
}
The site isn't live yet, and I'm not 100% certain that I won't end up breaking out the css files into smaller ones for each section, but so far it's working pretty well. -
-
Thanks Scott -- good to hear. Those examples are exactly what I'm doing, and what I thought about doing, so it's good to know I'm not as clueless as I feel sometimes! :o)
I only ordered them correctly because of instinct (global > individual > page) so thanks for mentioning that. I may have messed that up in the future unknowingly.
Anyone else? -
PS -- thisiscable looks fantastic! Good job on that.
Rob -
Rob -
For what it's worth, since I'm deep into using PHP, I have established a convention where there's a global stylesheet and when I create a stylesheet with the same filename as the page (ex: home.php & home.css), it will be found and loaded after the global stylesheet. If you're interested, I'll share the simple code that does the check for load.
That's my 2 cents. :^{>
1 to 7 of 7