24 replies [Last post]
Deuce
Deuce's picture
Offline
Guru
Las Vegas, NV
Last seen: 1 year 17 weeks ago
Las Vegas, NV
Timezone: GMT-5
Joined: 2005-11-20
Posts: 4422
Points: 1841

Moved from http://csscreator.com/node/34402

gary.turner wrote:

I think a global reset is a bad idea anyway, but that's an argument for another day.

Can't we just have it today?
I'm kind of curious as to your reasoning of it being bad.

all » http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph

CupidsToejam
CupidsToejam's picture
Offline
Guru
Florida
Last seen: 9 weeks 6 days ago
Florida
Timezone: GMT-4
Joined: 2008-08-15
Posts: 2636
Points: 1554

I too am curious

I too am curious :?

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 32 weeks 23 hours ago
London
Joined: 2004-06-06
Posts: 15650
Points: 2788

And where did Gary state

And where did Gary state this?

A longish while back when this was a fairly newish concept some of us did advocate it strongly (I was one of them), believing it did indeed help in evening browsers defaults out, then people noticed problems with certain elements within forms if the universal selector was used to remove all margins and padding, a while later Meyer came along with his detailed study on the subject and everyone started to use his example as convoluted as it is.

Question is is it really necessary to clear out defaults, what real problems cross browser are caused ? I now would not advocate it and believe that one simply should pay attention to these matters at the time required, there are no major problems cross browser , and zeroing ul is a not necessary those differences in padding and margin used to indent produce the same results visually, if one is need a ul li for navigation then deal with these properties at the time ; it's pointless clearing these properties generically a ul is meant to be for bulleted lists, if you are dealing with dynamic sites and CMS driven sections you can find that a ul li was asked for but when rendered it's sans bullets due to you removing padding and margins globally.

I Found issues with Meyers resets and was never very keen on the mass of elements being dealt with I also don't really agree with the other reset that I've seen (Yahoo?) I am starting to see these used more and more and just worry that all they achieve is to prevent an understanding of how one must control element properties where necessary.

I do still set certain elements to what I consider a default that I want throughout a site but I care less and less for what became known as the 'reset'

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 11 hours 6 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9164
Points: 3151

Global resets considered harmful

People have been "resetting" default values for quite a while to some degree or another. It was Meyer and his articles,
here,
here,
here,
and finally
here,
who served as the primary "name" source for the methodology.

Read the articles. You will find them full of unnecessary style rules; essentially make-work for yourself. Let's look at his final version of reset:

/* v1.0 | 20080212 */
 
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}
Let's dissect this first ruleset and selectors.

I'll grant you html and body usually have margin and padding zeroed.

What are applet and center even doing here? They're deprecated and should not be used.

"a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, div and span": What differences are you dealing with here? None of these have default padding or margin.

"dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td": For these that have or require margins, you need to set them to the required values; not to zero, then to another value. Font sizes are inherited, so no need to restate as 100%. (Yeah, I know about IE and tables, but in standards mode, tables do inherit.)

For inline boxes, baseline is the default, with a couple of exceptions I'll mention next. Table cells default to middle, and that or top is more commonly the desired alignment. So set it. Don't make it baseline, then have to redefine vertical alignment. What about sub and sup? They certainly don't default to baseline, nor will that be where you want them. Why screw around?

Font sizes and vertical margins for "h1, h2, h3, h4, h5, h6, p, blockquote, pre", etc. are likely not what you want by default. So set them. If you care enough about typography to not like the defaults, you will have worked out the scale you prefer, and will have computed the appropriate font-size, leading (line-height), and top and bottom margins to fit that scale. So set them.

body {
	line-height: 1;
}
This is just silly. Why make the text difficult to read. See the comments above about typographic scale.

ol, ul {
	list-style: none;
}
Huh? If you don't like what the browser wants to give you, specify what you do want. Even if you do specify, it doesn't mean a disc will look the same x-browser and x-platform, or even x-user.

blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
This is just wrong. It's dumbing down the markup to compensate for one braindead browser, IE<8. See Quotations in the html document.

/* remember to define focus styles! */
:focus {
	outline: 0;
}
Since this is an important accessibility feature, why kill it, only to turn around and resurrect it?

/* remember to highlight inserts somehow! */
ins {
	text-decoration: none;
}
del {
	text-decoration: line-through;
}
Well, duh!

/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: collapse;
	border-spacing: 0;
}
If that's what you want, fine. If not, why take an intermediary step?

Does that answer your question?

cheers,

gary

Unplanned code results in a tangled wad of brain-cramping confusion.

There are enough html & css demos and tutorials to be interesting. Please visit.

CupidsToejam
CupidsToejam's picture
Offline
Guru
Florida
Last seen: 9 weeks 6 days ago
Florida
Timezone: GMT-4
Joined: 2008-08-15
Posts: 2636
Points: 1554

gary.turner wrote: Does that

gary.turner wrote:

Does that answer your question?

Can you be more specific? I'm not sure I got that. Laughing out loud

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 11 hours 6 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9164
Points: 3151

CupidsToejam wrote:Can you

CupidsToejam wrote:

Can you be more specific? I'm not sure I got that. Laughing out loud

There's always the slow one in every class. Wink

cheers,

gary

Unplanned code results in a tangled wad of brain-cramping confusion.

There are enough html & css demos and tutorials to be interesting. Please visit.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 32 weeks 23 hours ago
London
Joined: 2004-06-06
Posts: 15650
Points: 2788

It's entirely too much and

It's entirely too much and overthought.

The original idea that some of us took to long before Mr Meyer came up with his approach was simply zeroing margins and padding, as Gary has bothered to illustrate a lot of the reset rulesets just don't make sense, but what irritates me is that people are taking to this approach blindly.

As I mentioned and Gary pointed out the list-style:none is particularly dumb as is removing the indents for the ul both these aspects are what a ul is meant to do, if you want to have it do something different then set that for the named element when required such as your ul#nav.

My approach when I was using the *{} approach was always to then set some actual defaults that I required generically for paragraphs and other like minded elements.

One thing I do note in the main group is that the inherit values seem to have been dropped, I remember that those caused problems with heading elements.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 11 hours 6 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9164
Points: 3151

Where's Irma

Well, Hugo, it's just you and I wearing our fingers to the bone due to la Douce's desire to argue. Well, that was last month, and I haven't seen hide nor hair of this agitator's contribution to his own thread.

cheers,

gary

Unplanned code results in a tangled wad of brain-cramping confusion.

There are enough html & css demos and tutorials to be interesting. Please visit.

Deuce
Deuce's picture
Offline
Guru
Las Vegas, NV
Last seen: 1 year 17 weeks ago
Las Vegas, NV
Timezone: GMT-5
Joined: 2005-11-20
Posts: 4422
Points: 1841

I didn't start this thread,

I didn't start this thread, someone else thought it would be fun to make it its own thread.
I agree with you on the premise of the unnecessary resets, but I still use a small scale reset on all of my sites. It's easier for me to set x-browser padding, margins, etc...

all » http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 32 weeks 23 hours ago
London
Joined: 2004-06-06
Posts: 15650
Points: 2788

whos playing loose and fast

:mad: whos playing loose and fast with moving / puning posts then? that moved from link wasn't there originally!

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 11 hours 6 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9164
Points: 3151

Oh, yeah? Well, you...

@Deuce: Yes you did, when you changed the subject. Smile It would have been inappropriate to continue with this subject in that thread.

@Hugo: Maybe the check crossed the dun in the mail. I added the link after fixing the shadow link on the original thread.

cheers,

gary

Unplanned code results in a tangled wad of brain-cramping confusion.

