CSS formatting/organization ideas

[TechBoyJK]

Hi Guys,

I'm working on a design and I want users to be able to select different style sheets for the color of the site.

Many of the elements declared in the style sheet have both color and sizing information, and the only thing the different style sheets will change is the color.

Because of the development, the CSS doc is currently kind of messy, and I'm organizing it (it's about 1500 lines).

I'm thinking about splitting the CSS doc into two parts.

1. Master document; defines elements/sizing/position, etc
2. Color document; defines the color of the elements

This way, if I need to edit the colors, or make a new option for a color scheme, I only have to edit the color doc.

Thoughts?

I would basically take this

body 
	{
	background: #FFF; color: #000000;
	font: .8em arial, helvetica, sans-serif;
	margin: auto; 
	}

and make it this

body 
	{
	font: .8em arial, helvetica, sans-serif;
	margin: auto; 
	}

body 
	{
	background: #FFF; color: #000000;
	}

 

[Tweak155]

So you want to put the 2 body elements in different CSS docs from what I gather (I.E style.css and color.css)? I can't see why you couldn't but you'll need two include lines on your web pages, which isn't a big deal IMO.

 

[Markbnj]

That's the whole idea of cascading styles, so yeah, perfectly reasonable way to solve the problem.

 

[TechBoyJK]

Another question.. is there a way to declare the font type I want to use throughout the site, just once? The way I have it now.. if I remove the 'arial, helvetica, sans-serif' from the P tag it doesn't keep. I want everything in the stylesheet to have font: arial, helvetica, sans-serif

Is it resetting the font attribute completely because I'm declaring it again? If I just want the size to be different, should I use font-size instead of font?

body 
	{
	background: #FFF; color: #000000;
	font: .8em arial, helvetica, sans-serif;
	margin: auto; 
	}

p
	{
	color: #000000;
	margin: 0 0 1em;
	font: .85em arial, helvetica, sans-serif;
	}

versus

body 
	{
	background: #FFF; color: #000000;
	font: .8em arial, helvetica, sans-serif;
	margin: auto; 
	}

p
	{
	color: #000000;
	margin: 0 0 1em;
	font: .85em;
	}

 

[bhanson]

Another question.. is there a way to declare the font type I want to use throughout the site, just once? The way I have it now.. if I remove the 'arial, helvetica, sans-serif' from the P tag it doesn't keep. I want everything in the stylesheet to have font: arial, helvetica, sans-serif

Is it resetting the font attribute completely because I'm declaring it again? If I just want the size to be different, should I use font-size instead of font?

body 
	{
	background: #FFF; color: #000000;
	font: .8em arial, helvetica, sans-serif;
	margin: auto; 
	}

p
	{
	color: #000000;
	margin: 0 0 1em;
	font: .85em arial, helvetica, sans-serif;
	}

versus

body 
	{
	background: #FFF; color: #000000;
	font: .8em arial, helvetica, sans-serif;
	margin: auto; 
	}

p
	{
	color: #000000;
	margin: 0 0 1em;
	font: .85em;
	}

I'd use `font-size` if the only thing you desire to change is the size.

Likewise I'd prefer to use `margin-bottom: 1em` as I think it is more precise.

I don't know if you've discovered it yet, but if you're writing CSS from scratch the global whitespace reset will save some headaches.

 

[TechBoyJK]

I don't know if you've discovered it yet, but if you're writing CSS from scratch the global whitespace reset will save some headaches.

so.. just put

* {
	padding:0;
	margin:0;
}

at the start of the style sheet?

 

[bhanson]

so.. just put

* {
	padding:0;
	margin:0;
}

at the start of the style sheet?

Yep. It will remove all spacing from every element.

The problem is that every browser has different default values for padding and margin. You can override these but it's incredibly easy to forget something and you'll end up with inconsistency between browsers.

Starting from a reset helps with browser compatibility.

 

[TechBoyJK]

Yep. It will remove all spacing from every element.

The problem is that every browser has different default values for padding and margin. You can override these but it's incredibly easy to forget something and you'll end up with inconsistency between browsers.

Starting from a reset helps with browser compatibility.

thanks.. wow.. tossing that in there really jacked up my site. I'm going to comment that back out for now, but I'll probably work on readjusting everything tomorrow.