DEV Community

Cover image for Things I Wish I’d Known About CSS

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 ...
Collapse
 
merri profile image
Vesa Piittinen • 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:

  1. Images are like inline-block.
  2. inline-blocks are like a single character of text.
  3. The "mysterious" space with default images is just the way characters are laid.
  4. Images are vertical-align: baseline by default.
  5. Instead of display: block on image you can say vertical-align: top.
  6. 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.

Collapse
 
perpetual_education profile image
perpetual . education • 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!

Collapse
 
websmyth profile image
Dave Smyth • Edited

Thank you! Great tip :)

Collapse
 
alohci profile image
Nicholas Stimpson • 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.
Collapse
 
mrjjwright profile image
John Wright

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

Collapse
 
mrjjwright profile image
John Wright

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

Collapse
 
perpetual_education profile image
perpetual . education

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

Collapse
 
websmyth profile image
Dave Smyth

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

Collapse
 
perpetual_education profile image
perpetual . education

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

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

Collapse
 
jacklowrie profile image
Jack Lowrie

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!

Collapse
 
websmyth profile image
Dave Smyth

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

Collapse
 
alohci profile image
Nicholas Stimpson

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

Collapse
 
websmyth profile image
Dave Smyth

Thanks! What a typo :) Corrected...

Collapse
 
mrjjwright profile image
John Wright

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.

Collapse
 
websmyth profile image
Dave Smyth

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

Collapse
 
websmyth profile image
Dave Smyth

Ahhhh, of course! 🤦🏻‍♂️

Consider it updated. Thanks 🙌