There are enough html & css demos and tutorials to be interesting. Please visit.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 11 hours 6 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9164
Points: 3151

Deuce wrote:... It's easier

Deuce wrote:

... It's easier for me to set x-browser padding, margins, etc...

That's the point, isn't it? Which padding, and which margins, and why? How does it help x-browser? What are the specific differences you're correcting?

cheers,

gary

Unplanned code results in a tangled wad of brain-cramping confusion.

There are enough html & css demos and tutorials to be interesting. Please visit.

Deuce
Deuce's picture
Offline
Guru
Las Vegas, NV
Last seen: 1 year 17 weeks ago
Las Vegas, NV
Timezone: GMT-5
Joined: 2005-11-20
Posts: 4422
Points: 1841

I reset with

I reset with this

html,body,p,div,img,h1,h2,h3,h4,li,ul,ol,dl,dd,dt,form,table,td,tr {
  margin:0;  
  padding:0;  
  border:0;  
  border-collapse:separate;  
  border-spacing:0;
}

It helps me to know that whatever padding or margin or border I set on anything is of my own doing and not that of what the browser thinks it ought to be doing.
You don't have to like it but it helps me Smile

all » http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 11 hours 6 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9164
Points: 3151

Clue-bat armed, anti-reset flying squads

That's fine. I'm not going to send the anti-reset police, armed with clue bats, to force you to abandon your template. (Sounds kinda kewl, though. Doesn't it? Laughing out loud)

I realize you may derive a certain peace of mind from the exercise, but that does not make resets any less redundant; make-work.

cheers,

gary

Unplanned code results in a tangled wad of brain-cramping confusion.

There are enough html & css demos and tutorials to be interesting. Please visit.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 32 weeks 23 hours ago
London
Joined: 2004-06-06
Posts: 15650
Points: 2788

But wouldn't the logic run

But wouldn't the logic run that if you required these properties to be of your own doing, as you state, then it implies that at some point you are setting the properties you require, and you would have to be as you have removed them in the first place; but if you are setting the properties you require is that not job done? is there any need for the original zeroing?

It's a worthy subject to debate, and having played with for it some time I know now which side of the argument I favour.

On a slight tangent and not necessarily in respect of actually resetting, I have a dislike of the take up these resets files are enjoying I have a lot of issues with these files leading people on simply due to their provenance alone.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 11 hours 6 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9164
Points: 3151

Hugo wrote:But wouldn't the

Hugo wrote:

But wouldn't the logic run that if you required these properties to be of your own doing, as you state, then it implies that at some point you are setting the properties you require, and you would have to be as you have removed them in the first place; but if you are setting the properties you require is that not job done? is there any need for the original zeroing?

If I parsed that correctly, yes and no.

As one who closely controls typographic rhythm and scale when I can, I set specific size, leading (line-height), and margin values for nearly all text related elements. I can find no sane reason to set some intermediate boilerplate value on the way to setting my own.

Quote:

It's a worthy subject to debate, and having played with for it some time I know now which side of the argument I favour.

On a slight tangent and not necessarily in respect of actually resetting, I have a dislike of the take up these resets files are enjoying I have a lot of issues with these files leading people on simply due to their provenance alone.

The mantra that it's to create cross-browser equality has been bandied about so much, it's accepted as fact; much as the idea that increasing CO₂ causes increasing global temperatures. While it is clear that temperature drives CO₂ levels rather than vice versa, no one will tell us which browsers are doing what differently so we might put it to the test.

One source of pro reset arguments even confuses IE's layout/margin-collapse bug with css defaults. Meyer's apologia simply makes no sense.

:shrug:

gary

Unplanned code results in a tangled wad of brain-cramping confusion.

There are enough html & css demos and tutorials to be interesting. Please visit.

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 1 year 16 hours ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

I gave up using a reset

I gave up using a reset about a year ago. I was already explicitly stating all my margins/padding etc on everything anyway so one day I just left out the reset and found it didn't change the way I worked in the slightest.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

Stomme poes
Stomme poes's picture
Offline
Elder
Netherlands
Last seen: 2 years 42 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2008-02-04
Posts: 1854
Points: 378

Now, a programmer once

Now, a programmer once chewed me out for having this

ul {
list-style: none;
}

saying that lists were supposed to have bullets, and if I was using a list for a menu then and only then should I remove them (specifically, using the id or class of that ul).
My argument back to him was if 99% or 100% of my lists were unbulletted, then why add classes on every single ul just to remove the bullets? I'd be adding classes on ul's who otherwise would get no names at all. So long as the majority of lists were unbulleted, it made sense to declare a global ul {list-style: none;} and put classes on the far and few who DID for whatever reason get bullets. If it was only the occasional menu getting bullets removed, then bulletted lists would be in the majority and the global would be undesirable.

Re resets in general: if they require an additional GET request for the poor user, they are too big (this Yahoo trend of having a stylesheet JUST for resets is causing global warming and the fall of the world economy). They should also be specific to the site you're building. This is how you prevent mentioning elements who don't even exist on your page.

But if I had a car I'd get a bumper sticker with "I ♥ My Reset" and drive it around Gary's neighbourhood.
For teh lawlz. : )

