DEV Community

Discussion on: Things I Wish I’d Known About CSS

 
websmyth profile image
Dave Smyth

Yeah! Wrote a bit more about it here:
cssfordesigners.com/articles/manag...

Thread Thread
 
perpetual_education profile image
perpetual . education

Ok. It's coming back to me: Good ol 2014

I've been teaching some CSS typography this last week - and I was giving them this challenge.

Here's my solution. (of course I tell them they don't need to do it that way / and it's more about the outcome - and understanding the tools)

I think the owl would do the trick... but - it also might give me a little less control. In many cases - we're just styling one big article CMS block. What are your thoughts on that?

Basically:

article > * + * {
    margin-top: 1em;
}

vs / a more specific rule

article h1 + h2 {
    margin-top: 1.2em;
}
article h2 + p {
    margin-top: 1em;
}
Thread Thread
 
perpetual_education profile image
perpetual . education

and I guess - to add to that, sometimes we're working with 'event' type lists / and there might be a headliner band... and 1 or 4 support bands, and a DJ - and a special note about the costs, and all ages or not, - and so the markup is always on the fly. In those cases there isn't necessarily space between each of those - so, that's another reason why we use the + with so much specificity. It's complex at first / but then it just works and can handle anything we throw at it. So, that's another edge on that case. Same might be if your headings had padding and background colors.

Thread Thread
 
websmyth profile image
Dave Smyth

My general approach is to set the general spacing then define exceptions, so it might be something like:

article > * + * {
  margin-top: 1em;
}
* + h2,
* + h3 {
  margin-top: 2em;
}

...etc. I write exceptions often, but I reckon it’s still fewer than if I wrote each margin. There are other benefits to this approach, though, particularly when trying to make CMS blocks that are interchangeable.

It’s also really useful for horizontal lists, but I guess you might already use it for that. :)