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.
As for the date element I would maybe place the heading and the date both within a
<header class="article-header">
element. Then you can just apply the margin to that one without worrying about the markup in there.
I had the other padding problem myself a while ago. I ended up fixing it with some weird negative margin like here. But that is by far not a good solution because it will break if you change e.g. the padding.
I really hope someone can bring some light into this.
Can you provide us with link to the actual site or create a use case in Codepen as it will let us see the HTML & CSS as a group so we can focus on the problem.
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.
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.
Hi,
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
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:
As for the date element I would maybe place the heading and the date both within a
element. Then you can just apply the margin to that one without worrying about the markup in there.
I had the other padding problem myself a while ago. I ended up fixing it with some weird negative margin like here. But that is by far not a good solution because it will break if you change e.g. the padding.
I really hope someone can bring some light into this.
Can you provide us with link to the actual site or create a use case in Codepen as it will let us see the HTML & CSS as a group so we can focus on the problem.
@Paulie_D I just posted one that immitates his picture ;) Is has weird margin fix in it already. But I'm sure there is a better way.
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.
http://codepen.io/Paulie-D/pen/Khmko
That said, if we are to be consistent then it seems likely that text/element padding would be a 'global' setting.
Would it maybe be a solution to just have
or do you think the * selector could cause problems?
EDIT: The * selector might be too slow.
I've updated my pen slightly.
I wouldn't use a universal selector (*) it's incredibly slow as CSS is read right to left.
I would assume that all 'articles' are going for a consistent look so
would be better.
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 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.
Yeah but I'm not seeing one at the moment.
As to getting them all to have padding except for the img, you can use the
:not()selector: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.
Thanks, I will go with Paulie's solution. But I'll add the child selector to it.