I'm no expert, but I fake one on teh Internets

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 32 weeks 23 hours ago
London
Joined: 2004-06-06
Posts: 15650
Points: 2788

Gary wrote:One source of pro

Gary wrote:

One source of pro reset arguments even confuses IE's layout/margin-collapse bug with css defaults. Meyer's apologia simply makes no sense.

That link is good example of just what I'm finding a little disturbing at the moment, on this particular subject and has been pointed out it's a little off key with that paragraph explanation to the extent that the author should really be dropped a line about it. As for Mr Meyer he has never made a whole lot of sense to me but then I have never been one to be led :shrug: too much that is Smile

Poes why would you add classes to every list that you needed to remove bullets from? A Navigation li is nearly always given some ID on the ul or at least has a parent such as #header or #sidebar one would simply use contextual selectors to remove the bullets for that given instance of that element. removing the bullets globally doesn't make sense and as I've pointed out elsewhere backfires when you are dealing with dynamic content and CMSissis and suddenly realise that a user wanted to add a set of bulleted list items through the cms editor only to find that numpty web developer thought it clever to remove them all! I know I have done it myself, I have been that numpty developer Smile

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 32 weeks 23 hours ago
London
Joined: 2004-06-06
Posts: 15650
Points: 2788

Quote:Hugo wrote: But

Quote:
Hugo wrote:

But wouldn't the logic run that if you required these properties to be of your own doing, as you state, then it implies that at some point you are setting the properties you require, and you would have to be as you have removed them in the first place; but if you are setting the properties you require is that not job done? is there any need for the original zeroing?

If I parsed that correctly, yes and no.

You did indeed parse that correctly yet it was aimed at Douce or rather those that might still think that resets serve a huge purpose. Tyssen also said much the same thing in saying he has essentially dropped resets as he was finding that he explicitly set these properties regardless where necessary so resets become redundant.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 1 year 47 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

I always understood

I always understood reset.css to be something you used in development to ensure that you didn't make any assumptions in your site development. I.e. your default spacing looked good because everything worked well with Firefox margins. When you view the page in another browser the spacing is all off.

So when the site was completed, you should be able to remove reset - just as Tyssen did - and notice no difference.

For a while I used reset.css (and its still in my base css directory) but I found as well as being not great for firebug, if I wasn't involved in the project to the end, reset.css would stay in. So now I do pretty much the same as you've been describing, zero some stuff on those elements that need it.

html,body,object,iframe,blockquote,legend,table {
  margin: 0; padding: 0; border: 0 none; outline: 0;
}

And looking at this more closely, some of the stuff is probably unnecessary. Everything else gets its own margins in the following few lines. Plus default styles and fonts for some other usual suspects like pre and "a img".

