OOCSS – Spacing between items
# January 23, 2013 at 9:48 am
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?# January 23, 2013 at 10:11 am
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:
}# January 23, 2013 at 11:24 am
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.# January 23, 2013 at 11:41 am
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.# January 23, 2013 at 11:48 am
>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.# January 23, 2013 at 12:09 pm
> 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.