Covering every css styling permutation and combination [closed]

Question

As it currently stands, this question is not a good fit for our Q&A format. We expect answers to be supported by facts, references, or expertise, but this question will likely solicit debate, arguments, polling, or extended discussion. If you feel that this question can be improved and possibly reopened, visit the help center for guidance.

Closed 8 years ago.

I am building a website theme for distribution and I just uploaded a unit test to see how things looked. One of the things were nested blockquotes which in my case gave me a very large margin at the bottom. I was able to remedy this by styling

blockquote blockquote {
margin-bottom:0;
}

... so I solved that problem, but it brought out another ... I realised that if someone was to add some content after the second blockquote then the margins would be out. I am sure I could style this but then what if someone was to put a header, pre, code etc in the same position? ... and this scenario doesn't just manifest itself in blockquote ... or just in comments.

My question is this: when building themes for distribution do theme developers style for every single permutation and combination or is this even possible to do ?

Answer 1

In this particular instance, it sounds like you added a padding to the blockquote (probably it looks nicer if you also have a background color or border) and because blockquote has a margin-bottom on it by default, the padding-bottom and margin-bottom are adding together.

My current favorite way of dealing with this is like so:

Using Sass:

p, blockquote, .other-margined-elements {
    margin: 1rem 0;

    &:first-child {
        margin-top: 0;
    }

    &:last-child {
        margin-bottom: 0;
    }
}

The generated CSS:

p, blockquote, .other-margined-elements {
    margin: 1em 0;
}

p:first-child, blockquote:first-child, .other-margined-elements:first-child {
    margin-top: 0;
}

p:last-child, blockquote:last-child, .other-margined-elements:last-child {
    margin-bottom: 0;
}

With this method, it's just a matter of figuring out which elements to add to the list. My current list is this: h1, h2, h3, h4, h5, h6, p, ul, ol, dl, table, blockquote, div, section, article, aside, fieldset

There are other ways to do this if you feel the preceding code is a bit overboard:

blockquote > :first-child {
    margin-top: 0;
}

blockquote > :last-child {
    margin-bottom: 0;
}

Thanks to the :first-child and :last-child psuedo classes, there's no need to write out every single combination.