- This topic is empty.
-
AuthorPosts
-
January 23, 2013 at 9:48 am #42189
joren
ParticipantHi,
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 #122013Billy
ParticipantIf 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:
p:first-of-type {
margin-top: your_value_here;
}January 23, 2013 at 10:48 am #122016uneart
MemberAs 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](http://codepen.io/uneart/pen/vFAxo). 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.
January 23, 2013 at 11:03 am #122021Paulie_D
MemberCan 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.
January 23, 2013 at 11:08 am #122023uneart
Member@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.
January 23, 2013 at 11:24 am #122024Paulie_D
MemberActually, 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.
January 23, 2013 at 11:31 am #122025uneart
MemberWould it maybe be a solution to just have
.art-container > * {
padding: 0 20px;
}
.art-container > .art-full-width {
padding: 0;
}or do you think the * selector could cause problems?
EDIT: The * selector might be too slow.
January 23, 2013 at 11:36 am #122026Paulie_D
MemberI’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
article header,
article p {
padding:0 5%;
}would be better.
January 23, 2013 at 11:41 am #122027uneart
MemberYes 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 #122028Paulie_D
Member>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:02 pm #122030Billy
ParticipantAs to getting them all to have padding except for the img, you can use the `:not()` selector:
article > *:not(img) {
padding: 0 1em;
}Sadly though, this uses the `*` selector, although I don’t think that the performance difference should be too big really.
January 23, 2013 at 12:09 pm #122034uneart
Member> 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.
January 26, 2013 at 5:36 am #122377joren
ParticipantThanks, I will go with Paulie’s solution. But I’ll add the child selector to it.
article > header, article > p {padding: 0 2em;}
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.