4 replies [Last post]
aimeea
Offline
newbie
Last seen: 14 years 24 weeks ago
Joined: 2006-06-13
Posts: 2
Points: 0

I don't really consider myself new to CSS but I've noticed on some design sites that have example CSS, they will create 2 definitions for the same thing. Is there a reason for this?

Example:

html,body {
	margin: 0;
	padding: 0;
}

html,body {
	height: 100%;

}

What is the point in this? I can add height: 100% to the first one and it works just the same and it doesn't make it seem any more organized to split them up.

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 6 years 6 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

2 definitions for the same thing, why?

Well for the example above I'd actually combine it like this:

 html, body {
   margin: 0;
   padding: 0;
   height: 100%;
}

so if you're asking why they haven't done it that way, I couldn't tell you. Seeing the whole example might shed more light on it though.

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

aimeea
Offline
newbie
Last seen: 14 years 24 weeks ago
Joined: 2006-06-13
Posts: 2
Points: 0

2 definitions for the same thing, why?

html,body {
	margin: 0;
	padding: 0;
}

html,body {
	height: 100%;

}

div {
	border: 10px solid #000000;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

div#test {
	height: 100%;
}

div#nested {
	height: 50%;
}

was the full CSS code. It was a makeshift solution for giving a DIV 100% height. I don't really think putting the height: 100% in a separate definition adds anything to it. I've seen other examples of CSS code like this but I can't think of any other examples off the top of my head.

My company designs a web app in which I had to redesign a year ago and the stylesheet included in it had multiple definitions sort of the same thing as this. I was a bit confused then too Sad

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 6 years 6 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

2 definitions for the same thing, why?

Maybe the second one was copied from elsewhere and the author just forgot/was too lazy to combine them?

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

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 35 weeks 5 days ago
Joined: 2004-06-30
Posts: 9668
Points: 801

2 definitions for the same thing, why?

In this case, it makes no sense as it's just repetition.

html,body {
   margin: 0;
   padding: 0;
}

body {
   height: 100%;

} 

would make sense though; "apply no margins and padding to html and body, and give body ONLY a height of 100%".

Verschwindende wrote:
  • CSS doesn't make pies