How to manage styles?

HTML & CSS
1

I have been building little “modules” (e.g. 3-column layout, top menu, main content area, etc.) for my website, since it is easier to get something smaller working.

However, the problem that I am starting to face is a handful of stylesheets that have some conflicting styles?! :eek:

How do you manage all of your styles - especially if they are in separate Style-Sheets - and avoid having “collisions” when you put things together?

(Yes, EricWatson, I re-installed Firebug and trying to use it, although I don’t care for it!) :nono:

I guess things aren’t too bad so far, because I try to apply styles to Child Elements (i.e. drill down and get really specific) but there are still some collisions.

I am wondering if part of the issue is that I didn’t think “globally” enough. Or is it okay to have lots of variants of the same element??

**My goal is to have a robust looking website with really streamlined and efficient HTML/CSS!! **

Thanks,

Debbie

2

Can you show one conflicting style or collision you are talking about? Maybe a slight organizational style may help.

I tend to have only one stylesheet if I am making the site from scratch. The only time I could see multiple stylesheets is if I needed a ton of special formatting for IE7/8, and supplied a print style.

3

Well, in pagelayout_2col.css I had this…


p{
	padding: 0em 2em 1em 2em;
}

and in article_summaries.css I had this…


.summary p {
		overflow: hidden;
		margin: 0 0 1em 0;
}

And I had to add padding: 0; to my second style sheet to override the first paragraph style.

(Sorry, but inheritance is kind of a drag sometimes…) :rolleyes:

Debbie

4

Well the problem with the separate stylesheets are the order in which you link them affects the order the styles are used. Since you defined p to have a padding, all p tags will have that padding unless you explicitly set new padding(s) for paragraphs found in id/classes.

5

Unless you are going to use something without fail in the same way all through the site then don’t set it globally.

e.g.


[LEFT]p[COLOR=#66CC66]{[/COLOR]

    [COLOR=#000066]padding[/COLOR]: [COLOR=#993333]0em[/COLOR] [COLOR=#993333]2em[/COLOR] [COLOR=#993333]1em[/COLOR] [COLOR=#993333]2em[/COLOR];

[COLOR=#66CC66]}[/COLOR]
[/LEFT]

It is very unlikely that you are going to want that padding on the p element everywhere in your site. However it may be that a consistent bottom margin is useful.


p{margin:0 0 .7em}

Then for specific areas you can set padding as required via content of the parent class as you did for .summary.

As another example I usually do this for all uls to reset them.


ul{
margin:0;
padding:0;
list-style:none;
}

Most times that will be exactly what i want but for the odd exceptions you can style them with a class or by context. On the other hand if you are expecting loads of bulletted lists around your site then you wouldn’t use that approach from the start.

You have to weigh up the pros and cons from the start and use what is most efficient for your site. If you find you are changing an elements property every single time then you probably didn’t need to define it globally like that from the start.

Avoid too many stylesheets as that just makes things harder to manage. For a small site one stylesheet is enough but you can still keep the code logical and organised into sections within that one file.

6

Okay, Paul, your advice makes sense.

As it turns out, when I merged my components together, other than two little hiccups - one mentioned in this thread - I really didn’t have any collisions. Although as things grow more complex, I’m sure it will happen.

By taking your and Rayzur’s suggestions, hopefully I’ll follow good CSS coding practices and won’t have any big surprises!

As far as having only one style-sheet, I’m not sure I agree there. I tend to code in a very “modular” way, and to me the more you can break things up, the better. (Of course, my competing goal is to SIMPLIFY my code as much as possible, so the more I do that the less I need to break things out!)

Thanks,

Debbie

7

Why don’t you put big [strike]ugly[/strike] code blocks in your CSS?


/********************
** Header 
***********************/
blah

/***********************
** Content
************************/
...