Hi Everybody, I've been using the minimal reset when I start writing my style sheets for some time now.
* { padding: 0; margin: 0; }
I was wondering if this is the best way to do this, I found this article http://perishablepress.com/press/2007/10/23/a-killer-collection-of-global-css-reset-styles/and after reading it, I am worst than before reading it. Can you guys tell me what is the best practice in this case.
Thanks in advance.
Hola, Among pro web
Hola,
Among pro web developers you will find big arguments about reset CSS. No agreement at all.
I think the best argument for using it is that you have a better chance of getting compatibility across browsers. A good thing, in principle.
However, as a trade-off you will generally have to write more CSS code... since everything is zeroed out, you'll have to define many settings from scratch. You'll also see funny things, such as any form will usually look awful without a lot of new styling.
I'm actually with you - if I use a reset at all (and I often don't), I will use something similar to what you have. I also find that I only code for about 4 or 5 browsers(!). This will cover maybe 95% of what's out there. I like to check the browser statistics on w3schools.com every so often. Every time I look, horrible IE6 is a little closer to death.
I'm not being paid enough, nor do I have timeframes that allow me to make sure that my code works in every Linux browser, IE5 and earlier, all versions of Opera, and so on. Possibly the biggest reason I don't use resets is that I'm usually working with someone else's code, and it's often horrible. I did work on a site that already had Meyer's reset last summer, and it was intriguing to handle it - the previous coder was skilled, so it went pretty well.
The professionals that are arguing about this may be the geniuses working for the highest-paying firms, and actually are asked to make this super-compatibility code, and have time to do it. I may be mistaken, but I think that the top CSS coders do like to use one of those resets you pointed out, or one they've made themselves. If they use it all the time, they'll get so good at it, that it may save them time!
So maybe an idealist or top performer might tend to choose reset CSS. That's not me. Yet.
And I'd bet that some of the stuff I've said above will bother someone. Oh well. It's a controversial subject.
!Saludos a Costa Rica!
Ciao, Dave
There are many ways to cook
There are many ways to cook an egg
Personally I don't usually use a reset stylesheet, I prefer to adjust the browser defaults where and when needed.
If I was going to use one I would tend to be more selective about which rules I reset.
Instead of reseting values to 0 why not look at setting default values for elements.
/* simplified example*/ p, ul, dl{margin:.5em;}
That way instead of wiping out margins etc for those elements you are setting a default for all browsers to use.
You don't need to reset to zero then add a value back later.
We currently had a
We currently had a conversation about this, which you can see at http://csscreator.com/node/34411
Thanks, Deuce, for the
Thanks, Deuce, for the reminder. As I reread that thread, the only change I would make to my comments, would be to be more adamant about the total waste of time that such resets are.
cheers,
gary
Thanks my men! Costa Rica
Thanks my men! Costa Rica Rocks, hahaha, thanks all of you for your comments!
Gary of course refers to
Gary of course refers to wishing that he were more like that late punk era singer Adam Ant not sure the relevance to the thread though
mpoveda, there is something
mpoveda,
there is something you must watch out for:
* { padding: 0; }
If you have any forms on your site, you don't want this. You can leave the * {margin: 0;} just fine, but the paddings removed from form elements can't always be added back in. Clicking a submit doesn't show the usual punched-in look, selects in some browsers will let the arrow thingie cover the text inside, and sometimes checkboxes and radios can look kinda goofy.
I'm a resetter, but refuse to touch that steaming pile Meyer made, and I'm more careful about my padding than I used to be.
Thanks Stomme poes,... so
Thanks Stomme poes,... so maybe selecting certain elements to reset would be better than using the wildcard star selector (*). For example, something like this:
div, p, ul, li, span, h1, h2, h3, h4, h5, h6 { margin: 0; padding: 0; }
? What do you think, how do you reset?
Did you actually bother to
Did you actually bother to read the link left by duece?
There are a few of us that have been using this process from the early days before it was widely known about or used and long before Meyer came along with his interpretation. Have a read of the thread and see what a few of us feel about using this technique now.
If you feel you really have reset because everyone else is then yes be selective but it really is a pointless exercise and is beginning to become a mark of those that follow blindly, do not use Meyers full implementation it has problems, which I'm interested to see if he ever spots.
Anyway I'm sure Poes will fill you in further on how she uses resets, if you need to follow something, and Poes does appear to understood the basic flaws inherent in the various approaches.
Adam Ant and other maunderings
@Hugo: Puh-leeze! Adamant equals Adam Ant? I am not the one with punctuation, capitalization, and runtogetherwords issues.
@mpoveda: Please consider what it is you're doing. Div, span, and li have no default padding or margin. What is the point of zeroing those properties?
Ul has top and bottom margins plus indentation. What about ol, dl, and dd? Why ignore them? If you want to determine the top/bottom margins, then do so. There is no benefit to be gained by setting them to zero first. Removing the indentation on ul or ol has a negative side effect; the list marker is located in that space, and will either be lost or will overlap adjacent elements. Different browsers do use different mechanisms for setting the indent, so normalization to either margin or padding is reasonable, but seldom necessary.
P and h1-6 all have default font-sizes and top and bottom margins. None have a default padding. Are you going to leave those margins at zero? I doubt it. Why add another layer to the cascade, one that brings nothing positive to the table?
cheers,
gary
gary.turner wrote: @mpoveda:
@mpoveda: Please consider what it is you're doing. Div, span, and li have no default padding or margin.
LI has default margins.
gary.turner wrote:@Hugo:
@Hugo: Puh-leeze! Adamant equals Adam Ant? I am not the one with punctuation, capitalization, and runtogetherwords issues.
it's just that I suddenly realised that his name was a play on words, only taken me twenty years to spot that
@mpoveda this how it ran with myself when I first started to use the original universal selector approach:
I set everything to zero, realised quickly that naturally I did in fact want margins and would be stating them rather often; as I always set a number of default global styles at the start of a stylesheet it made sense to therefore set a margin for all P tags, for all UL, etc thus I had a nice set of defaults that I knew every browser would now use and I would only have to adjust these values again for special circumstances and that worked well but it fairly quickly (or maybe not) dawn on me that having set these global default values there was in effect absolutely no point having set zero values right at the start, to what end?
Describe a set of global values for those elements that you know require margins and that suit the layout you are working with, that's job done! only then maybe having to re-adjust occasionally later on.
I think I got it now,
I think I got it now, really, why zeroing everything or some elements if later on I am going to give margins and/or paddings to those same elements.. it's true, its just that I start doing this, yes maybe following other people, and because as a starter, doing CSS layouts is kinda frustrating, to achieve cross-browser compatibility. But I understand know. Really thanks to all you guys for sharing. I will finish reading the link Deuce posted.
Chris..S wrote:gary.turner
@mpoveda: Please consider what it is you're doing. Div, span, and li have no default padding or margin.
LI has default margins.
In which browser(? Firefox specifies only the display property for li.
li { display: list-item; }
file:///path to Firefox/res/html.css
cheers,
gary
Hugo wrote: it's just that
it's just that I suddenly realised[sic--silly brit spelling] that his name was a play on words, only taken me twenty years to spot that
I wonder if he knew of the anagram?
cheers,
gary
I bet his manager Ana Gram
I bet his manager Ana Gram didn't! :blushing:
gary.turner wrote:Chris..S
@mpoveda: Please consider what it is you're doing. Div, span, and li have no default padding or margin.
LI has default margins.
In which browser(? Firefox specifies only the display property for li.
li { display: list-item; }
file:///path to Firefox/res/html.css
cheers,
gary
:bigoops:
I stand corrected.