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.
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.
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
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?
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%".