I’m starting to learn OOCSS, and I don’t really know how to handle the space between the objects.
Here’s an example: [blog post](http://bit.ly/V6Vueo “http://bit.ly/V6Vueo”)
As you can see, there is padding between de title and the box, but not between the image and the box. Know I just give padding to the elements inside off the box, but it doesn’t feel right. What if i want to use those elements in another place, with less padding on the left and right…
I have the same problem with the date under the title. If I remove the date, the margin is gone. I could give a margin top to the first paragraph, or work with wrapper divs.
How do you solve this?
If you want to use the padding in another place but with different values, you’ll need to separate the padding from the object.
As to removing the date… do you _want_ to remove it? If so, I would add a margin to the top paragraph, like so:
Actually, I don’t think there is.
I’d rather add a couple of styles for the internal elements than (if you will pardon the expression) **hack** the layout with a margin-fix.
That said, if we are to be consistent then it seems likely that text/element padding would be a ‘global’ setting.
Yes you’re right, I see the performance problem with a * selector. I would use the > selector for your example, though. That would prevent other elements in deeper in there from getting a padding.
I still hope there is any better way to give all elements a space left and right by default and then exclude the image from that.
>I would use the > selector for your example, though. That would prevent other elements in deeper in there from getting a padding.
I see your point but I would anticipate that ‘per article’ there are only a limited number of elements expected.
Clearly if you have different article types then extra classes might be required but again, I would still expect all articles to be roughly the same.
>I still hope there is any better way to give all elements a space left and right by default and then exclude the image from that.
Yeah but I’m not seeing one at the moment.
> Sadly though, this uses the * selector, although I don’t think that the performance difference should be too big really.
Cool solution, but I think that might might only work for smaller sites. Cause on a really heavy site with thousands of elements, the * selector would be checked on every single one of them which could be a problem.
You must be logged in to reply to this topic.
*May or may not contain any actual "CSS" or "Tricks".