DEV Community

Things I Wish I’d Known About CSS

Dave Smyth on June 29, 2020

I learned how to build websites the old fashioned way: looking at website source code and trying to replicate the things I saw. I threw in the odd ...

Read full post

Vesa Piittinen • Jun 29 '20 • Edited

I have a few tips I want to say around the image thing which can help to understand relation of inline, inline-block and block:

Images are like inline-block.
inline-blocks are like a single character of text.
The "mysterious" space with default images is just the way characters are laid.
Images are vertical-align: baseline by default.
Instead of display: block on image you can say vertical-align: top.
Text is always inline (this is why you need a span wrapper to do cool stuff with characters).

If you study technicalities of fonts you can understand a whole lot better the whole vertical-align stuff and relation to inline and inline-block.

perpetual . education • Jun 29 '20 • Edited

This is such a great list!!! This is the "foundations" that so many people skip / and can't seem to get back to.

"Things we wish - everyone knew about CSS."

Side note on your formatting: You can write

'''css

.selector {
  color: red;
}

'''
(or whatever language, html, css, js) and get the right syntax highlighting. : )

Great post!

Dave Smyth • Jun 29 '20 • Edited

Thank you! Great tip :)

yevgalis • Jun 30 '20

.some-class {
        width: 50%;
        padding: 2em;
        border: 0.1rem;
}

The total calculated width for .some-class would be:
50% + 2em + 0.1rem

It will actually be 50% + 4em + 0.2rem, because you use padding and border and not just padding-left (right) / border-left (right)

Dave Smyth • Jun 30 '20

Ahhhh, of course! 🤦🏻‍♂️

Consider it updated. Thanks 🙌

Jack Lowrie • Jun 30 '20

I like your point and explanation about styling :focus states differently. I had seen similar examples (probably while googling a related problem) and took away that :focus and :active states are meant to be styled together. I hadn't thought to question why those two states are distinct. This seems like an easy/fast way to start incorporating accessibility into our initial builds, and a great cue to read up on those pseudo-classes!

Dave Smyth • Jun 30 '20

Thanks, Jack. Yeah, it’s definitely something that seems obvious in hindsight, but something that isn’t seen that regularly on the web.

Glad that was useful :)

perpetual . education • Jun 29 '20

We always strip collapsing margins and use margin-top. Do you like the collapsing margin?

Dave Smyth • Jun 29 '20

I’m all-in on the Lobotomised Owl :)

perpetual . education • Jun 29 '20

Wow! Really! I haven't used it in forever. I'll have to look at it again.

Dave Smyth • Jun 29 '20

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

perpetual . education • Jun 29 '20

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;
}

perpetual . education • Jun 29 '20

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.

Dave Smyth • Jun 29 '20

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. :)

Nicholas Stimpson • Jun 30 '20 • Edited

Three things about CSS I wish I'd understood earlier:

HTML elements are not CSS boxes.
The whole concept of the line box.
The difference between block level boxes and block container boxes.

John Wright • Jun 30 '20

Can you explain the first 2 in a couple clarifying sentences please?

John Wright • Jun 30 '20

oh wait you have an article about the first one dev.to/alohci/mapping-html-to-css-...

Nicholas Stimpson • Jun 30 '20

DHTML was a thing. But <p size="4" color="#000000"> wasn't. I think you mean <font size="4" color="#000000">

Dave Smyth • Jun 30 '20

Thanks! What a typo :) Corrected...

John Wright • Jun 29 '20

I learned stuff that had evaded me because it had never been explained this simply even though it was always dreadfully simple I guess. So embarrassed and grateful.

Dave Smyth • Jun 30 '20

Thank you, John. Absolutely no embarrassment needed: lots of these things aren’t explained clearly in docs, and some of these things took me a longer time to discover than I’d care to admit. :)