Covering every css styling permutation and combination

Question

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.