- This topic is empty.
-
AuthorPosts
-
January 23, 2013 at 9:48 am #42189jorenParticipant
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](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 #122013BillyParticipantIf 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 #122016uneartMemberAs 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_DMemberCan 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 #122023uneartMember@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_DMemberActually, 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 #122025uneartMemberWould 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_DMemberI’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 #122027uneartMemberYes 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_DMember>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 #122030BillyParticipantAs 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 #122034uneartMember> 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 #122377jorenParticipantThanks, 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.