Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS OOCSS – Spacing between items

  • This topic is empty.
Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • #42189
    joren
    Participant

    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/V6Vueohttp://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?

    #122013
    Billy
    Participant

    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:

    p:first-of-type {
    margin-top: your_value_here;
    }
    #122016
    uneart
    Member

    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](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.

    #122021
    Paulie_D
    Member

    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.

    #122023
    uneart
    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.

    #122024
    Paulie_D
    Member

    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.

    #122025
    uneart
    Member

    Would 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.

    #122026
    Paulie_D
    Member

    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

    article header,
    article p {
    padding:0 5%;
    }

    would be better.

    #122027
    uneart
    Member

    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.

    #122028
    Paulie_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.

    #122030
    Billy
    Participant

    As 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.

    #122034
    uneart
    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.

    #122377
    joren
    Participant

    Thanks, I will go with Paulie’s solution. But I’ll add the child selector to it.

    article > header, article > p {padding: 0 2em;}

Viewing 13 posts - 1 through 13 (of 13 total)
  • The forum ‘CSS’ is closed to new topics and replies.