Stomme poes
Stomme poes's picture
Offline
Elder
Netherlands
Last seen: 2 years 42 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2008-02-04
Posts: 1854
Points: 378

Hugo wrote:removing the

Hugo wrote:

removing the bullets globally doesn't make sense and as I've pointed out elsewhere backfires when you are dealing with dynamic content and CMSissis and suddenly realise that a user wanted to add a set of bulleted list items through the cms editor only to find that numpty web developer thought it clever to remove them all! I know I have done it myself, I have been that numpty developer

I haven't yet had the pain that is working with a CMS (the day will come, I suppose, and I will rue and curse it), but if there's a possibility that someone would want bulletted lists, on a site with still 90%+ unbulletted, what's wrong with the single class that adds the bullets in? ul class="tehbullets"?

Even using the parents to remove bullets, I'd still get
#header ul, #sidebar ul, #main ul, #speciallist, #footer ul, #anyothersections ul {
list-style: none;
}

Which still has the problem of, if the list to be bulletted was in #main (likely), then you're still undoing a "global"... and if we were to leave #main ul out of the list above, then we'd have every list that appears in #main bulletted by default... and because the site (at least for now) is mostly unbulletted, we still need to now mention all those lists inside #main that are to be unbulletted.

If I ever had to build something that someone else was to manage using some sort of admin panel (someone who didn't know squat about code) I'd be writing a page so simple it would look like a child wrote it, because I'd be scared to use anything other than 3 page chunks, p's and divs. I don't consider the stuff I build to be delicate, but if you tell me someone's going to be mucking around in there, I feel like I've made a house of cards.

Maybe I have.

I'm no expert, but I fake one on teh Internets

Deuce
Deuce's picture
Offline
Guru
Las Vegas, NV
Last seen: 1 year 17 weeks ago
Las Vegas, NV
Timezone: GMT-5
Joined: 2005-11-20
Posts: 4422
Points: 1841

The issue you will run into

The issue you will run into with a global list-style:none is that when you do it in a CMS then your client will try to update a page and put in a list and there will be no bullets and they won't know what a class is from their a.... err... well, you get the point...

all » http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph

Stomme poes
Stomme poes's picture
Offline
Elder
Netherlands
Last seen: 2 years 42 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2008-02-04
Posts: 1854
Points: 378

Yeah, that's what Hugo was

Yeah, that's what Hugo was saying. I've never had to do it, but I'm guessing when you make something for someone else you should
-give every element an id or a class
-or multiple classes
-and explicitly state everything (multiple times)
-use very few different elements

Like I said, I'd be terrified to write something that someone who doesn't know anything is supposed to change. That's why templates are so huge-- they need to account for anything and everything some client somewhere might want to do.

I'm no expert, but I fake one on teh Internets

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 32 weeks 23 hours ago
London
Joined: 2004-06-06
Posts: 15650
Points: 2788

It's more likely that the

It's more likely that the bulleted list will appear without any token identifiers, unless you want to write some convoluted backend code to trap such an element and add a class to it but that's more trouble than it's worth I guess you could make a decision to output all cms markup within a specific block and then apply styles to that: #cmsBlock ul {list-style:dodecahedron;} it just makes more sense to leave things at their default, and adjust things where you have control; I have admittedly followed your method as well and provided a class to add bullets but it never felt correct, and in the above scenario didn't work anyway.

Where you are having to provide cms functionality and worse editors such as fckEditor or tinyMc you rapidly become very disheartened at attempting to retain any control over the site style, allowing editors like this in the hands of uneducated users is simply horrendous and makes a mockery of any attempts at producing clean code, we have spent ages trying all manner of methods to clean and shape editor output, but you start to restrict the user and they will moan, then when you have 200 odd users all with different ideas of how they think they would like their profile page looking you just want to cry give up and go home! Smile

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me